gem-hunter

本项目的面试题来源于 sudheerj/reactjs-interview-questions 这个项目。一时兴起就动起了翻译的念头，由于本人的 React 功力尚浅，翻译的内容难免有误或不妥的地方，望请各位见谅。如果你喜欢这个项目，请 Star，更感谢你的 Pull Request。

以下是现阶段本项目的短期计划：

1. 完成前期的翻译工作
2. 为 React 16 新特性，添加在线示例或完整的示例代码

这里再次感谢 liaoyongfu 的大力支持🌹！

阅读更多关于 Angular、TypeScript、Node.js/Java 、Spring 等技术文章，欢迎访问我的个人博客或关注我的公众号 —— 全栈修仙之路

<<前端进阶篇 v1.1>> PDF 出炉了 — 「阿宝哥」，精心准备的 9 万多字 242 页的前端进阶资料。发布后 5 天内下载量为 3170。

点击此 全栈修仙之路 - 前端进阶篇 链接，即可免费下载电子书。

1. 什么是 React?

   React 是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中，之后于 2012 年被应用到 Instagram 上。

   阅读资源：

   1. React 中文文档
   2. 掘金 - 图解 React
   3. 掘金 - 200行代码实现简版react

   ⬆ 返回顶部

2. React 的主要特点是什么?

   React 的主要特性有：

   • 考虑到真实的 DOM 操作成本很高，它使用 VirtualDOM 而不是真实的 DOM。
   • 支持服务端渲染。
   • 遵循单向数据流或数据绑定。
   • 使用可复用/可组合的 UI 组件开发视图。

   ⬆ 返回顶部

3. 什么是 JSX?

   JSX 是 ECMAScript 一个类似 XML 的语法扩展。基本上，它只是为 React.createElement() 函数提供语法糖，从而让在我们在 JavaScript 中，使用类 HTML 模板的语法，进行页面描述。

   在下面的示例中，<h1> 内的文本标签会作为 JavaScript 函数返回给渲染函数。

   class App extends React.Component {
     render() {
       return(
         <div>
           <h1>{'Welcome to React world!'}</h1>
         </div>
       )
     }
   }

   以上示例 render 方法中的 JSX 将会被转换为以下内容：

   React.createElement("div", null, React.createElement(
     "h1", null, 'Welcome to React world!'));

   这里你可以访问 Babeljs 在线体验一下。

   阅读资源：

   1. 从零开始实现一个React（一）：JSX和虚拟DOM

   ⬆ 返回顶部

4. 元素和组件有什么区别?

   一个 Element 是一个简单的对象，它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。Elements 在它们的属性中可以包含其他 Elements。创建一个 React 元素是很轻量的。一旦元素被创建后，它将不会被修改。

   React Element 的对象表示如下：

   const element = React.createElement(
     'div',
     {id: 'login-btn'},
     'Login'
   )

   上面的 React.createElement() 函数会返回一个对象。

   {
     type: 'div',
     props: {
       children: 'Login',
       id: 'login-btn'
     }
   }
   

   最后使用 ReactDOM.render() 方法渲染到 DOM：

   <div id='login-btn'>Login</div>

   而一个组件可以用多种不同方式声明。它可以是一个含有 render() 方法的类。或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将 props 作为输入，并返回一个 JSX 树作为输出：

   const Button = ({ onLogin }) =>
     <div id={'login-btn'} onClick={onLogin} />

   然后 JSX 被转换成 React.createElement() 函数：

   const Button = ({ onLogin }) => React.createElement(
     'div',
     { id: 'login-btn', onClick: onLogin },
     'Login'
   )

   阅读资源：

   1. 为什么React元素有一个$$typeof属性?

   ⬆ 返回顶部

5. 如何在 React 中创建组件?

   有两种可行的方法来创建一个组件：

   1. Function Components: 这是创建组件最简单的方式。这些是纯 JavaScript 函数，接受 props 对象作为第一个参数并返回 React 元素：

      function Greeting({ message }) {
        return <h1>{`Hello, ${message}`}</h1>
      }

   2. Class Components: 你还可以使用 ES6 类来定义组件。上面的函数组件若使用 ES6 的类可改写为：

      class Greeting extends React.Component {
        render() {
          return <h1>{`Hello, ${this.props.message}`}</h1>
        }
      }

   通过以上任意方式创建的组件，可以这样使用：

     <Greeting message="semlinker"/>

   在 React 内部对函数组件和类组件的处理方式是不一样的，如：

     // 如果 Greeting 是一个函数
     const result = Greeting(props); // <p>Hello</p>
   
     // 如果 Greeting 是一个类
     const instance = new Greeting(props); // Greeting {}
     const result = instance.render(); // <p>Hello</p>

   阅读资源：

   1. React 如何区分 Class 和 Function?

   ⬆ 返回顶部

