⬆ 返回页首

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

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

    //Wrong
    this.state.message = 'Hello world'

    而是使用方法。它计划对组件的状态对象的更新。当状态更改时，组件会通过重新呈现来响应。

    setState()

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

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

⬆ 返回页首

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

    setState()

    回调函数在 setState 完成并呈现组件时调用。由于是异步的，因此回调函数用于任何发布操作。

    setState()

    注意：建议使用生命周期方法，而不是此回调函数。

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

⬆ 返回页首

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

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

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

       <button onclick='activateLasers()'>

       而在 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 中，你需要通过附加 T的方式来调用函数，而在 react 中，你不应该附加函数名称。（例如，请参阅第一点中的“激活激光”功能）

       ()

       ()

⬆ 返回页首

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

    有 3 种可能的方法可以实现此目的：

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

       class Foo extends Component {
         constructor(props) {
           super(props);
           this.handleClick = this.handleClick.bind(this);
         }
         handleClick() {
           console.log('Click happened');
         }
         render() {
           return <button onClick={this.handleClick}>Click Me</button>;
         }
       }

    2. 公共类字段语法：如果你不喜欢使用绑定方法，则可以使用公共类字段语法来正确绑定回调。

       handleClick = () => {
         console.log('this is:', this)
       }

       <button onClick={this.handleClick}>
         {'Click me'}
       </button>

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

       handleClick() {
           console.log('Click happened');
       }
       render() {
           return <button onClick={() => this.handleClick()}>Click Me</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()

⬆ 返回页首

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

    你可以使用 if 语句或 JS 中可用的三元表达式来有条件地呈现表达式。除了这些方法之外，你还可以在 JSX 中嵌入任何表达式，方法是将它们括在大括号中，然后是 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 是创建元素数组时应包含的特殊字符串属性。键道具帮助 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

⬆ 返回页首

19. 引用有什么用？

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

⬆ 返回页首

20. 如何创建引用？

    有两种方法

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

       React.createRef()

       ref

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

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

       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。注意：你也可以使用内联引用回调，即使这不是推荐的方法。

⬆ 返回页首

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. 为什么字符串引用是遗留的？

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

    ref

    ref={'textInput'}

    this.refs.textInput

    1. 它们迫使 React 跟踪当前正在执行的组件。这是有问题的，因为它使 React 模块有状态，因此当 React 模块在捆绑包中复制时会导致奇怪的错误。
    2. 它们是不可组合的——如果一个库在传递的子子项上放了一个引用，用户就不能在上面放另一个引用。回调引用是完全可组合的。
    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 是由 JavaScript 中的库在浏览器 API 之上实现的概念。

⬆ 返回页首

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。

    在下面的用户配置文件组件中，使用 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 元素将被转译为函数以创建将用于 UI 对象表示的 React 元素。而 用于克隆元素并向其传递新道具。

    React.createElement()

    cloneElement

⬆ 返回页首

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

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

⬆ 返回页首

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

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

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

       constructor()

       getDerivedStateFromProps()

       render()

       componentDidMount()

    2. 更新：在此阶段，组件以两种方式更新，发送新 props 并从 或 更新状态。此阶段涵盖 、 和生命周期方法。

       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+ Phases（或交互式版本)

    

    在 React 16.3 之前

    

⬆ 返回页首

34. React 的生命周期方法是什么？

    在 React 16.3 之前

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

      true

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

      shouldComponentUpdate()

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

    React 16.3+

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

      render()

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

      true

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

      componentDidUpdate()

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

      shouldComponentUpdate()

      false

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

⬆ 返回页首

35. 什么是高阶组件？

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

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

    const EnhancedComponent = higherOrderComponent(WrappedComponent)

    HOC 可用于许多用例：

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

⬆ 返回页首

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

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

    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. 什么是上下文？

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

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

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

⬆ 返回页首

38. 什么是儿童道具？

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

    this.props.children

    children

    React API 中有几种方法可以使用这个 prop。其中包括 、 、 、 。

    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. 使用带有道具参数的超级构造函数的目的是什么？

    在调用该方法之前，子类构造函数无法使用引用。这同样适用于 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. 什么是和解？

    当组件的 props 或状态发生变化时，React 通过将新返回的元素与之前渲染的元素进行比较来决定是否需要实际的 DOM 更新。当它们不相等时，React 将更新 DOM。此过程称为协调。

