props 对象的属性可以使用 ES6 （ECMAScript 2015） 的析构功能直接访问。上面的子组件可以简化，如下所示。

  const ChildComponent = ({name, age}) => {
      return (
        <div>
          <p>{name}</p>
          <p>{age}</p>
        </div>
      );
    };

      import React from "react";
      import ReactDOM from "react-dom";

      class ChildComponent extends React.Component {
        render() {
          return (
            <div>
              <p>{this.props.name}</p>
              <p>{this.props.age}</p>
            </div>
          );
        }
      }

      class ParentComponent extends React.Component {
        render() {
          return (
            <div>
              <ChildComponent name="John" age="30" />
              <ChildComponent name="Mary" age="25" />
            </div>
          );
        }
      }

⬆ 返回页首

10. state 和 props 有什么区别？

    在 React 中，和 都是普通的 JavaScript 对象，用于管理组件的数据，但它们的使用方式不同，具有不同的特征。 由组件本身管理，可以使用该函数进行更新。与 props 不同，状态可以由组件修改，用于管理组件的内部状态。状态的更改会触发组件及其子组件的重新呈现。 （“properties”的缩写）由组件的父组件传递给组件，并且是 ，这意味着组件本身不能修改它们。props 可用于配置组件的行为并在组件之间传递数据。

    state

    props

    state

    setState()

    props

    read-only

    ⬆ 返回页首

11. 为什么我们不应该直接更新状态？

    如果尝试直接更新状态，则不会重新呈现组件。

    //Wrong
    this.state.message = "Hello world";

    请改用方法。它计划对组件的状态对象进行更新。当状态更改时，组件会通过重新渲染来响应。

    setState()

    //Correct
    this.setState({ message: "Hello World" });

    注意：你可以在构造函数中或使用最新的 javascript 的类字段声明语法直接分配给状态对象。

    ⬆ 返回页首

12. 回调函数作为参数的目的是什么？

    setState()

    当 setState 完成并渲染组件时，将调用回调函数。由于是异步的，因此回调函数用于任何 post 操作。

    setState()

    注意：建议使用 lifecycle 方法，而不是这个回调函数。

    setState({ name: "John" }, () =>
      console.log("The name has updated and component re-rendered")
    );

    ⬆ 返回页首

13. HTML 和 React 事件处理有什么区别？

    以下是 HTML 和 React 事件处理之间的一些主要区别，

    1. 在 HTML 中，事件名称通常以小写形式表示为约定：

       <button onclick="activateLasers()"></button>

       而在 React 中，它遵循 camelCase 约定：

       <button onClick={activateLasers}>

    2. 在 HTML 中，你可以返回以防止默认行为：

       false

       <a
         href="#"
         onclick='console.log("The link was clicked."); return false;'
       />

       而在 React 中，你必须显式调用：

       preventDefault()

       function handleClick(event) {
         event.preventDefault();
         console.log("The link was clicked.");
       }

    3. 在 HTML 中，你需要通过附加 While 来调用函数，而在 react 中，你不应该附加函数名称。（例如，请参阅第一点中的“activateLasers”功能）

       ()

       ()

    ⬆ 返回页首

14. 如何在JSX回调中绑定方法或事件处理程序？

    有 3 种可能的方法可以在类组件中实现此目的：

    1. 构造函数中的绑定：在 JavaScript 类中，默认情况下不绑定这些方法。同样的规则也适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。

       class User extends Component {
         constructor(props) {
           super(props);
           this.handleClick = this.handleClick.bind(this);
         }
         handleClick() {
           console.log("SingOut triggered");
         }
         render() {
           return <button onClick={this.handleClick}>SingOut</button>;
         }
       }

    2. 公共类字段语法：如果你不喜欢使用绑定方法，则可以使用公共类字段语法来正确绑定回调。默认情况下，Create React App 启用此语法。

       handleClick = () => {
         console.log("SingOut triggered", this);
       };

       <button onClick={this.handleClick}>SingOut</button>

    3. 回调中的箭头函数：可以直接在回调中使用箭头函数。

       handleClick() {
           console.log('SingOut triggered');
       }
       render() {
           return <button onClick={() => this.handleClick()}>SignOut</button>;
       }

    注意：如果回调作为 prop 传递给子组件，则这些组件可能会执行额外的重新渲染。在这些情况下，最好使用考虑性能的公共类字段语法方法。

    .bind()

    ⬆ 返回页首

15. 如何将参数传递给事件处理程序或回调？

    可以使用箭头函数来环绕事件处理程序并传递参数：

    <button onClick={() => this.handleClick(id)} />

    这相当于调用：

    .bind

    <button onClick={this.handleClick.bind(this, id)} />

    除了这两种方法之外，你还可以将参数传递给定义为箭头函数的函数

    <button onClick={this.handleClick(id)} />;
    handleClick = (id) => () => {
      console.log("Hello, your ticket number is", id);
    };

    ⬆ 返回页首

16. React 中的合成事件是什么？

    SyntheticEvent

    是围绕浏览器本机事件的跨浏览器包装器。它的 API 与浏览器的本机事件相同，包括 和 ，只是这些事件在所有浏览器上的工作方式相同。可以使用属性直接从合成事件访问本机事件。

    stopPropagation()

    preventDefault()

    nativeEvent

    让我们以 BookStore 标题搜索组件为例，该组件能够获取所有本机事件属性

    function BookStore() {
      handleTitleChange(e) {
        console.log('The new title is:', e.target.value);
        // 'e' represents synthetic event
        const nativeEvent = e.nativeEvent;
        console.log(nativeEvent);
        e.stopPropogation();
        e.preventDefault();
      }
    
      return <input name="title" onChange={handleTitleChange} />
    }

    ⬆ 返回页首

17. 什么是内联条件表达式？

    你可以使用 if 语句或 JS 中可用的三元表达式来有条件地呈现表达式。除了这些方法之外，你还可以通过将任何表达式包装在大括号中，然后用 JS 逻辑运算符 .

    &&

    <h1>Hello!</h1>;
    {
      messages.length > 0 && !isLogin ? (
        <h2>You have {messages.length} unread messages.</h2>
      ) : (
        <h2>You don't have unread messages.</h2>
      );
    }

    ⬆ 返回页首

18. 什么是“键”属性，在元素数组中使用它有什么好处？

    A 是映射数组以呈现数据时应包含的特殊属性。Key prop 帮助 React 识别哪些项目已更改、添加或删除。

    key

    密钥在其同级中应该是唯一的。大多数情况下，我们使用数据中的 ID 作为键：

    const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

    如果渲染项没有稳定的 ID，则可以使用项索引作为键作为最后的手段：

    const todoItems = todos.map((todo, index) => (
      <li key={index}>{todo.text}</li>
    ));

    注意：

    1. 如果项的顺序可能会更改，则不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
    2. 如果将列表项提取为单独的组件，则在列表组件上应用键而不是标记。

       li

    3. 如果列表项上不存在 prop，则控制台中将出现警告消息。

       key

    4. key 属性接受字符串或数字，并在内部将其转换为字符串类型。

    ⬆ 返回页首