6. 何时使用类组件和函数组件?

   如果组件需要使用状态或生命周期方法，那么使用类组件，否则使用函数组件。

   ⬆ 返回顶部

7. 什么是 Pure Components?

   React.PureComponent 与 React.Component 完全相同，只是它为你处理了 shouldComponentUpdate() 方法。当属性或状态发生变化时，PureComponent 将对属性和状态进行浅比较。另一方面，一般的组件不会将当前的属性和状态与新的属性和状态进行比较。因此，在默认情况下，每当调用 shouldComponentUpdate 时，默认返回 true，所以组件都将重新渲染。

   ⬆ 返回顶部

8. React 的状态是什么?

   组件的状态是一个对象，它包含某些信息，这些信息可能在组件的生命周期中发生更改。我们应该尽量使状态尽可能简单，并尽量减少有状态组件的数量。让我们创建一个包含消息状态的 User 组件：

   class User extends React.Component {
     constructor(props) {
       super(props)
   
       this.state = {
         message: 'Welcome to React world'
       }
     }
   
     render() {
       return (
         <div>
           <h1>{this.state.message}</h1>
         </div>
       )
     }
   }

   

   状态（State）与属性（Props）类似，但它是私有的，完全由组件控制。也就是说，除了它所属的组件外，任何组件都无法访问它。

   ⬆ 返回顶部

9. React 中的 props 是什么?

   Props 是组件的输入。它们是单个值或包含一组值的对象，这些值在创建时使用类似于 HTML 标记属性的命名约定传递给组件。它们是从父组件传递到子组件的数据。

   Props 的主要目的是提供以下组件功能：

   1. 将自定义数据传递到组件。
   2. 触发状态更改。
   3. 在组件的 render() 方法中通过 this.props.reactProp 使用。

   例如，让我们使用 reactProp 属性创建一个元素：

   <Element reactProp={'1'} />

   然后，reactProp 将成为附加到 React props 对象的属性，该对象最初已存在于使用 React 库创建的所有组件上。

   props.reactProp
   

   ⬆ 返回顶部

10. 状态和属性有什么区别?

    state 和 props 都是普通的 JavaScript 对象。虽然它们都保存着影响渲染输出的信息，但它们在组件方面的功能不同。Props 以类似于函数参数的方式传递给组件，而状态则类似于在函数内声明变量并对它进行管理。

    States vs Props

    Conditions	States	Props
    可从父组件接收初始值	是	是
    可在父组件中改变其值	否	是
    在组件内设置默认值	是	是
    在组件内可改变	是	否
    可作为子组件的初始值	是	是

    ⬆ 返回顶部

11. 我们为什么不能直接更新状态?

    如果你尝试直接改变状态，那么组件将不会重新渲染。

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

    正确方法应该是使用 setState() 方法。它调度组件状态对象的更新。当状态更改时，组件通将会重新渲染。

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

    注意： 你可以在 constructor 中或使用最新的 JavaScript 类属性声明语法直接设置状态对象。

    ⬆ 返回顶部

12. 回调函数作为 setState() 参数的目的是什么?

    当 setState 完成和组件渲染后，回调函数将会被调用。由于 setState() 是异步的，回调函数用于任何后续的操作。

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

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

    阅读资源：

    1. 掘金 - 揭密React setState
    2. setState 如何知道该做什么?

    ⬆ 返回顶部

13. 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.')
    }

    ⬆ 返回顶部

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

    实现这一点有三种可能的方法：

    1. Binding in Constructor: 在 JavaScript 类中，方法默认不被绑定。这也适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。

    class Component extends React.Componenet {
      constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() {
        // ...
      }
    }

    2. Public class fields syntax: 如果你不喜欢 bind 方案，则可以使用 public class fields syntax 正确绑定回调。

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

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

    3. Arrow functions in callbacks: 你可以在回调函数中直接使用 arrow functions。

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

    注意： 如果回调函数作为属性传给子组件，那么这些组件可能触发一个额外的重新渲染。在这些情况下，考虑到性能，最好使用 .bind() 或 public class fields syntax 方案。

    ⬆ 返回顶部

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

    你可以使用箭头函数来包装事件处理器并传递参数：

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

    这相当于调用 .bind:

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

    ⬆ 返回顶部

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

    SyntheticEvent 是对浏览器原生事件的跨浏览器包装。它的 API 与浏览器的原生事件相同，包括 stopPropagation() 和 preventDefault()，除了事件在所有浏览器中的工作方式相同。

    ⬆ 返回顶部

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

    在 JS 中你可以使用 if 语句或三元表达式，来实现条件判断。除了这些方法之外，你还可以在 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>
    }

    当然如果只是想判断 if，可以如下直接判断：

    {
        isLogin && <span>Your have been login!</span>
    }
    

    在上面的代码中，不需要使用isLogin ? <span>Your have been login!</span> : null这样的形式。

    ⬆ 返回顶部