⬆ 返回页首

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 属性？

    className

    class

    class

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

    className

    class

    className

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

⬆ 返回页首

46. 什么是片段？

    这是 React 中的一种常见模式，用于组件返回多个元素。片段允许你对子节点列表进行分组，而无需向 DOM 添加额外的节点。

    render() {
      return (
        <React.Fragment>
          <ChildA />
          <ChildB />
          <ChildC />
        </React.Fragment>
      )
    }

    还有一个较短的语法，但许多工具不支持它：

    render() {
      return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
      )
    }

⬆ 返回页首

47. 为什么片段比容器 div 更好？

    以下是原因列表，

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

⬆ 返回页首

48. 什么是 React 中的门户？

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

    ReactDOM.createPortal(child, container)

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

⬆ 返回页首

49. 什么是无状态组件？

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

    this

⬆ 返回页首

50. 什么是有状态组件？

    如果组件的行为依赖于组件的状态，则可以将其称为有状态组件。这些有状态组件始终是类组件，并且具有在 中初始化的状态。

    constructor

    class App extends Component {
      constructor(props) {
        super(props)
        this.state = { count: 0 }
      }
    
      render() {
        // ...
      }
    }

    React 16.8 更新：

    钩子允许你使用状态和其他 React 功能，而无需编写类。

    等效功能组件

     import React, {useState} from 'react';
    
     const App = (props) => {
       const [count, setCount] = useState(0);
    
       return (
         // JSX
       )
     }

⬆ 返回页首

51. 如何在 React 中对道具应用验证？

    当应用程序在开发模式下运行时，React 会自动检查我们在组件上设置的所有 props，以确保它们具有正确的类型。如果类型不正确，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. 静态类型检查的推荐方法有哪些？

    通常我们使用 PropType 库（自 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 中使用样式？

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

    style

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

    样式键是驼峰化的，以便与访问 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>
      }
    }

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

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

⬆ 返回页首

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

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

    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 元素上传播道具时需要小心？

    当我们传播道具时，我们会遇到添加未知HTML属性的风险，这是一种不好的做法。相反，我们可以将 prop 解构与运算符一起使用，因此它将只添加所需的 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的功能，但目前是第二阶段的提案。

⬆ 返回页首

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 创建待办事项应用程序：

    # 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()

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

    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 中的严格模式？

    React.StrictMode

    是突出显示应用程序中潜在问题的有用组件。就像 一样，不渲染任何额外的 DOM 元素。它会为其后代激活其他检查和警告。这些检查仅适用于开发模式。

    <Fragment>

    <StrictMode>

    import React from 'react'
    
    function ExampleApplication() {
      return (
        <div>
          <Header />
          <React.StrictMode>
            <div>
              <ComponentOne />
              <ComponentTwo />
            </div>
          </React.StrictMode>
          <Header />
        </div>
      )
    }

    在上面的示例中，严格模式检查仅适用于 和 组件。

    <ComponentOne>

    <ComponentTwo>

⬆ 返回页首

84. 什么是 React Mixins？

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

    最常用的混合之一是。你可能会在某些组件中使用它，以防止当 props 和状态与以前的 props 和状态浅相等时进行不必要的重新渲染：

    PureRenderMixin

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

⬆ 返回页首

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

    isMounted()

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

    isMounted()

    setState()

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

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

    isMounted()

    setState()

    isMounted()

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

    setState()

    componentWillUnmount()

⬆ 返回页首

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

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

    以下事件类型现在在 React DOM 中可用：

    1. onPointerDown

    2. onPointerMove

    3. onPointerUp

    4. onPointerCancel

    5. onGotPointerCapture

    6. onLostPointerCapture

    7. onPointerEnter

    8. onPointerLeave

    9. onPointerOver

    10. onPointerOut

⬆ 返回页首

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

    如果你使用 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)`
              )
        }

⬆ 返回页首

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

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

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

    <div mycustomattribute={'something'} />

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

    <div />

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

    <div mycustomattribute='something' />

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

⬆ 返回页首

89. 构造函数和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()