19. refs有什么用？

    ref 用于返回对元素的引用。在大多数情况下，应避免使用它们，但是，当你需要直接访问 DOM 元素或组件的实例时，它们可能很有用。

    ⬆ 返回页首

20. 如何创建引用？

    有两种方法

    1. 这是最近添加的方法。引用是使用 method 创建的，并通过属性附加到 React 元素。为了在整个组件中使用 refs，只需将 ref 分配给构造函数中的实例属性即可。

       React.createRef()

       ref

       class MyComponent extends React.Component {
         constructor(props) {
           super(props);
           this.myRef = React.createRef();
         }
         render() {
           return <div ref={this.myRef} />;
         }
       }

    2. 无论 React 版本如何，你都可以使用 ref 回调方法。例如，按如下方式访问搜索栏组件的输入元素：

       class SearchBar extends Component {
         constructor(props) {
           super(props);
           this.txtSearch = null;
           this.state = { term: "" };
           this.setInputSearchRef = (e) => {
             this.txtSearch = e;
           };
         }
         onInputChange(event) {
           this.setState({ term: this.txtSearch.value });
         }
         render() {
           return (
             <input
               value={this.state.term}
               onChange={this.onInputChange.bind(this)}
               ref={this.setInputSearchRef}
             />
           );
         }
       }

    你还可以在使用闭包的函数组件中使用 refs。注意：你也可以使用内联 ref 回调，即使这不是推荐的方法。

    ⬆ 返回页首

21. 什么是前向参考？

    引用转发是一项功能，它允许某些组件获取它们收到的引用，并将其进一步传递给子组件。

    const ButtonElement = React.forwardRef((props, ref) => (
      <button ref={ref} className="CustomButton">
        {props.children}
      </button>
    ));
    
    // Create ref to the DOM button:
    const ref = React.createRef();
    <ButtonElement ref={ref}>{"Forward Ref"}</ButtonElement>;

    ⬆ 返回页首

22. 在回调引用和 findDOMNode（） 中哪个是首选选项？

    最好使用回调引用而不是 API。因为阻止了将来 React 的某些改进。

    findDOMNode()

    findDOMNode()

    使用的传统方法：

    findDOMNode

    class MyComponent extends Component {
      componentDidMount() {
        findDOMNode(this).scrollIntoView();
      }
    
      render() {
        return <div />;
      }
    }

    推荐的方法是：

    class MyComponent extends Component {
      constructor(props) {
        super(props);
        this.node = createRef();
      }
      componentDidMount() {
        this.node.current.scrollIntoView();
      }
    
      render() {
        return <div ref={this.node} />;
      }
    }

    ⬆ 返回页首

23. 为什么 String Refs 是遗留的？

    如果你以前使用过 React，你可能熟悉一个较旧的 API，其中属性是一个字符串，比如 ，而 DOM 节点被访问为 .我们建议不要这样做，因为字符串引用存在以下问题，并且被认为是遗留的。在 React v16 中删除了字符串引用。

    ref

    ref={'textInput'}

    this.refs.textInput

    1. 它们强制 React 跟踪当前正在执行的组件。这是有问题的，因为它使 react 模块具有状态，因此当 react 模块在捆绑包中复制时会导致奇怪的错误。

    2. 它们不可组合 — 如果库在传递的子项上放置了一个 ref，则用户不能在其上放置另一个 ref。回调引用是完全可组合的。

    3. 它们不适用于像 Flow 这样的静态分析。Flow 无法猜测框架使字符串 ref 出现在 上的魔力，以及它的类型（可能不同）。回调引用对静态分析更友好。

       this.refs

    4. 它并不像大多数人所期望的那样使用“渲染回调”模式（例如）

       class MyComponent extends Component {
         renderRow = (index) => {
           // This won't work. Ref will get attached to DataTable rather than MyComponent:
           return <input ref={"input-" + index} />;
       
           // This would work though! Callback refs are awesome.
           return <input ref={(input) => (this["input-" + index] = input)} />;
         };
       
         render() {
           return (
             <DataTable data={this.props.data} renderRow={this.renderRow} />
           );
         }
       }

    ⬆ 返回页首

24. 什么是虚拟 DOM？

    虚拟 DOM （VDOM） 是真实 DOM 的内存表示形式。UI 的表示形式保存在内存中，并与“真实”DOM 同步。这是在调用渲染函数和在屏幕上显示元素之间发生的一个步骤。这整个过程称为和解。

    ⬆ 返回页首

25. 虚拟 DOM 是如何工作的？

    虚拟 DOM 只需三个简单的步骤即可完成。

    1. 每当任何基础数据发生更改时，整个 UI 都会以虚拟 DOM 表示形式重新呈现。

       

    2. 然后计算以前的 DOM 表示和新的 DOM 表示之间的差值。

       

    3. 一旦计算完成，真正的DOM将只更新实际更改的内容。

       

    ⬆ 返回页首

26. Shadow DOM 和 Virtual DOM 有什么区别？

    Shadow DOM 是一种浏览器技术，主要用于在 Web 组件中确定变量和 CSS 的作用域。虚拟 DOM 是一个概念，由库在浏览器 API 之上的 JavaScript 实现。

    ⬆ 返回页首

27. 什么是 React Fiber？

    Fiber 是 React v16 中新的协调引擎或核心算法的重新实现。React Fiber 的目标是提高其对动画、布局、手势、暂停、中止或重用工作的能力等领域的适用性，并为不同类型的更新分配优先级;和新的并发原语。

    ⬆ 返回页首

28. React Fiber 的主要目标是什么？

    React Fiber 的目标是提高其对动画、布局和手势等领域的适用性。它的主要功能是增量渲染：能够将渲染工作拆分为块并将其分散到多个帧上。

    从文档

    其主要目标是：

    1. 能够将可中断的工作分成块。
    2. 能够确定正在进行的工作的优先级、变基和重用。
    3. 能够在父子之间来回让步，以支持 React 中的布局。
    4. 能够从 render（） 返回多个元素。
    5. 更好地支持错误边界。

    ⬆ 返回页首

29. 什么是受控组件？

    在后续用户输入时控制表单中的输入元素的组件称为受控组件，即每个状态突变都将具有关联的处理程序函数。

    例如，要用大写字母写所有名称，我们使用 handleChange，如下所示，

    handleChange(event) {
      this.setState({value: event.target.value.toUpperCase()})
    }

    ⬆ 返回页首

30. 什么是不受控制的组件？

    不受控制的组件是在内部存储自己的状态的组件，你可以在需要时使用 ref 查询 DOM 以查找其当前值。这有点像传统的 HTML。

    在下面的 UserProfile 组件中，使用 ref 访问输入。

    name

    class UserProfile extends React.Component {
      constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
      }
    
      handleSubmit(event) {
        alert("A name was submitted: " + this.input.current.value);
        event.preventDefault();
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              {"Name:"}
              <input type="text" ref={this.input} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }

    在大多数情况下，建议使用受控组件来实现表单。在受控组件中，表单数据由 React 组件处理。另一种选择是不受控制的组件，其中表单数据由 DOM 本身处理。

    ⬆ 返回页首