18. 什么是 "key" 属性，在元素数组中使用它们有什么好处?

    key 是一个特殊的字符串属性，你在创建元素数组时需要包含它。Keys 帮助 React 识别哪些项已更改、添加或删除。

    我们通常使用数据中的 IDs 作为 keys:

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

    在渲染列表项时，如果你没有稳定的 IDs，你可能会使用 index 作为 key：

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

    注意：

    1. 由于列表项的顺序可能发生改变，因此并不推荐使用 indexes 作为 keys。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
    2. 如果将列表项提取为单独的组件，则在列表组件上应用 keys 而不是 li 标签。
    3. 如果在列表项中没有设置 key 属性，在控制台会显示警告消息。

    ⬆ 返回顶部

19. refs 有什么用?

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

20. 如何创建 refs?

    这里有两种方案

    1. 这是最近增加的一种方案。Refs 是使用 React.createRef() 方法创建的，并通过 ref 属性添加到 React 元素上。为了在整个组件中使用refs，只需将 ref 分配给构造函数中的实例属性。

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

    2. 你也可以使用 ref 回调函数的方案，而不用考虑 React 版本。例如，访问搜索栏组件中的 input 元素如下：

    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} />
          );
       }
    }

    你也可以在使用 closures 的函数组件中使用 refs。

    注意： 你也可以使用内联引用回调，尽管这不是推荐的方法。

    ⬆ 返回顶部

21. 什么是 forward refs?

    Ref forwarding 是一个特性，它允许一些组件获取接收到 ref 对象并将它进一步传递给子组件。

    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. callback refs 和 findDOMNode() 哪一个是首选选项?

    最好是使用 callback refs 而不是 findDOMNode() API。因为 findDOMNode() 阻碍了将来对 React 的某些改进。

    使用 findDOMNode 已弃用的方案：

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

    推荐的方案是：

    class MyComponent extends Component {
      componentDidMount() {
        this.node.scrollIntoView()
      }
    
      render() {
        return <div ref={node => this.node = node} />
      }
    }

    ⬆ 返回顶部

23. 为什么 String Refs 被弃用?

    如果你以前使用过 React，你可能会熟悉旧的 API，其中的 ref 属性是字符串，如 ref={'textInput'}，并且 DOM 节点的访问方式为this.refs.textInput。我们建议不要这样做，因为字符串引用有以下问题，并且被认为是遗留问题。字符串 refs 在 React v16 版本中被移除。

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

    2. 它们是不可组合的 - 如果一个库把一个 ref 传给子元素，则用户无法对其设置另一个引用。

    3. 它们不能与静态分析工具一起使用，如 Flow。Flow 无法猜测出 this.refs 上的字符串引用的作用及其类型。Callback refs 对静态分析更友好。

    4. 使用 "render callback" 模式（比如： ），它无法像大多数人预期的那样工作。

       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. 什么是 Virtual DOM?

    Virtual DOM (VDOM) 是 Real DOM 的内存表示形式。UI 的展示形式被保存在内存中并与真实的 DOM 同步。这是在调用的渲染函数和在屏幕上显示元素之间发生的一个步骤。整个过程被称为 reconciliation。

    Real DOM vs Virtual DOM

    Real DOM	Virtual DOM
    更新较慢	更新较快
    可以直接更新 HTML	无法直接更新 HTML
    如果元素更新，则创建新的 DOM	如果元素更新，则更新 JSX
    DOM 操作非常昂贵	DOM 操作非常简单
    较多的内存浪费	没有内存浪费

    阅读资源：

    1. 知乎 - 如何理解虚拟DOM?
    2. edureka - react-interview-questions

    ⬆ 返回顶部

25. Virtual DOM 如何工作?

    Virtual DOM 分为三个简单的步骤。

    1. 每当任何底层数据发生更改时，整个 UI 都将以 Virtual DOM 的形式重新渲染。

    2. 然后计算先前 Virtual DOM 对象和新的 Virtual DOM 对象之间的差异。

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

    ⬆ 返回顶部