31. createElement 和 cloneElement 有什么区别？

    JSX 元素将被转译为函数以创建 React 元素，这些元素将用于 UI 的对象表示。Whereas 用于克隆元素并向其传递新的道具。

    React.createElement()

    cloneElement

    ⬆ 返回页首

32. 什么是 React 中的提升状态？

    当多个组件需要共享相同的更改数据时，建议将共享状态提升到最接近的共同祖先。这意味着，如果两个子组件共享其父组件的相同数据，则将状态移动到父组件，而不是在两个子组件中维护本地状态。

    ⬆ 返回页首

33. 组件生命周期有哪些不同阶段？

    组件生命周期有三个不同的生命周期阶段：

    1. 安装：该组件已准备好挂载到浏览器 DOM 中。此阶段涵盖从 、 、 和 生命周期方法进行初始化。

       constructor()

       getDerivedStateFromProps()

       render()

       componentDidMount()

    2. 更新：在此阶段，组件以两种方式进行更新，发送新道具并从 或 更新状态。此阶段包括 、 、 和 生命周期方法。

       setState()

       forceUpdate()

       getDerivedStateFromProps()

       shouldComponentUpdate()

       render()

       getSnapshotBeforeUpdate()

       componentDidUpdate()

    3. 卸载：在最后一个阶段，不需要该组件，并且可以从浏览器 DOM 中卸载。此阶段包括生命周期方法。

       componentWillUnmount()

    值得一提的是，React 在对 DOM 进行更改时，内部有一个阶段的概念。它们分开如下

    1. 呈现该组件将渲染没有任何副作用。这适用于 Pure 组件，在此阶段，React 可以暂停、中止或重新启动渲染。

    2. 预提交在组件实际将更改应用于 DOM 之前，有一个时刻允许 React 通过 .

       getSnapshotBeforeUpdate()

    3. 犯React 与 DOM 一起工作，并分别执行最终的生命周期，用于挂载、更新和卸载。

       componentDidMount()

       componentDidUpdate()

       componentWillUnmount()

    React 16.3+ 阶段（或交互式版本）)

    

    在 React 16.3 之前

    

    ⬆ 返回页首

34. React 的生命周期方法有哪些？

    在 React 16.3 之前

    • componentWillMount：在渲染之前执行，用于根组件中的应用级配置。
    • componentDidMount：在第一次渲染后执行，这里应该发生所有 AJAX 请求、DOM 或状态更新，并设置事件侦听器。
    • componentWillReceiveProps：当特定道具更新以触发状态转换时执行。
    • shouldComponentUpdate：确定是否更新组件。默认情况下，它返回 .如果确定组件在更新状态或道具后不需要渲染，则可以返回 false 值。这是提高性能的好地方，因为它允许你在组件收到新道具时防止重新渲染。

      true

    • componentWillUpdate：在重新渲染组件之前执行，当有道具和状态更改确认时，返回 true。

      shouldComponentUpdate()

    • componentDidUpdate：大多数情况下，它用于更新 DOM 以响应 prop 或状态更改。
    • componentWillUnmount：它将用于取消任何传出网络请求，或删除与组件关联的所有事件侦听器。

    React 16.3+

    • getDerivedStateFromProps：在调用之前调用，并在每次渲染时调用。这适用于需要派生状态的罕见用例。如果你需要派生状态，值得一读。

      render()

    • componentDidMount：在首次渲染后执行，所有 AJAX 请求、DOM 或状态更新以及设置事件侦听器都应发生。
    • shouldComponentUpdate：确定是否更新组件。默认情况下，它返回 .如果确定组件在状态或道具更新后不需要渲染，则可以返回 false 值。这是提高性能的好地方，因为它允许你在组件收到新道具时防止重新渲染。

      true

    • getSnapshotBeforeUpdate：在呈现的输出提交到 DOM 之前执行。此返回的任何值都将传递到 中。这对于从 DOM 捕获信息（即滚动位置）很有用。

      componentDidUpdate()

    • componentDidUpdate：大多数情况下，它用于更新 DOM 以响应 prop 或状态更改。如果返回，则不会触发 。

      shouldComponentUpdate()

      false

    • componentWillUnmount它将用于取消任何传出网络请求，或删除与组件关联的所有事件侦听器。

    ⬆ 返回页首

35. 什么是高阶分量？

    高阶组件 （HOC） 是获取组件并返回新组件的函数。基本上，它是一种源自 React 组合性质的模式。

    我们称它们为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。

    const EnhancedComponent = higherOrderComponent(WrappedComponent);

    HOC 可用于许多用例：

    1. 代码重用、逻辑和引导抽象。
    2. 渲染劫持。
    3. 状态抽象和操作。
    4. 道具操作。

    ⬆ 返回页首

36. 如何为 HOC 组件创建道具代理？

    你可以使用 props 代理模式添加/编辑传递给组件的 prop，如下所示：

    function HOC(WrappedComponent) {
      return class Test extends Component {
        render() {
          const newProps = {
            title: "New Header",
            footer: false,
            showFeatureX: false,
            showFeatureY: true,
          };
    
          return <WrappedComponent {...this.props} {...newProps} />;
        }
      };
    }

    ⬆ 返回页首

37. 什么是上下文？

    Context 提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递 props。

    例如，经过身份验证的用户、区域设置首选项、UI 主题需要由许多组件在应用程序中访问。

    const { Provider, Consumer } = React.createContext(defaultValue);

    ⬆ 返回页首

38. 什么是儿童道具？

    Children 是一个 prop （），它允许你将组件作为数据传递给其他组件，就像你使用的任何其他 prop 一样。放在组件的开始和结束标记之间的组件树将作为 prop 传递给该组件。

    this.props.children

    children

    React API 中有几种方法可以使用此道具。这些包括 、 、 、 、 。

    React.Children.map

    React.Children.forEach

    React.Children.count

    React.Children.only

    React.Children.toArray

    儿童道具的简单用法如下，

    const MyDiv = React.createClass({
      render: function () {
        return <div>{this.props.children}</div>;
      },
    });
    
    ReactDOM.render(
      <MyDiv>
        <span>{"Hello"}</span>
        <span>{"World"}</span>
      </MyDiv>,
      node
    );

    ⬆ 返回页首

39. 如何在React中写评论？

    React/JSX 中的注释类似于 JavaScript 多行注释，但用大括号括起来。

    单行注释：

    <div>
      {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
      {`Welcome ${user}, let's play React`}
    </div>

    多行注释：

    <div>
      {/* Multi-line comments for more than
       one line */}
      {`Welcome ${user}, let's play React`}
    </div>

    ⬆ 返回页首

40. 使用带有 props 参数的超级构造函数的目的是什么？

    子类构造函数在调用该方法之前不能使用引用。这同样适用于 ES6 子类。传递 props 参数进行调用的主要原因是在子构造函数中进行访问。

    this

    super()

    super()

    this.props

    传球道具：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }

    不传递道具：

    class MyComponent extends React.Component {
      constructor(props) {
        super();
    
        console.log(this.props); // prints undefined
    
        // but props parameter is still available
        console.log(props); // prints { name: 'John', age: 42 }
      }
    
      render() {
        // no difference outside constructor
        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }

    上面的代码片段揭示了仅在构造函数中有所不同。在构造函数外部也是如此。

    this.props

    ⬆ 返回页首

41. 什么是和解？

    Reconciliation

    是 React 更新浏览器 DOM 并使 React 工作速度更快的过程。React 使用 a，以便组件更新是可预测的和更快的。当组件更新时，React 会首先计算 DOM 的副本和副本之间的差异。 React 存储了一个名为 .当我们进行更改或添加数据时，React 会创建一个新的虚拟 DOM 并将其与前一个进行比较。此比较由 完成。 现在 React 将虚拟 DOM 与真实 DOM 进行了比较。它找出已更改的节点，并在 Real DOM 中仅更新已更改的节点，而其余节点保持不变。此过程称为对帐。

    diffing algorithm

    real DOM

    (Virtual DOM)

    Virtual DOM

    Diffing Algorithm

    ⬆ 返回页首

42. 如何使用动态键名称设置状态？

    如果你使用 ES6 或 Babel 转译器来转换 JSX 代码，那么你可以使用计算属性名称来完成此操作。

    handleInputChange(event) {
      this.setState({ [event.target.id]: event.target.value })
    }

    ⬆ 返回页首

43. 每次渲染组件时调用函数的常见错误是什么？

    你需要确保在将函数作为参数传递时未调用该函数。

    render() {
      // Wrong: handleClick is called instead of passed as a reference!
      return <button onClick={this.handleClick()}>{'Click Me'}</button>
    }

    相反，传递函数本身，不带括号：

    render() {
      // Correct: handleClick is passed as a reference!
      return <button onClick={this.handleClick}>{'Click Me'}</button>
    }

    ⬆ 返回页首

44. 惰性函数是否支持命名导出？

    否，当前函数仅支持默认导出。如果要导入名为 exports 的模块，可以创建一个中间模块，将其重新导出为默认模块。它还可以确保树木摇晃继续工作并且不会拉动未使用的组件。 让我们以一个导出多个命名组件的组件文件为例，

    React.lazy

    // MoreComponents.js
    export const SomeComponent = /* ... */;
    export const UnusedComponent = /* ... */;

    并重新导出中间文件中的组件

    MoreComponents.js

    IntermediateComponent.js

    // IntermediateComponent.js
    export { SomeComponent as default } from "./MoreComponents.js";

    现在你可以使用惰性函数导入模块，如下所示，

    import React, { lazy } from "react";
    const SomeComponent = lazy(() => import("./IntermediateComponent.js"));

    ⬆ 返回页首

45. 为什么 React 使用 over attribute？

    className

    class

    该属性是 JavaScript 中的关键字，JSX 是 JavaScript 的扩展。这就是 React 使用 .传递一个字符串作为道具。

    class

    className

    class

    className

    render() {
      return <span className={'menu navigation-menu'}>{'Menu'}</span>
    }

    ⬆ 返回页首

46. 什么是片段？

    在 React 中，组件返回多个元素是一种常见的模式或做法。Fragments 允许你对子节点列表进行分组，而无需向 DOM 添加额外的节点。 你需要使用具有空标记 （<></>） 的任一或更短的语法。

    下面是如何在 Story 组件中使用片段的示例。

    function Story({title, description, date}) {
      return (
          <Fragment>
            <h2>{title}</h2>
            <p>{description}</p>
            <p>{date}</p>
          </Fragment>
        );
    }

    也可以在循环中呈现片段列表，并提供必需的 key 属性。

    function StoryBook() {
      return stories.map(story =>
        <Fragment key={ story.id}>
          <h2>{story.title}</h2>
          <p>{story.description}</p>
          <p>{story.date}</p>
        </Fragment>
        );
    }

    通常，除非需要 key 属性，否则你不需要使用。较短语法的用法如下所示。

    function Story({title, description, date}) {
      return (
          <>
            <h2>{title}</h2>
            <p>{description}</p>
            <p>{date}</p>
          </>
        );
    }

    ⬆ 返回页首

47. 为什么 fragments 比 container div 更好？

    以下是更喜欢片段而不是容器 DOM 元素的原因列表，

    1. 片段速度更快，并且通过不创建额外的 DOM 节点而使用更少的内存。这只对非常大和深的树有真正的好处。
    2. 一些 CSS 机制，如 Flexbox 和 CSS Grid，具有特殊的父子关系，在中间添加 div 会使得很难保持所需的布局。
    3. DOM Inspector 不那么杂乱。

    ⬆ 返回页首

48. React 中的门户是什么？

    Portal 是将子节点呈现到存在于父组件的 DOM 层次结构之外的 DOM 节点的推荐方法。

    ReactDOM.createPortal(child, container);

    第一个参数是任何可渲染的 React 子参数，例如元素、字符串或片段。第二个参数是 DOM 元素。

    ⬆ 返回页首

49. 什么是无状态组件？

    如果组件的行为与其状态无关，则它可以是无状态组件。你可以使用函数或类来创建无状态组件。但是，除非你需要在组件中使用生命周期钩子，否则你应该选择函数组件。如果你决定在这里使用功能组件，则有很多好处;它们易于编写、理解和测试，速度更快，你可以完全避免使用关键字。

    this

    ⬆ 返回页首

50. 什么是有状态组件？

    如果组件的行为依赖于组件的状态，则可以将其称为有状态组件。这些有状态组件要么是带有钩子的函数组件，要么是类组件。

    让我们以函数有状态组件为例，它根据 click 事件更新状态，

    import React, {useState} from 'react';
    
    const App = (props) => {
    const [count, setCount] = useState(0);
    handleIncrement() {
      setCount(count+1);
    }
    
    return (
      <>
        <button onClick={handleIncrement}>Increment</button>
        <span>Counter: {count}</span>
      </>
      )
    }

    查看班级

    等效类有状态组件，其状态在“构造函数”中初始化。

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }
    
      handleIncrement() {
        setState({count: this.state.count + 1})
      }
    
      render() {
        <>
         <button onClick={() => this.handleIncrement}>Increment</button>
         <span>Count: {count}</span>
        </>
      }
    }

    ⬆ 返回页首

51. 如何在 React 中对 props 进行验证？

    当应用程序在开发模式下运行时，React 会自动检查我们在组件上设置的所有道具，以确保它们具有正确的类型。如果类型不正确，React 将在控制台中生成警告消息。由于性能影响，它在生产模式下被禁用。强制道具用 定义。

    isRequired

    预定义的道具类型集：

    1. PropTypes.number

    2. PropTypes.string

    3. PropTypes.array

    4. PropTypes.object

    5. PropTypes.func

    6. PropTypes.node

    7. PropTypes.element

    8. PropTypes.bool

    9. PropTypes.symbol

    10. PropTypes.any

    我们可以对组件进行如下定义：

    propTypes

    User

    import React from "react";
    import PropTypes from "prop-types";
    
    class User extends React.Component {
      static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
      };
    
      render() {
        return (
          <>
            <h1>{`Welcome, ${this.props.name}`}</h1>
            <h2>{`Age, ${this.props.age}`}</h2>
          </>
        );
      }
    }

    注意：在 React v15.5 中，PropType 被移到了库中。

    React.PropTypes

    prop-types

    等效功能组件

    import React from "react";
    import PropTypes from "prop-types";
    
    function User({ name, age }) {
      return (
        <>
          <h1>{`Welcome, ${name}`}</h1>
          <h2>{`Age, ${age}`}</h2>
        </>
      );
    }
    
    User.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
    };

    ⬆ 返回页首