26. Shadow DOM 和 Virtual DOM 之间有什么区别?

    Shadow DOM 是一种浏览器技术，它解决了构建网络应用的脆弱性问题。Shadow DOM 修复了 CSS 和 DOM。它在网络平台中引入作用域样式。 无需工具或命名约定，你即可使用原生 JavaScript 捆绑 CSS 和标记、隐藏实现详情以及编写独立的组件。Virtual DOM 是一个由 JavaScript 库在浏览器 API 之上实现的概念。

    ⬆ 返回顶部

27. 什么是 React Fiber?

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

    ⬆ 返回顶部

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

    React Fiber 的目标是提高其在动画、布局和手势等领域的适用性。它的主要特性是 incremental rendering: 将渲染任务拆分为小的任务块并将任务分配到多个帧上的能力。

    ⬆ 返回顶部

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>
        );
      }
    }

    在大多数情况下，建议使用受控组件来实现表单。

    ⬆ 返回顶部

31. createElement 和 cloneElement 有什么区别?

    JSX 元素将被转换为 React.createElement() 函数来创建 React 元素，这些对象将用于表示 UI 对象。而 cloneElement 用于克隆元素并传递新的属性。

    ⬆ 返回顶部

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

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

    ⬆ 返回顶部

33. 组件生命周期的不同阶段是什么?

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

    1. Mounting: 组件已准备好挂载到浏览器的 DOM 中. 此阶段包含来自 constructor(), getDerivedStateFromProps(), render(), 和 componentDidMount() 生命周期方法中的初始化过程。

    2. Updating: 在此阶段，组件以两种方式更新，发送新的属性并使用 setState() 或 forceUpdate() 方法更新状态. 此阶段包含 getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() 和 componentDidUpdate() 生命周期方法。

    3. Unmounting: 在这个最后阶段，不需要组件，它将从浏览器 DOM 中卸载。这个阶段包含 componentWillUnmount() 生命周期方法。

    值得一提的是，在将更改应用到 DOM 时，React 内部也有阶段概念。它们按如下方式分隔开：

    1. Render 组件将会进行无副作用渲染。这适用于纯组件（Pure Component），在此阶段，React 可以暂停，中止或重新渲染。

    2. Pre-commit 在组件实际将更改应用于 DOM 之前，有一个时刻允许 React 通过getSnapshotBeforeUpdate()捕获一些 DOM 信息（例如滚动位置）。

    3. Commit React 操作 DOM 并分别执行最后的生命周期： componentDidMount() 在 DOM 渲染完成后调用, componentDidUpdate() 在组件更新时调用, componentWillUnmount() 在组件卸载时调用。 React 16.3+ 阶段 (也可以看交互式版本)

    

    React 16.3 之前

    

    ⬆ 返回顶部

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

    React 16.3+

    • getDerivedStateFromProps: 在调用render()之前调用，并在 每次 渲染时调用。 需要使用派生状态的情况是很罕见得。值得阅读 如果你需要派生状态.
    • componentDidMount: 首次渲染后调用，所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。
    • shouldComponentUpdate: 确定组件是否应该更新。 默认情况下，它返回true。 如果你确定在更新状态或属性后不需要渲染组件，则可以返回false值。 它是一个提高性能的好地方，因为它允许你在组件接收新属性时阻止重新渲染。
    • getSnapshotBeforeUpdate: 在最新的渲染输出提交给 DOM 前将会立即调用，这对于从 DOM 捕获信息（比如：滚动位置）很有用。
    • componentDidUpdate: 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果shouldComponentUpdate()返回false，则不会触发。
    • componentWillUnmount 当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

    Before 16.3

    • componentWillMount: 在组件render()前执行，用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。
    • componentDidMount: 首次渲染后调用，所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。
    • componentWillReceiveProps: 在组件接收到新属性前调用，若你需要更新状态响应属性改变（例如，重置它），你可能需对比this.props和nextProps并在该方法中使用this.setState()处理状态改变。
    • shouldComponentUpdate: 确定组件是否应该更新。 默认情况下，它返回true。 如果你确定在更新状态或属性后不需要渲染组件，则可以返回false值。 它是一个提高性能的好地方，因为它允许你在组件接收新属性时阻止重新渲染。
    • componentWillUpdate: 当shouldComponentUpdate返回true后重新渲染组件之前执行，注意你不能在这调用this.setState()
    • componentDidUpdate: 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果shouldComponentUpdate()返回false，则不会触发。
    • componentWillUnmount: 当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

    ⬆ 返回顶部