52. React 的优势是什么？

    以下是 React 的主要优势列表，

    1. 使用虚拟 DOM 提高应用程序的性能。
    2. JSX 使代码易于阅读和编写。
    3. 它在客户端和服务器端 （SSR） 上呈现。
    4. 易于与框架（Angular、Backbone）集成，因为它只是一个视图库。
    5. 使用 Jest 等工具轻松编写单元和集成测试。

    ⬆ 返回页首

53. React 的局限性是什么？

    除了优点之外，React 也几乎没有限制，

    1. React 只是一个视图库，而不是一个完整的框架。
    2. 对于刚接触 Web 开发的初学者来说，有一个学习曲线。
    3. 将 React 集成到传统的 MVC 框架中需要一些额外的配置。
    4. 代码复杂性随着内联模板和 JSX 的增加而增加。
    5. 过多的小型组件会导致过度工程或样板。

    ⬆ 返回页首

54. React v16 中的错误边界是什么？

    错误边界是捕获其子组件树中任何位置的 JavaScript 错误的组件，记录这些错误，并显示回退 UI，而不是崩溃的组件树。

    如果类组件定义了一个名为 或 的新生命周期方法，则该类组件将成为错误边界：

    componentDidCatch(error, info)

    static getDerivedStateFromError() 

    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }
    
      componentDidCatch(error, info) {
        // You can also log the error to an error reporting service
        logErrorToMyService(error, info);
      }
    
      static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
      }
    
      render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>{"Something went wrong."}</h1>;
        }
        return this.props.children;
      }
    }

    之后，将其用作常规组件：

    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>

    ⬆ 返回页首

55. React v15 中如何处理错误边界？

    React v15 为使用方法的错误边界提供了非常基本的支持。它已在 React v16 中重命名为。

    unstable_handleError

    componentDidCatch

    ⬆ 返回页首

56. 静态类型检查的推荐方法有哪些？

    通常我们使用 PropTypes 库（从 React v15.5 开始移动到包中）在 React 应用程序中进行类型检查。对于大型代码库，建议使用静态类型检查器，例如 Flow 或 TypeScript，它们在编译时执行类型检查并提供自动完成功能。

    React.PropTypes

    prop-types

    ⬆ 返回页首

57. 包装有什么用？

    react-dom

    该包提供了特定于 DOM 的方法，这些方法可在应用的顶层使用。使用此模块不需要大多数组件。此包的一些方法是：

    react-dom

    1. render()

    2. hydrate()

    3. unmountComponentAtNode()

    4. findDOMNode()

    5. createPortal()

    ⬆ 返回页首

58. 渲染方法的目的是什么？

    react-dom

    此方法用于将 React 元素渲染到提供的容器中的 DOM 中，并返回对组件的引用。如果 React 元素之前被渲染到容器中，它将对其执行更新，并且仅在必要时更改 DOM 以反映最新的更改。

    ReactDOM.render(element, container, [callback])
    

    如果提供了可选的回调，它将在组件渲染或更新后执行。

    ⬆ 返回页首

59. 什么是 ReactDOMServer？

    该对象使你能够将组件呈现为静态标记（通常在节点服务器上使用）。此对象主要用于服务器端呈现 （SSR）。以下方法可用于服务器和浏览器环境：

    ReactDOMServer

    1. renderToString()

    2. renderToStaticMarkup()

    例如，你通常运行基于 Node 的 Web 服务器（如 Express、happy 或 Koa），然后调用以将根组件呈现为字符串，然后将其作为响应发送。

    renderToString

    // using Express
    import { renderToString } from "react-dom/server";
    import MyPage from "./MyPage";
    
    app.get("/", (req, res) => {
      res.write(
        "<!DOCTYPE html><html><head><title>My Page</title></head><body>"
      );
      res.write('<div id="content">');
      res.write(renderToString(<MyPage />));
      res.write("</div></body></html>");
      res.end();
    });

    ⬆ 返回页首

60. 如何在React中使用innerHTML？

    该属性是 React 在浏览器 DOM 中使用的替代品。就像 一样，考虑到跨站点脚本 （XSS） 攻击，使用此属性是有风险的。你只需要将一个对象作为键传递，将 HTML 文本作为值传递。

    dangerouslySetInnerHTML

    innerHTML

    innerHTML

    __html

    在此示例中，MyComponent 使用属性来设置 HTML 标记：

    dangerouslySetInnerHTML

    function createMarkup() {
      return { __html: "First · Second" };
    }
    
    function MyComponent() {
      return <div dangerouslySetInnerHTML={createMarkup()} />;
    }

    ⬆ 返回页首

61. 如何在 React 中使用样式？

    该特性接受具有 camelCased 属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 样式的 JavaScript 属性一致，效率更高，并防止了 XSS 安全漏洞。

    style

    const divStyle = {
      color: "blue",
      backgroundImage: "url(" + imgUrl + ")",
    };
    
    function HelloWorldComponent() {
      return <div style={divStyle}>Hello World!</div>;
    }

    样式键是 camelCased 的，以便与访问 JavaScript 中 DOM 节点上的属性保持一致（例如 ）。

    node.style.backgroundImage

    ⬆ 返回页首

62. React 中的事件有何不同？

    在 React 元素中处理事件有一些语法差异：

    1. React 事件处理程序使用 camelCase 而不是小写字母命名。
    2. 使用 JSX，你可以传递一个函数作为事件处理程序，而不是字符串。

    ⬆ 返回页首

63. 如果在构造函数中使用会发生什么？

    setState()

    当你使用 时，除了分配给对象状态之外，React 还会重新渲染组件及其所有子组件。你会收到如下错误：只能更新已挂载或挂载组件。因此，我们需要在构造函数中初始化变量。

    setState()

    this.state

    ⬆ 返回页首

64. 索引作为键有什么影响？

    键应该是稳定的、可预测的和唯一的，以便 React 可以跟踪元素。

    在下面的代码片段中，每个元素的键将基于排序，而不是绑定到所表示的数据。这限制了 React 可以做的优化。

    {
      todos.map((todo, index) => <Todo {...todo} key={index} />);
    }

    如果你将元素数据用于唯一键，假设 todo.id 对于这个列表是唯一的并且稳定，React 将能够重新排序元素，而无需重新评估它们。

    {
      todos.map((todo) => <Todo {...todo} key={todo.id} />);
    }

    ⬆ 返回页首

65. 在方法中使用好吗？

    setState()

    componentWillMount()

    是的，使用内部方法是安全的。但同时，建议避免在生命周期方法中进行异步初始化。 在挂载发生之前立即调用。它之前被调用，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。我们需要确保组件初始化的异步调用发生在 中，而不是 .

    setState()

    componentWillMount()

    componentWillMount()

    componentWillMount()

    render()

    componentDidMount()

    componentWillMount()

    componentDidMount() {
      axios.get(`api/todos`)
        .then((result) => {
          this.setState({
            messages: [...result.data]
          })
        })
    }

    ⬆ 返回页首

66. 如果在初始状态下使用道具会发生什么？

    如果在未刷新组件的情况下更改了组件上的 props，则永远不会显示新的 prop 值，因为构造函数永远不会更新组件的当前状态。props 的状态初始化仅在首次创建组件时运行。

    以下组件不会显示更新的输入值：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          records: [],
          inputValue: this.props.inputValue,
        };
      }
    
      render() {
        return <div>{this.state.inputValue}</div>;
      }
    }

    在 render 方法中使用 props 将更新值：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          record: [],
        };
      }
    
      render() {
        return <div>{this.props.inputValue}</div>;
      }
    }

    ⬆ 返回页首

67. 如何有条件地渲染组件？

    在某些情况下，你希望根据某些状态呈现不同的组件。JSX 不渲染 或 ，因此仅当某个条件为 true 时，才可以使用条件短路来渲染组件的给定部分。

    false

    undefined

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address && <p>{address}</p>}
      </div>
    );

    如果需要条件，请使用三元运算符。

    if-else

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address ? <p>{address}</p> : <p>{"Address is not available"}</p>}
      </div>
    );

    ⬆ 返回页首

68. 为什么我们在 DOM 元素上散布道具时需要小心？

    当我们传播 props 时，我们会遇到添加未知 HTML 属性的风险，这是一种不好的做法。相反，我们可以将 prop destructing 与运算符一起使用，因此它只会添加所需的 prop。

    ...rest

    例如

    const ComponentA = () => (
      <ComponentB isDisplay={true} className={"componentStyle"} />
    );
    
    const ComponentB = ({ isDisplay, ...domProps }) => (
      <div {...domProps}>{"ComponentB"}</div>
    );

    ⬆ 返回页首

69. 你如何在 React 中使用装饰器？

    你可以修饰类组件，这与将组件传递到函数中相同。装饰器是修改组件功能的灵活且可读的方式。

    @setTitle("Profile")
    class Profile extends React.Component {
      //....
    }
    
    /*
      title is a string that will be set as a document title
      WrappedComponent is what our decorator will receive when
      put directly above a component class as seen in the example above
    */
    const setTitle = (title) => (WrappedComponent) => {
      return class extends React.Component {
        componentDidMount() {
          document.title = title;
        }
    
        render() {
          return <WrappedComponent {...this.props} />;
        }
      };
    };

    注意：装饰器是 ES7 中没有出现的功能，但目前是第 2 阶段的提案。

    ⬆ 返回页首

70. 你如何记住一个组件？

    有可用的记忆库，可用于函数组件。

    例如，库可以记住另一个组件中的组件。

    moize

    import moize from "moize";
    import Component from "./components/Component"; // this module exports a non-memoized component
    
    const MemoizedFoo = moize.react(Component);
    
    const Consumer = () => {
      <div>
        {"I will memoize the following entry:"}
        <MemoizedFoo />
      </div>;
    };

    更新：从 React v16.6.0 开始，我们有一个 .它提供了一个更高阶的组件，除非道具改变，否则它会记住组件。要使用它，只需在使用前使用 React.memo 包装组件即可。

    React.memo

    const MemoComponent = React.memo(function MemoComponent(props) {
      /* render using props */
    });
    OR;
    export default React.memo(MyFunctionComponent);

    ⬆ 返回页首

71. 如何实现服务器端渲染或 SSR？

    React 已经具备了在 Node 服务器上处理渲染的能力。DOM 渲染器的特殊版本可用，它遵循与客户端相同的模式。

    import ReactDOMServer from "react-dom/server";
    import App from "./App";
    
    ReactDOMServer.renderToString(<App />);

    此方法将常规 HTML 输出为字符串，然后可以将其作为服务器响应的一部分放置在页面正文中。在客户端，React 会检测预渲染的内容，并无缝地从中断的地方继续。

    ⬆ 返回页首

72. 如何在React中启用生产模式？

    你应该使用 Webpack 的方法设置为 ，通过该方法可以去除 propType 验证和额外警告之类的内容。除此之外，如果你缩小代码，例如，Uglify的死代码消除，去掉仅开发代码和注释，它将大大减小你的捆绑包的大小。

    DefinePlugin

    NODE_ENV

    production

    ⬆ 返回页首

73. 什么是CRA及其好处？

    CLI工具允许你快速创建和运行React应用程序，而无需配置步骤。

    create-react-app

    让我们使用 CRA 创建 Todo 应用程序：

    # Installation
    $ npm install -g create-react-app
    
    # Create new project
    $ create-react-app todo-app
    $ cd todo-app
    
    # Build, test and run
    $ npm run build
    $ npm run test
    $ npm start

    它包含了构建 React 应用所需的一切：

    1. React、JSX、ES6 和 Flow 语法支持。
    2. ES6 之外的附加语言，例如对象扩展运算符。
    3. 自动前缀 CSS，因此你不需要 -webkit- 或其他前缀。
    4. 一个快速的交互式单元测试运行程序，内置了对覆盖率报告的支持。
    5. 实时开发服务器，对常见错误发出警告。
    6. 一个构建脚本，用于将 JS、CSS 和图像捆绑到生产环境中，以及哈希和源映射。

    ⬆ 返回页首

74. 挂载的生命周期方法顺序是什么？

    在创建组件实例并将其插入到 DOM 中时，将按以下顺序调用生命周期方法。

    1. constructor()

    2. static getDerivedStateFromProps()

    3. render()

    4. componentDidMount()

    ⬆ 返回页首

75. React v16 中将弃用哪些生命周期方法？

    以下生命周期方法将是不安全的编码实践，并且对于异步渲染会造成更多问题。

    1. componentWillMount()

    2. componentWillReceiveProps()

    3. componentWillUpdate()

    从 React v16.3 开始，这些方法都带有前缀别名，无前缀版本将在 React v17 中删除。

    UNSAFE_

    ⬆ 返回页首

76. 生命周期法的目的是什么？

    getDerivedStateFromProps()

    新的静态生命周期方法在组件实例化之后以及重新呈现之前调用。它可以返回一个对象来更新状态，或者指示新道具不需要任何状态更新。

    getDerivedStateFromProps()

    null

    class MyComponent extends React.Component {
      static getDerivedStateFromProps(props, state) {
        // ...
      }
    }

    此生命周期方法涵盖了 的所有用例。

    componentDidUpdate()

    componentWillReceiveProps()

    ⬆ 返回页首

77. 生命周期法的目的是什么？

    getSnapshotBeforeUpdate()

    新的生命周期方法在 DOM 更新之前调用。此方法的返回值将作为第三个参数传递给 。

    getSnapshotBeforeUpdate()

    componentDidUpdate()

    class MyComponent extends React.Component {
      getSnapshotBeforeUpdate(prevProps, prevState) {
        // ...
      }
    }

    此生命周期方法涵盖了 的所有用例。

    componentDidUpdate()

    componentWillUpdate()

    ⬆ 返回页首