35. 什么是高阶组件（HOC）?

    高阶组件(HOC) 就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种模式，这种模式是由react自身的组合性质必然产生的。

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

    const EnhancedComponent = higherOrderComponent(WrappedComponent)

    HOC 有很多用例：

    1. 代码复用，逻辑抽象化
    2. 渲染劫持
    3. 抽象化和操作状态（state）
    4. 操作属性（props）

    译注：更详细用法请参考高阶组件的使用

    ⬆ 返回顶部

36. 如何为高阶组件创建属性代理?

    你可以使用属性代理模式向输入组件增加或编辑属性（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. 什么是上下文（Context）?

    Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递props。比如，需要在应用中许多组件需要访问登录用户信息、地区偏好、UI主题等。

    // 创建一个 theme Context,  默认 theme 的值为 light
    const ThemeContext = React.createContext('light');
    
    function ThemedButton(props) {
      // ThemedButton 组件从 context 接收 theme
      return (
        <ThemeContext.Consumer>
          {theme => <Button {...props} theme={theme} />}
        </ThemeContext.Consumer>
      );
    }
    
    // 中间组件
    function Toolbar(props) {
      return (
        <div>
          <ThemedButton />
        </div>
      );
    }
    
    class App extends React.Component {
      render() {
        return (
          <ThemeContext.Provider value="dark">
            <Toolbar />
          </ThemeContext.Provider>
        );
      }
    }

    ⬆ 返回顶部

38. children 属性是什么?

    Children 是一个属性（this.props.chldren），它允许你将组件作为数据传递给其他组件，就像你使用的任何其他组件一样。在组件的开始和结束标记之间放置的组件树将作为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>
      {/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠（//）表示） */}
      {`Welcome ${user}, let's play React`}
    </div>

    多行注释：

    <div>
      {/* 多行注释超过
       一行 */}
      {`Welcome ${user}, let's play React`}
    </div>

    ⬆ 返回顶部

40. 构造函数使用带 props 参数的目的是什么?

    在调用super()方法之前，子类构造函数不能使用this引用。这同样适用于ES6子类。将props参数传递给super()的主要原因是为了在子构造函数中访问this.props。

    带 props 参数:

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

    不带 props 参数:

    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或state发生更改时，React 通过将新返回的元素与先前呈现的元素进行比较来确定是否需要实际的 DOM 更新。当它们不相等时，React 将更新 DOM 。此过程称为reconciliation。

    ⬆ 返回顶部

42. 如何使用动态属性名设置 state ?

    如果你使用 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. 为什么有组件名称要首字母大写?

    这是必要的，因为组件不是 DOM 元素，它们是构造函数。 此外，在 JSX 中，小写标记名称是指 HTML 元素，而不是组件。

    ⬆ 返回顶部

45. 为什么 React 使用 className 而不是 class 属性?

    class 是 JavaScript 中的关键字，而 JSX 是 JavaScript 的扩展。这就是为什么 React 使用 className 而不是 class 的主要原因。传递一个字符串作为 className 属性。

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

    在实际项目中，我们经常使用classnames来方便我们操作className。

    ⬆ 返回顶部

46. 什么是 Fragments ?

    它是 React 中的常见模式，用于组件返回多个元素。Fragments 可以让你聚合一个子元素列表，而无需向 DOM 添加额外节点。

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

    以下是简洁语法，但是在一些工具中还不支持：

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

    译注：React 16 以前，render 函数的返回必须有一个根节点，否则报错。

    ⬆ 返回顶部

47. 为什么使用 Fragments 比使用容器 div 更好?

    1. 通过不创建额外的 DOM 节点，Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。
    2. 一些 CSS 机制如Flexbox和CSS Grid具有特殊的父子关系，如果在中间添加 div 将使得很难保持所需的结构。
    3. 在 DOM 审查器中不会那么的杂乱。

    ⬆ 返回顶部

48. 在 React 中什么是 Portal ?

    Portal 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

    ReactDOM.createPortal(child, container)

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

    ⬆ 返回顶部

49. 什么是无状态组件?

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

    ⬆ 返回顶部

50. 什么是有状态组件?

    如果组件的行为依赖于组件的state，那么它可以被称为有状态组件。这些有状态组件总是类组件，并且具有在constructor中初始化的状态。

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

    ⬆ 返回顶部

51. 在 React 中如何校验 props 属性?

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

    预定义的 prop 类型：

    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

    我们可以为 User 组件定义 propTypes，如下所示：

    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 中，PropTypes 从 React.PropTypes 被移动到 prop-types 库中。

    ⬆ 返回顶部

52. React 的优点是什么?

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

    ⬆ 返回顶部

53. 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 a