78. Hooks 会取代渲染道具和高阶组件吗？

    渲染道具和高阶组件都只渲染一个子组件，但在大多数情况下，钩子是一种更简单的方法，可以通过减少树中的嵌套来实现这一目标。

    ⬆ 返回页首

79. 建议的组件命名方式是什么？

    建议通过引用来命名组件，而不是使用 。

    displayName

    用于命名组件：

    displayName

    export default React.createClass({
      displayName: "TodoApp",
      // ...
    });

    推荐的方法：

    export default class TodoApp extends React.Component {
      // ...
    }

    也

    const TodoApp = () => {
      //...
    };
    export default TodoApp;

    ⬆ 返回页首

80. 组件类中方法的推荐顺序是什么？

    建议的方法从挂载到渲染阶段的顺序：

    1. static

       方法

    2. constructor()

    3. getChildContext()

    4. componentWillMount()

    5. componentDidMount()

    6. componentWillReceiveProps()

    7. shouldComponentUpdate()

    8. componentWillUpdate()

    9. componentDidUpdate()

    10. componentWillUnmount()

    11. 单击处理程序或事件处理程序，如 或

        onClickSubmit()

        onChangeDescription()

    12. 用于渲染的 getter 方法，如或

        getSelectReason()

        getFooterContent()

    13. 可选的渲染方法，如 或

        renderNavigation()

        renderProfilePicture()

    14. render()

    ⬆ 返回页首

81. 什么是开关元件？

    切换组件是呈现多个组件之一的组件。我们需要使用 object 将 prop 值映射到组件。

    例如，一个切换组件，用于根据 prop 显示不同的页面：

    page

    import HomePage from "./HomePage";
    import AboutPage from "./AboutPage";
    import ServicesPage from "./ServicesPage";
    import ContactPage from "./ContactPage";
    
    const PAGES = {
      home: HomePage,
      about: AboutPage,
      services: ServicesPage,
      contact: ContactPage,
    };
    
    const Page = (props) => {
      const Handler = PAGES[props.page] || ContactPage;
    
      return <Handler {...props} />;
    };
    
    // The keys of the PAGES object can be used in the prop types to catch dev-time errors.
    Page.propTypes = {
      page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
    };

    ⬆ 返回页首

82. 为什么我们需要将函数传递给 setState（）？

    这背后的原因是这是一个异步操作。出于性能原因，React 批处理状态会发生变化，因此状态可能不会在调用后立即更改。这意味着你在调用时不应依赖当前状态，因为你无法确定该状态是什么。解决方法是将一个函数传递给 ，并将上一个状态作为参数。通过这样做，可以避免由于 的异步性质而导致用户在访问时获取旧状态值的问题。

    setState()

    setState()

    setState()

    setState()

    setState()

    假设初始计数值为零。在连续三次递增操作后，该值将仅递增 1。

    // assuming this.state.count === 0
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    // this.state.count === 1, not 3

    如果我们将函数传递给 ，则计数会正确递增。

    setState()

    this.setState((prevState, props) => ({
      count: prevState.count + props.increment,
    }));
    // this.state.count === 3 as expected

    （或）

    为什么函数优先于对象？

    setState()

    React 可以将多个调用批处理到单个更新中以提高性能。由于 和 可以异步更新，因此不应依赖它们的值来计算下一个状态。

    setState()

    this.props

    this.state

    此计数器示例将无法按预期更新：

    // Wrong
    this.setState({
      counter: this.state.counter + this.props.increment,
    });

    首选方法是使用函数而不是对象进行调用。该函数将接收上一个状态作为第一个参数，并将应用更新时的 props 作为第二个参数接收。

    setState()

    // Correct
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment,
    }));

    ⬆ 返回页首

83. 什么是 React Mixins？

    Mixin 是一种将组件完全分离以具有共同功能的方法。不应使用 Mixin，可以用更高阶的组件或装饰器代替。

    最常用的 mixin 之一是 .你可能会在某些组件中使用它，以防止当 props 和 state 浅层等于之前的 props 和 state 时不必要的重新渲染：

    PureRenderMixin

    const PureRenderMixin = require("react-addons-pure-render-mixin");
    
    const Button = React.createClass({
      mixins: [PureRenderMixin],
      // ...
    });

    ⬆ 返回页首

84. 为什么是反模式，正确的解决方案是什么？

    isMounted()

    主要用例是避免在卸载组件后调用，因为它会发出警告。

    isMounted()

    setState()

    if (this.isMounted()) {
      this.setState({...})
    }

    在呼叫之前进行检查确实会消除警告，但它也违背了警告的目的。使用是一种代码气味，因为你检查的唯一原因是因为你认为在卸载组件后可能持有引用。

    isMounted()

    setState()

    isMounted()

    最佳解决方案是找到在卸载组件后可能调用的位置，并修复它们。这种情况最常见的原因是回调，当组件正在等待某些数据并在数据到达之前被卸载时。理想情况下，在卸载之前，应在 中取消任何回调。

    setState()

    componentWillUnmount()

    ⬆ 返回页首

85. React 支持哪些指针事件？

    指针事件提供了处理所有输入事件的统一方法。在过去，我们有一个鼠标和相应的事件侦听器来处理它们，但现在我们有许多与鼠标无关的设备，例如带有触摸表面或笔的手机。我们需要记住，这些事件只能在支持指针事件规范的浏览器中工作。

    React DOM 中现在提供了以下事件类型：

    1. onPointerDown

    2. onPointerMove

    3. onPointerUp

    4. onPointerCancel

    5. onGotPointerCapture

    6. onLostPointerCapture

    7. onPointerEnter

    8. onPointerLeave

    9. onPointerOver

    10. onPointerOut

    ⬆ 返回页首

86. 为什么组件名称应以大写字母开头？

    如果你使用 JSX 渲染你的组件，该组件的名称必须以大写字母开头，否则 React 会抛出一个错误作为无法识别的标签。此约定是因为只有 HTML 元素和 SVG 标签才能以小写字母开头。

    class SomeComponent extends Component {
      // Code goes here
    }

    你可以定义名称以小写字母开头的组件类，但在导入时应使用大写字母。这里小写是可以的：

    class myComponent extends Component {
      render() {
        return <div />;
      }
    }
    
    export default myComponent;

    而在另一个文件中导入时，它应该以大写字母开头：

    import MyComponent from "./myComponent";

    React 组件命名有哪些例外？

    组件名称应以大写字母开头，但此约定几乎没有例外。带有点的小写标记名称（属性访问器）仍被视为有效的组件名称。 例如，下面的标签可以编译成一个有效的组件，

         render() {
              return (
                <obj.component/> // `React.createElement(obj.component)`
              )
        }

    ⬆ 返回页首

87. React v16 是否支持自定义 DOM 属性？

    是的。过去，React 习惯于忽略未知的 DOM 属性。如果你用 React 无法识别的属性编写 JSX，React 会跳过它。

    例如，让我们看一下以下属性：

    <div mycustomattribute={"something"} />

    将使用 React v15 向 DOM 渲染一个空 div：

    <div />

    在 React v16 中，任何未知属性都将最终出现在 DOM 中：

    <div mycustomattribute="something" />

    这对于提供特定于浏览器的非标准属性、尝试新的 DOM API 以及与固执己见的第三方库集成非常有用。

    ⬆ 返回页首

88. constructor 和 getInitialState 有什么区别？

    使用 ES6 类时，应在构造函数中初始化状态，使用 .

    getInitialState()

    React.createClass()

    使用 ES6 类：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          /* initial state */
        };
      }
    }

    使用 React.createClass（）：

    const MyComponent = React.createClass({
      getInitialState() {
        return {
          /* initial state */
        };
      },
    });

    注意：在 React v16 中已弃用并删除。请改用纯 JavaScript 类。

    React.createClass()

    ⬆ 返回页首

89. 是否可以在不调用 setState 的情况下强制组件重新渲染？

    默认情况下，当组件的状态或属性发生变化时，组件将重新渲染。如果你的方法依赖于其他一些数据，你可以通过调用 来告诉 React 组件需要重新渲染。

    render()

    forceUpdate()

    component.forceUpdate(callback);

    建议避免所有使用，而只从 和 中读取。

    forceUpdate()

    this.props

    this.state

    render()

    ⬆ 返回页首

90. 使用 ES6 类的 React 和 有什么区别？

    super()

    super(props)

    当你想进入时，你应该把道具传递给方法。

    this.props

    constructor()

    super()

    使用 super（props）：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        console.log(this.props); // { name: 'John', ... }
      }
    }

    使用 super（）：

    class MyComponent extends React.Component {
      constructor(props) {
        super();
        console.log(this.props); // undefined
      }
    }

    在外部，两者将显示相同的值。

    constructor()

    this.props

    ⬆ 返回页首

91. 如何在JSX内部循环？

    你可以简单地使用 ES6 箭头函数语法。

    Array.prototype.map

    例如，对象数组映射到组件数组中：

    items

    <tbody>
      {items.map((item) => (
        <SomeComponent key={item.id} name={item.name} />
      ))}
    </tbody>

    但是你不能使用循环进行迭代：

    for

    <tbody>
      for (let i = 0; i < items.length; i++) {
        <SomeComponent key={items[i].id} name={items[i].name} />
      }
    </tbody>

    这是因为 JSX 标记被转译为函数调用，并且不能在表达式中使用语句。由于第 1 阶段提案的表达方式，这可能会改变。

    do

    ⬆ 返回页首

92. 你如何访问属性引号中的道具？

    React（或 JSX）不支持属性值内的变量插值。以下表示形式不起作用：

    <img className="image" src="images/{this.props.image}" />

    但是你可以将任何 JS 表达式放在大括号内作为整个属性值。所以下面的表达式有效：

    <img className="image" src={"images/" + this.props.image} />

    使用模板字符串也可行：

    <img className="image" src={`images/${this.props.image}`} />

    ⬆ 返回页首

93. 什么是带有形状的 React proptype 数组？

    如果要将对象数组传递给具有特定形状的组件，则用作 的参数。

    React.PropTypes.shape()

    React.PropTypes.arrayOf()

    ReactComponent.propTypes = {
      arrayWithShape: React.PropTypes.arrayOf(
        React.PropTypes.shape({
          color: React.PropTypes.string.isRequired,
          fontSize: React.PropTypes.number.isRequired,
        })
      ).isRequired,
    };

    ⬆ 返回页首

94. 如何有条件地应用类属性？

    你不应该在引号内使用大括号，因为它将被计算为字符串。

    <div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

    相反，你需要将大括号移到外面（不要忘记在类名之间包含空格）：

    <div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

    模板字符串也适用：

    <div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

    ⬆ 返回页首

95. React 和 ReactDOM 有什么区别？

    该包包含 、 、 以及与元素和组件类相关的其他帮助程序。你可以将这些视为构建组件所需的同构或通用帮助程序。该软件包包含 ，并且我们具有 和 的服务器端渲染支持。

    react

    React.createElement()

    React.Component

    React.Children

    react-dom

    ReactDOM.render()

    react-dom/server

    ReactDOMServer.renderToString()

    ReactDOMServer.renderToStaticMarkup()

    ⬆ 返回页首

96. 为什么 ReactDOM 与 React 是分开的？

    React 团队致力于将所有与 DOM 相关的功能提取到一个名为 ReactDOM 的单独库中。React v0.14 是第一个拆分库的版本。通过查看一些包，、和 ，很明显，React 的美感和本质与浏览器或 DOM 无关。

    react-native

    react-art

    react-canvas

    react-three

    为了构建更多可以渲染 React 的环境，React 团队计划将主 React 包一分为二：和 。这为编写可以在 Web 版本的 React 和 React Native 之间共享的组件铺平了道路。

    react

    react-dom

    ⬆ 返回页首

97. 如何使用React标签元素？

    如果尝试使用 standard 属性呈现绑定到文本输入的元素，则会生成缺少该属性的 HTML，并将警告打印到控制台。

    <label>

    for

    <label for={'user'}>{'User'}</label>
    <input type={'text'} id={'user'} />

    由于是 JavaScript 中的保留关键字，因此请改用。

    for

    htmlFor

    <label htmlFor={'user'}>{'User'}</label>
    <input type={'text'} id={'user'} />

    ⬆ 返回页首

98. 如何组合多个内联样式对象？

    你可以在常规 React 中使用 spread 运算符：

    <button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
      {"Submit"}
    </button>

    如果你使用的是 React Native，那么你可以使用数组表示法：

    <button style={[styles.panel.button, styles.panel.submitButton]}>
      {"Submit"}
    </button>

    ⬆ 返回页首

99. 调整浏览器大小时如何重新渲染视图？

    你可以使用钩子来管理宽度和高度状态变量，并使用钩子来添加和删除事件侦听器。传递给 useEffect 的依赖项数组可确保效果仅运行一次（在装载时），而不是在每次重新渲染时运行。

    useState

    useEffect

    resize

    []

    import React, { useState, useEffect } from "react";
    function WindowDimensions() {
      const [dimensions, setDimensions] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    
      useEffect(() => {
        function handleResize() {
          setDimensions({
            width: window.innerWidth,
            height: window.innerHeight,
          });
        }
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
      }, []);
    
      return (
        <span>
          {dimensions.width} x {dimensions.height}
        </span>
      );
    }

    使用类组件

    你可以侦听事件，然后更新维度 （ 和 ）。你应该删除 in 方法中的侦听器。

    resize

    componentDidMount()

    width

    height

    componentWillUnmount()

        class WindowDimensions extends React.Component {
          constructor(props) {
            super(props);
            this.updateDimensions = this.updateDimensions.bind(this);
          }
    
          componentWillMount() {
            this.updateDimensions();
          }
    
          componentDidMount() {
            window.addEventListener("resize", this.updateDimensions);
          }
    
          componentWillUnmount() {
            window.removeEventListener("resize", this.updateDimensions);
          }
    
          updateDimensions() {
            this.setState({
              width: window.innerWidth,
              height: window.innerHeight,
            });
          }
    
          render() {
            return (
              <span>
                {this.state.width} x {this.state.height}
              </span>
            );
          }
        }
        ```