React ​

React ​

1. React Class 组件有哪些周期函数？分别有什么作用？
2. React Class 组件中请求可以在 componentWillMount 中发起吗？为什么？
3. React Class 组件和 React Hook 的区别有哪些？
4. React 中高阶函数和自定义 Hook 的优缺点？
5. 简要说明 React Hook 中 useState 和 useEffect 的运行原理？
6. useReducers 与 redux 是什么关系？
7. React 如何发现重渲染、什么原因容易造成重渲染、如何避免重渲染？
8. React Hook 中 useEffect 有哪些参数，如何检测数组依赖项的变化？
9. React 的 useEffect 是如何监听数组依赖项的变化的？
10. React Hook 和闭包有什么关联关系？
11. React 中 useState 是如何做数据初始化的？
12. 列举你常用的 React 性能优化技巧？
13. React 有什么特点？
14. 列出 React 的一些主要优点。
15. React 有哪些限制？
16. 什么是 JSX？
17. 你了解 Virtual DOM 吗？解释一下它的工作原理。
18. 与 ES5 相比，React 的 ES6 语法有何不同？
19. 解释 React 中 render() 的目的。
20. React 中的状态是什么？它是如何使用的？
21. 如何更新组件的状态？
22. 如何模块化 React 中的代码？
23. React 中的事件是什么？
24. 如何在 React 中创建一个事件？
25. 你对 React 的 refs 有什么了解？
26. 列出一些应该使用 Refs 的情况。
27. 如何在 React 中创建表单
28. 什么是高阶组件（HOC）？
29. MVC 框架的主要问题是什么？
30. Redux 与 Flux 有何不同？
31. 数据如何通过 Redux 流动？
32. 什么是 React 路由？
33. 为什么 React Router v4 中使用 switch 关键字 ？
34. React 的实现原理
35. 说一下 React 生命周期？
36. React 16, 17, 18 的变化
37. React Class 组件有哪些周期函数？分别有什么作用？
38. React Class 组件中请求可以在 componentWillMount 中发起吗？为什么
39. React Class 组件和 React Hook 的区别有哪些
40. React 中高阶函数和自定义 Hook 的优缺点
41. 简要说明 React Hook 中 useState 和 useEffect 的运行原理
42. React 如何发现重渲染、什么原因容易造成重渲染、如何避免重渲染
43. React Hook 中 useEffect 有哪些参数，如何检测数组依赖项的变化
44. React 的 useEffect 是如何监听数组依赖项的变化的
45. React Hook 和闭包有什么关联关系
46. React 中 useState 是如何做数据初始化的
47. 列举你常用的 React 性能优化技巧
48. React 代码层的优化可以说一下吗？
49. 说一下 useMemo 和 useCallback 有什么区别？
50. 说一下 useEffect 和 useLayoutEffect 有什么区别？
51. useEffect 对应在 class 中的生命周期怎么写？
52. 如果在 if 里面写 useEffect 会有什么表现？
53. 说一下 React 的 Fiber 架构是什么？
54. 什么是 fiber，fiber 解决了什么问题
55. Fiber 的可中断、可恢复怎么实现的
56. Fiber 更新机制
57. 双缓冲模式
58. React 渲染流程
59. 写 React/Vue 项目时，为什么要在列表组件中写 key，其作用是什么？
60. React 中 setState 是同步的还是异步的？为什么
61. setState 实现原理
62. Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法
63. react-router 里面的 <Link> 标签和 <a> 标签有什么区别？如何禁用掉 <a> 标签默认事件，禁用掉之后如何实现跳转？
64. React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n), 那么 O(n^3) 和 O(n) 是如何计算出来的？
65. 为什么在文件中没有使用 react，也要在文件顶部 import React from 'react'？
66. 为什么 React 自定义组件首字母要大写？
67. React 组件为什么不能返回多个元素？
68. React 中元素和组件的区别
69. React 事件机制，什么是合成事件
70. DOM 事件流是怎么工作的，一个页面往往会绑定多个事件，页面接收事件的顺序叫事件流
71. HOC 和 hooks 的区别
72. React 性能优化手段
73. react 组件通信方式有哪些
74. React hooks 解决了什么问题，有什么优缺点
75. 函数组件与类组件的区别
76. 在 React 中如何识别一个表单项里的表单做到了最小粒度/代价的渲染？
77. 在 React 的开发的过程中你能想到哪些控制渲染成本的方法？
78. React diff 算法
79. React 中的时间切片
80. React Hooks 及应用场景
81. React Hooks 原理
82. HOC 高阶组件原理及使用场景

react 相关问题 ​

setState 是异步还是同步？ ​

• 合成事件中是异步
• 钩子函数中的是异步
• 原生事件中是同步
• setTimeout 中是同步

在 React 中，如果是由 React 引发的事件处理（比如通过 onClick 引发的事件处理），调用 setState 不会同步更新 this.state，除此之外的 setState 调用会同步执行 this.state。所谓“除此之外”，指的是绕过 React 通过 addEventListener 直接添加的事件处理函数，还有通过 setTimeout/setInterval 产生的异步调用。

原因： 在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说，而 isBatchingUpdates 默认是 false，也就表示 setState 会同步更新 this.state，但是，有一个函数 batchedUpdates，这个函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates，造成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

注意： setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。

详细请看 深入 setState 机制

聊聊 react 的生命周期 ​

版本有差异，差异是什么？

useEffect(fn, []) 和 componentDidMount 有什么差异？ ​

useEffect 会捕获 props 和 state。所以即便在回调函数里，你拿到的还是初始的 props 和 state。

如果想得到“最新”的值，可以使用 ref。

hooks 为什么不能放在条件判断里？ ​

以 setState 为例，在 react 内部，每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中

update 阶段，每次调用 setState，链表就会执行 next 向后移动一步。如果将 setState 写在条件判断中，假设条件判断不成立，没有执行里面的 setState 方法，会导致接下来所有的 setState 的取值出现偏移，从而导致异常发生。

聊一聊 diff 算法 ​

传统 diff 算法的时间复杂度是 O(n^3)，这在前端 render 中是不可接受的。为了降低时间复杂度，react 的 diff 算法做了一些妥协，放弃了最优解，最终将时间复杂度降低到了 O(n)。

那么 react diff 算法做了哪些妥协呢？，参考如下：

1. tree diff：只对比同一层的 dom 节点，忽略 dom 节点的跨层级移动
2. component diff：如果不是同一类型的组件，会删除旧的组件，创建新的组件
3. element diff：对于同一层级的一组子节点，需要通过唯一 id 进行来区分

调用 setState 之后发生了什么？ ​

1. 在 setState 的时候，React 会为当前节点创建一个 updateQueue 的更新列队。
2. 然后会触发 reconciliation 过程，在这个过程中，会使用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是可以做到异步可中断的执行。
3. 然后 React Scheduler 会根据优先级高低，先执行优先级高的节点，具体是执行 doWork 方法。
4. 在 doWork 方法中，React 会执行一遍 updateQueue 中的方法，以获得新的节点。然后对比新旧节点，为老节点打上 更新、插入、替换 等 Tag。
5. 当前节点 doWork 完成后，会执行 performUnitOfWork 方法获得新节点，然后再重复上面的过程。
6. 当所有节点都 doWork 完成后，会触发 commitRoot 方法，React 进入 commit 阶段。
7. 在 commit 阶段中，React 会根据前面为各个节点打的 Tag，一次性更新整个 dom 元素。

为什么虚拟 dom 会提高性能? ​

虚拟 dom 相当于在 JS 和真实 dom 中间加了一个缓存，利用 diff 算法避免了没有必要的 dom 操作，从而提高性能。

错误边界是什么？它有什么用？ ​

在 React 中，如果任何一个组件发生错误，它将破坏整个组件树，导致整页白屏。这时候我们可以用错误边界优雅地降级处理这些错误。

什么是 Portals？ ​

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)

React 组件间有那些通信方式? ​

1. 父组件向子组件通信
   1. 通过 props 传递
2. 子组件向父组件通信
   1. 主动调用通过 props 传过来的方法，并将想要传递的信息，作为参数，传递到父组件的作用域中
3. 跨层级通信
   1. 使用 react 自带的 Context 进行通信，createContext 创建上下文，useContext 使用上下文。
   2. 使用 Redux 或者 Mobx 等状态管理库
   3. 使用订阅发布模式

React 父组件如何调用子组件中的方法？ ​

• 如果是在方法组件中调用子组件（>= react@16.8），可以使用 useRef 和 useImperativeHandle:
• 如果是在类组件中调用子组件（>= react@16.4），可以使用 createRef:

React 有哪些优化性能的手段? ​

1. 类组件中的优化手段
   1. 使用纯组件 PureComponent 作为基类。
   2. 使用 React.memo 高阶函数包装组件。
   3. 使用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑。
2. 函数组件中的优化手段
   1. 使用 useMemo。
   2. 使用 useCallBack。
3. 其他方式
   1. 在列表需要频繁变动时，使用唯一 id 作为 key，而不是数组下标。
   2. 必要时通过改变 CSS 样式隐藏显示组件，而不是通过条件判断显示隐藏组件。
   3. 使用 Suspense 和 lazy 进行懒加载

为什么 React 元素有一个 $$typeof 属性？ ​

目的是为了防止 XSS 攻击。因为 Synbol 无法被序列化，所以 React 可以通过有没有 $$typeof 属性来断出当前的 element 对象是从数据库来的还是自己生成的。

如果没有 $$typeof 这个属性，react 会拒绝处理该元素。

React 如何区分 Class 组件 和 Function 组件？ ​

React 区分 Class 组件 和 Function 组件的方式很巧妙，由于所有的类组件都要继承 React.Component，所以只要判断原型链上是否有 React.Component 就可以了

HTML 和 React 事件处理有什么区别? ​

• 在 HTML 中事件名必须小写，而在 React 中需要遵循驼峰写法
• 在 HTML 中可以返回 false 以阻止默认的行为，而在 React 中必须地明确地调用 preventDefault()

什么是 suspense 组件? ​

• Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。
• Suspense 也可以用于懒加载

为什么 JSX 中的组件名要以大写字母开头？ ​

因为 React 要知道当前渲染的是组件还是 HTML 元素。

redux 是什么？ ​

Redux 是一个为 JavaScript 应用设计的，可预测的状态容器。

它解决了如下问题：

• 跨层级组件之间的数据传递变得很容易
• 所有对状态的改变都需要 dispatch，使得整个数据的改变可追踪，方便排查问题。

但是它也有缺点：

• 概念偏多，理解起来不容易
• 样板代码太多

react-redux 的实现原理？ ​

通过 redux 和 react context 配合使用，并借助高阶函数，实现了 react-redux。

redux 异步中间件有什么什么作用? ​

抽取逻辑以复用

redux 有哪些异步中间件？ ​

1. redux-thunk 源代码简短优雅，上手简单
2. redux-saga 借助 JS 的 generator 来处理异步，避免了回调的问题
3. redux-observable 借助了 RxJS 流的思想以及其各种强大的操作符，来处理异步问题

redux ​

1. redux 工作原理

2. redux 中的 reducer 为什么必须(最好)是纯函数？

3. 前端路由解决了什么问题

4. react-router-dom 有哪些组件

5. 什么是 React? ​

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

   阅读资源：

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

6. React 的主要特点是什么? ​

   React 的主要特性有：

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

7. 什么是 JSX? ​

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

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

   jsx

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

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

   jsx

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

   1
   2
   3
   4
   5
   

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

   阅读资源：

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

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

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

   React Element 的对象表示如下：

   jsx

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

   1
   

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

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

   1
   2
   3
   4
   5
   6
   7
   

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

   html

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

   1
   

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

   jsx

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

   1
   

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

   jsx

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

   1
   2
   

   阅读资源：

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

9. 如何在 React 中创建组件? ​

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

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

      jsx

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

      1
      2
      3
      

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

      jsx

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

      1
      2
      3
      4
      5
      

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

   jsx

   <Greeting message="semlinker" />

   1
   

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

   jsx

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

   1
   2
   3
   4
   5
   6
   

   阅读资源：

   1. React 如何区分 Class 和 Function?

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

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

11. 什么是 Pure Components? ​

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

12. React 的状态是什么? ​

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    

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

13. React 中的 props 是什么? ​

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

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

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

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

    jsx

    <Element reactProp={'1'} />

    1
    

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

    props.reactProp

    1
    

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

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

    States vs Props

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

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

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

    jsx

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

    1
    2
    

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

    jsx

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

    1
    2
    

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

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

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

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

    jsx

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

    1
    2
    3
    

    阅读资源：

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

17. HTML 和 React 事件处理有什么区别? ​

    1. 在 HTML 中事件名必须小写：
    html

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

    1
    

    而在 React 中它遵循 camelCase (驼峰) 惯例：

    jsx

    <button onClick={activateLasers}>

    1
    
    2. 在 HTML 中你可以返回 false 以阻止默认的行为：
    html

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

    1
    

    而在 React 中你必须地明确地调用 preventDefault() ：

    jsx

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

    1
    2
    3
    4
    

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    2. Public class fields syntax: 如果你不喜欢 bind 方案，则可以使用 public class fields syntax 正确绑定回调。
    jsx

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

    1
    2
    3
    
    jsx

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

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

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

    1
    

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

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

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

    jsx

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

    1
    

    这相当于调用 .bind:

    jsx

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

    1
    

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

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

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

    在 JS 中你可以使用 if 语句或三元表达式，来实现条件判断。除了这些方法之外，你还可以在 JSX 中嵌入任何表达式，方法是将它们用大括号括起来，然后再加上 JS 逻辑运算符 &&。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    

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

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

    1
    2
    3
    

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

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

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

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

    jsx

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

    1
    

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

    jsx

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

    1
    2
    3
    

    注意：

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

23. refs 有什么用? ​

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

24. 如何创建 refs? ​

    这里有两种方案

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    

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

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

25. 什么是 forward refs? ​

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

    jsx

    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>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    

26. callback refs 和 findDOMNode() 哪一个是首选选项? ​

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

    使用 findDOMNode 已弃用的方案：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    

    推荐的方案是：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    

27. 为什么 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" 模式（比如： <DataGrid renderRow={this.renderRow} />），它无法像大多数人预期的那样工作。

       jsx

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

       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       

28. 什么是 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

29. Virtual DOM 如何工作? ​

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

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

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

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

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

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

31. 什么是 React Fiber? ​

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

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

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

33. 什么是受控组件? ​

    在随后的用户输入中，能够控制表单中输入元素的组件被称为受控组件，即每个状态更改都有一个相关联的处理程序。

    例如，我们使用下面的 handleChange 函数将输入框的值转换成大写：

    jsx

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

    1
    2
    3
    

34. 什么是非受控组件? ​

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

    在下面的 UserProfile 组件中，我们通过 ref 引用 name 输入框：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    

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

35. createElement 和 cloneElement 有什么区别? ​

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

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

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

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

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

    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 之前

38. 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 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

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

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

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

    jsx

    const EnhancedComponent = higherOrderComponent(WrappedComponent)

    1
    

    HOC 有很多用例：

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

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

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

    你可以使用属性代理模式向输入组件增加或编辑属性（props）：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    

41. 什么是上下文（Context）? ​

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

    jsx

    // 创建一个 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>
        )
      }
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    

42. children 属性是什么? ​

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

    React API 中有许多方法中提供了这个不透明数据结构的方法，包括：React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    

43. 怎样在 React 中写注释? ​

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

    单行注释：

    jsx

    <div>
      {/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠（//）表示） */}
      {`Welcome ${user}, let's play React`}
    </div>

    1
    2
    3
    4
    

    多行注释：

    jsx

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

    1
    2
    3
    4
    5
    

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

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

    带 props 参数:

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    

    不带 props 参数:

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    

    上面的代码片段显示this.props仅在构造函数中有所不同。 它在构造函数之外是相同的。

45. 什么是调解? ​

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

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

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

    jsx

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

    1
    2
    3
    

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

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

    jsx

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

    1
    2
    3
    4
    

    相反地，传递函数本身应该没有括号：

    jsx

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

    1
    2
    3
    4
    

48. 为什么有组件名称要首字母大写? ​

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

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

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

    jsx

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

    1
    2
    3
    

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

50. 什么是 Fragments ? ​

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    

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

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

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

52. 在 React 中什么是 Portal ? ​

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

    jsx

    ReactDOM.createPortal(child, container)

    1
    

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

53. 什么是无状态组件? ​

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

54. 什么是有状态组件? ​

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    

55. 在 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，如下所示：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    

    注意: 在 React v15.5 中，PropTypes 从 React.PropTypes 被移动到 prop-types 库中。

56. React 的优点是什么? ​

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

57. React 的局限性是什么? ​

    1. React 只是一个视图库，而不是一个完整的框架。
    2. 对于 Web 开发初学者来说，有一个学习曲线。
    3. 将 React 集成到传统的 MVC 框架中需要一些额外的配置。
    4. 代码复杂性随着内联模板和 JSX 的增加而增加。
    5. 如果有太多的小组件可能增加项目的庞大和复杂。

58. 在 React v16 中的错误边界是什么? ​

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

    如果一个类组件定义了一个名为 componentDidCatch(error, info) 或 static getDerivedStateFromError() 新的生命周期方法，则该类组件将成为错误边界：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    

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

    jsx

    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>

    1
    2
    3
    

59. 在 React v15 中如何处理错误边界? ​

    React v15 使用 unstable_handleError 方法为错误边界提供了非常基础的支持。已在 React v16 中，将其重命名为componentDidCatch。

60. 静态类型检查推荐的方法是什么? ​

    通常，我们使用 PropTypes 库（在 React v15.5 之后 React.PropTypes 被移动到了 prop-types 包中），在 React 应用程序中执行类型检查。对于大型项目，建议使用静态类型检查器，比如 Flow 或 TypeScript，它们在编译时执行类型检查并提供 auto-completion 功能。

61. react-dom 包的用途是什么? ​

    react-dom 包提供了特定的 DOM 方法，可以在应用程序的顶层使用。大多数的组件不需要使用此模块。该模块中提供的一些方法如下：

    1. render()
    2. hydrate()
    3. unmountComponentAtNode()
    4. findDOMNode()
    5. createPortal()

62. react-dom 中 render 方法的目的是什么? ​

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

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

    1
    

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

63. ReactDOMServer 是什么? ​

    ReactDOMServer 对象使你能够将组件渲染为静态标记（通常用于 Node 服务器中），此对象主要用于服务端渲染（SSR）。以下方法可用于服务器和浏览器环境：

    1. renderToString()
    2. renderToStaticMarkup()

    例如，你通常运行基于 Node 的 Web 服务器，如 Express，Hapi 或 Koa，然后你调用 renderToString 将根组件渲染为字符串，然后作为响应进行发送。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    

64. 在 React 中如何使用 innerHTML? ​

    dangerouslySetInnerHTML 属性是 React 用来替代在浏览器 DOM 中使用 innerHTML。与 innerHTML 一样，考虑到跨站脚本攻击（XSS），使用此属性也是有风险的。使用时，你只需传递以 __html 作为键，而 HTML 文本作为对应值的对象。

    在本示例中 MyComponent 组件使用 dangerouslySetInnerHTML 属性来设置 HTML 标记：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    

65. 如何在 React 中使用样式? ​

    style 属性接受含有 camelCased（驼峰）属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 样式中的 JavaScript 属性一致，效率更高，并且可以防止 XSS 安全漏洞。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    

    为了与在 JavaScript 中访问 DOM 节点上的属性保持一致，样式键采用了 camelcased（例如node.style.backgroundImage）。

66. 在 React 中事件有何不同? ​

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

    1. React 事件处理程序是采用驼峰而不是小写来命名的。
    2. 使用 JSX，你将传递一个函数作为事件处理程序，而不是字符串。

67. 如果在构造函数中使用 setState() 会发生什么? ​

    当你使用 setState() 时，除了设置状态对象之外，React 还会重新渲染组件及其所有的子组件。你会得到这样的错误：Can only update a mounted or mounting component.。因此我们需要在构造函数中使用 this.state 初始化状态。

68. 索引作为键的影响是什么? ​

    Keys 应该是稳定的，可预测的和唯一的，这样 React 就能够跟踪元素。

    在下面的代码片段中，每个元素的键将基于列表项的顺序，而不是绑定到即将展示的数据上。这将限制 React 能够实现的优化。

    jsx

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

    1
    2
    3
    

    假设 todo.id 对此列表是唯一且稳定的，如果将此数据作为唯一键，那么 React 将能够对元素进行重新排序，而无需重新创建它们。

    jsx

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

    1
    2
    3
    

69. 在 componentWillMount() 方法中使用 setState() 好吗? ​

    建议避免在 componentWillMount() 生命周期方法中执行异步初始化。在 mounting 发生之前会立即调用 componentWillMount()，且它在 render() 之前被调用，因此在此方法中更新状态将不会触发重新渲染。应避免在此方法中引入任何副作用或订阅操作。我们需要确保对组件初始化的异步调用发生在 componentDidMount() 中，而不是在 componentWillMount() 中。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    

70. 如果在初始状态中使用 props 属性会发生什么? ​

    如果在不刷新组件的情况下更改组件上的属性，则不会显示新的属性值，因为构造函数函数永远不会更新组件的当前状态。只有在首次创建组件时才会用 props 属性初始化状态。

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    

    在 render 方法使用使用 props 将会显示更新的值：

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    

71. 如何有条件地渲染组件? ​

    在某些情况下，你希望根据某些状态渲染不同的组件。 JSX 不会渲染 false 或 undefined，因此你可以使用 && 运算符，在某个条件为 true 时，渲染组件中指定的内容。

    jsx

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

    1
    2
    3
    4
    5
    6
    

    如果你需要一个 if-else 条件，那么使用三元运算符：

    jsx

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

    1
    2
    3
    4
    5
    6
    

    阅读资源：

    1. 掘金 - 精读《React 八种条件渲染》

72. 为什么在 DOM 元素上展开 props 需要小心? ​

    当我们展开属性时，我们会遇到添加未知 HTML 属性的风险，这是一种不好的做法。相反，我们可以使用属性解构和...rest 运算符，因此它只添加所需的 props 属性。例如，

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    

73. 在 React 中如何使用装饰器? ​

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

    jsx

    @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} />
        }
      }
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    

74. 如何 memoize（记忆）组件? ​

    有可用于函数组件的 memoize 库。例如 moize 库可以将组件存储在另一个组件中。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    

75. 如何实现 Server Side Rendering 或 SSR? ​

    React 已经配备了用于处理 Node 服务器上页面渲染的功能。你可以使用特殊版本的 DOM 渲染器，它遵循与客户端相同的模式。

    jsx

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

    1
    2
    3
    4
    

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

76. 如何在 React 中启用生产模式? ​

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

77. 什么是 CRA 及其好处? ​

    create-react-app CLI 工具允许你无需配置步骤，快速创建和运行 React 应用。

    让我们使用 CRA 来创建 Todo 应用：

    bash

    # 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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    

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

    1. React, JSX, ES6, 和 Flow 语法支持。
    2. ES6 之外的语言附加功能，比如对象扩展运算符。
    3. Autoprefixed CSS，因此你不在需要 -webkit- 或其他前缀。
    4. 一个快速的交互式单元测试运行程序，内置了对覆盖率报告的支持。
    5. 一个实时开发服务器，用于警告常见错误。
    6. 一个构建脚本，用于打包用于生产中包含 hashes 和 sourcemaps 的 JS、CSS 和 Images 文件。

78. 在 mounting 阶段生命周期方法的执行顺序是什么? ​

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

    1. constructor()
    2. static getDerivedStateFromProps()
    3. render()
    4. componentDidMount()

79. 在 React v16 中，哪些生命周期方法将被弃用? ​

    以下生命周期方法将成为不安全的编码实践，并且在异步渲染方面会更有问题。

    1. componentWillMount()
    2. componentWillReceiveProps()
    3. componentWillUpdate()

    从 React v16.3 开始，这些方法使用 UNSAFE_ 前缀作为别名，未加前缀的版本将在 React v17 中被移除。

80. 生命周期方法 getDerivedStateFromProps() 的目的是什么? ​

    新的静态 getDerivedStateFromProps() 生命周期方法在实例化组件之后以及重新渲染组件之前调用。它可以返回一个对象用于更新状态，或者返回 null 指示新的属性不需要任何状态更新。

    jsx

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

    1
    2
    3
    4
    5
    

    此生命周期方法与 componentDidUpdate() 一起涵盖了 componentWillReceiveProps() 的所有用例。

81. 生命周期方法 getSnapshotBeforeUpdate() 的目的是什么? ​

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

    jsx

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

    1
    2
    3
    4
    5
    

    此生命周期方法与 componentDidUpdate() 一起涵盖了 componentWillUpdate() 的所有用例。

82. createElement() 和 cloneElement() 方法有什么区别? ​

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

83. 推荐的组件命名方法是什么? ​

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

    使用 displayName 命名组件:

    jsx

    export default React.createClass({
      displayName: 'TodoApp'
      // ...
    })

    1
    2
    3
    4
    

    推荐的方式：

    jsx

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

    1
    2
    3
    

84. 在组件类中方法的推荐顺序是什么? ​

    从 mounting 到 render stage 阶段推荐的方法顺序：

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

85. 什么是 switching 组件? ​

    switching 组件是渲染多个组件之一的组件。我们需要使用对象将 prop 映射到组件中。

    例如，以下的 switching 组件将基于 page 属性显示不同的页面：

    jsx

    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
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    

86. 为什么我们需要将函数传递给 setState() 方法? ​

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

    假设初始计数值为零。在连续三次增加操作之后，该值将只增加一个。

    jsx

    // 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

    1
    2
    3
    4
    5
    

    如果将函数传递给 setState()，则 count 将正确递增。

    jsx

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

    1
    2
    3
    4
    

87. 在 React 中什么是严格模式? ​

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

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    在上面的示例中，strict mode 检查仅应用于 <ComponentOne> 和 <ComponentTwo> 组件。

88. React Mixins 是什么? ​

    Mixins 是一种完全分离组件通用功能的方法。 Mixins 不应该被继续使用，可以用高阶组件或装饰器来替换。

    最常用的 mixins 是 PureRenderMixin。当 props 和状态与之前的 props 和状态相等时，你可能在某些组件中使用它来防止不必要的重新渲染：

    jsx

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

    1
    2
    3
    4
    5
    6
    

89. 为什么 isMounted() 是一个反模式，而正确的解决方案是什么? ​

    isMounted() 的主要场景是避免在组件卸载后调用 setState()，因为它会发出警告。

    jsx

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

    1
    2
    3
    

    在调用 setState() 之前检查 isMounted() 会消除警告，但也会破坏警告的目的。使用 isMounted() 有一种代码味道，因为你要检查的唯一原因是你认为在卸载组件后可能持有引用。

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

90. React 中支持哪些指针事件? ​

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

    目前以下事件类型在 React DOM 中是可用的：

    1. onPointerDown
    2. onPointerMove
    3. onPointerUp
    4. onPointerCancel
    5. onGotPointerCapture
    6. onLostPointerCaptur
    7. onPointerEnter
    8. onPointerLeave
    9. onPointerOver
    10. onPointerOut

91. 为什么组件名称应该以大写字母开头? ​

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

    定义组件类的时候，你可以以小写字母开头，但在导入时应该使用大写字母。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    

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

    jsx

    import MyComponent from './MyComponent'

    1
    

92. 在 React v16 中是否支持自定义 DOM 属性? ​

    是的，在过去 React 会忽略未知的 DOM 属性。如果你编写的 JSX 属性 React 无法识别，那么 React 将跳过它。例如：

    jsx

    <div mycustomattribute={'something'} />

    1
    

    在 React 15 中将在 DOM 中渲染一个空的 div：

    html

    <div />

    1
    

    在 React 16 中，任何未知的属性都将会在 DOM 显示：

    html

    <div mycustomattribute="something" />

    1
    

    这对于应用特定于浏览器的非标准属性，尝试新的 DOM APIs 与集成第三方库来说非常有用。

93. constructor 和 getInitialState 有什么区别? ​

    当使用 ES6 类时，你应该在构造函数中初始化状态，而当你使用 React.createClass() 时，就需要使用 getInitialState() 方法。

    使用 ES6 类:

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    

    使用 React.createClass():

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    

    注意： 在 React v16 中 React.createClass() 已被弃用和删除，请改用普通的 JavaScript 类。

94. 是否可以在不调用 setState 方法的情况下，强制组件重新渲染? ​

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

    jsx

    component.forceUpdate(callback)

    1
    

    建议避免使用 forceUpdate()，并且只在 render() 方法中读取 this.props 和 this.state。

95. 在使用 ES6 类的 React 中 super() 和 super(props) 有什么区别? ​

    当你想要在 constructor() 函数中访问 this.props，你需要将 props 传递给 super() 方法。

    使用 super(props):

    jsx

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

    1
    2
    3
    4
    5
    6
    

    使用 super():

    jsx

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

    1
    2
    3
    4
    5
    6
    

    在 constructor() 函数之外，访问 this.props 属性会显示相同的值。

    阅读资源：

    1. 为什么我们要写 super(props)？

96. 在 JSX 中如何进行循环? ​

    你只需使用带有 ES6 箭头函数语法的 Array.prototype.map 即可。例如，items 对象数组将会被映射成一个组件数组：

    jsx

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

    1
    2
    3
    4
    5
    

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

    jsx

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

    1
    2
    3
    4
    5
    

    这是因为 JSX 标签会被转换成函数调用，并且你不能在表达式中使用语句。但这可能会由于 do 表达式而改变，它们是第一阶段提案。

97. 如何在 attribute 引号中访问 props 属性? ​

    React (或 JSX) 不支持属性值内的变量插值。下面的形式将不起作用：

    jsx

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

    1
    

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

    jsx

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

    1
    

    使用模板字符串也是可以的：

    jsx

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

    1
    

98. 什么是 React proptype 数组? ​

    如果你要规范具有特定对象格式的数组的属性，请使用 React.PropTypes.shape() 作为 React.PropTypes.arrayOf() 的参数。

    jsx

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

    1
    2
    3
    4
    5
    6
    7
    8
    

99. 如何有条件地应用样式类? ​

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

    jsx

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

    1
    

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

    jsx

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

    1
    

    模板字符串也可以工作：

    jsx

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

    1
    

100. React 和 ReactDOM 之间有什么区别? ​

     react 包中包含 React.createElement(), React.Component, React.Children，以及与元素和组件类相关的其他帮助程序。你可以将这些视为构建组件所需的同构或通用帮助程序。react-dom 包中包含了 ReactDOM.render()，在 react-dom/server 包中有支持服务端渲染的 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 方法。

101. 为什么 ReactDOM 从 React 分离出来? ​

     React 团队致力于将所有的与 DOM 相关的特性抽取到一个名为 ReactDOM 的独立库中。React v0.14 是第一个拆分后的版本。通过查看一些软件包，react-native，react-art，react-canvas，和 react-three，很明显，React 的优雅和本质与浏览器或 DOM 无关。为了构建更多 React 能应用的环境，React 团队计划将主要的 React 包拆分成两个：react 和 react-dom。这为编写可以在 React 和 React Native 的 Web 版本之间共享的组件铺平了道路。

102. 如何使用 React label 元素? ​

     如果你尝试使用标准的 for 属性将 <label> 元素绑定到文本输入框，那么在控制台将会打印缺少 HTML 属性的警告消息。

     jsx

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

     1
     2
     

     因为 for 是 JavaScript 的保留字，请使用 htmlFor 来替代。

     jsx

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

     1
     2
     

103. 如何合并多个内联的样式对象? ​

     在 React 中，你可以使用扩展运算符:

     jsx

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

     1
     2
     3
     

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

     jsx

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

     1
     2
     3
     

104. 如何在调整浏览器大小时重新渲染视图? ​

     你可以在 componentDidMount() 中监听 resize 事件，然后更新尺寸（width 和 height）。你应该在 componentWillUnmount() 方法中移除监听。

     jsx

     class WindowDimensions extends React.Component {
       componentWillMount() {
         this.updateDimensions()
       }
     
       componentDidMount() {
         window.addEventListener('resize', this.updateDimensions)
       }
     
       componentWillUnmount() {
         window.removeEventListener('resize', this.updateDimensions)
       }
     
       updateDimensions() {
         this.setState({
           width: $(window).width(),
           height: $(window).height()
         })
       }
     
       render() {
         return (
           <span>
             {this.state.width} x {this.state.height}
           </span>
         )
       }
     }

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     

105. setState() 和 replaceState() 方法之间有什么区别? ​

     当你使用 setState() 时，当前和先前的状态将被合并。replaceState() 会抛出当前状态，并仅用你提供的内容替换它。通常使用 setState()，除非你出于某种原因确实需要删除所有以前的键。你还可以在 setState() 中将状态设置为 false/null，而不是使用 replaceState()。

106. 如何监听状态变化? ​

     当状态更改时将调用以下生命周期方法。你可以将提供的状态和属性值与当前状态和属性值进行比较，以确定是否发生了有意义的改变。

     componentWillUpdate(object nextProps, object nextState)
     componentDidUpdate(object prevProps, object prevState)

     1
     2
     

107. 在 React 状态中删除数组元素的推荐方法是什么? ​

     更好的方法是使用 Array.prototype.filter() 方法。

     例如，让我们创建用于更新状态的 removeItem() 方法。

     jsx

     removeItem(index) {
       this.setState({
         data: this.state.data.filter((item, i) => i !== index)
       })
     }

     1
     2
     3
     4
     5
     

108. 在 React 中是否可以不在页面上渲染 HTML 内容? ​

     可以使用最新的版本 (>=16.2)，以下是可能的选项：

     jsx

     render() {
       return false
     }

     1
     2
     3
     
     jsx

     render() {
       return null
     }

     1
     2
     3
     
     jsx

     render() {
       return []
     }

     1
     2
     3
     
     jsx

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

     1
     2
     3
     
     jsx

     render() {
       return <></>
     }

     1
     2
     3
     

     返回 undefined 是无效的。

109. 如何用 React 漂亮地显示 JSON? ​

     我们可以使用 <pre> 标签，以便保留 JSON.stringify() 的格式：

     jsx

     const data = { name: 'John', age: 42 }
     
     class User extends React.Component {
       render() {
         return <pre>{JSON.stringify(data, null, 2)}</pre>
       }
     }
     
     React.render(<User />, document.getElementById('container'))

     1
     2
     3
     4
     5
     6
     7
     8
     9
     

110. 为什么你不能更新 React 中的 props? ​

     React 的哲学是 props 应该是 immutable 和 top-down。这意味着父级可以向子级发送任何属性值，但子级不能修改接收到的属性。

111. 如何在页面加载时聚焦一个输入元素? ​

     你可以为 input 元素创建一个 ref，然后在 componentDidMount() 方法中使用它：

     jsx

     class App extends React.Component {
       componentDidMount() {
         this.nameInput.focus()
       }
     
       render() {
         return (
           <div>
             <input defaultValue={"Won't focus"} />
             <input
               ref={(input) => (this.nameInput = input)}
               defaultValue={'Will focus'}
             />
           </div>
         )
       }
     }
     
     ReactDOM.render(<App />, document.getElementById('app'))

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     

112. 更新状态中的对象有哪些可能的方法? ​

     1. 用一个对象调用 setState() 来与状态合并：

        • 使用 Object.assign() 创建对象的副本：

          jsx

          const user = Object.assign({}, this.state.user, { age: 42 })
          this.setState({ user })

          1
          2
          

        • 使用扩展运算符：

          jsx

          const user = { ...this.state.user, age: 42 }
          this.setState({ user })

          1
          2
          

     2. 使用一个函数调用 setState()：

        jsx

        this.setState((prevState) => ({
          user: {
            ...prevState.user,
            age: 42
          }
        }))

        1
        2
        3
        4
        5
        6
        

113. 为什么函数比对象更适合于 setState()? ​

     出于性能考虑，React 可能将多个 setState() 调用合并成单个更新。这是因为我们可以异步更新 this.props 和 this.state，所以不应该依赖它们的值来计算下一个状态。

     以下的 counter 示例将无法按预期更新：

     jsx

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

     1
     2
     3
     4
     

     首选方法是使用函数而不是对象调用 setState()。该函数将前一个状态作为第一个参数，当前时刻的 props 作为第二个参数。

     jsx

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

     1
     2
     3
     4
     

114. 我们如何在浏览器中找到当前正在运行的 React 版本? ​

     你可以使用 React.version 来获取版本：

     jsx

     const REACT_VERSION = React.version
     
     ReactDOM.render(
       <div>{`React version: ${REACT_VERSION}`}</div>,
       document.getElementById('app')
     )

     1
     2
     3
     4
     5
     6
     

115. 在 create-react-app 项目中导入 polyfills 的方法有哪些? ​

     1. 从 core-js 中手动导入:

        创建一个名为 polyfills.js 文件，并在根目录下的 index.js 文件中导入它。运行 npm install core-js 或 yarn add core-js 并导入你所需的功能特性：

        jsx

        import 'core-js/fn/array/find'
        import 'core-js/fn/array/includes'
        import 'core-js/fn/number/is-nan'

        1
        2
        3
        

     2. 使用 Polyfill 服务:

        通过将以下内容添加到 index.html 中来获取自定义的特定于浏览器的 polyfill：

        html

        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

        1
        

        在上面的脚本中，我们必须显式地请求 Array.prototype.includes 特性，因为它没有被包含在默认的特性集中。

116. 如何在 create-react-app 中使用 https 而不是 http? ​

     你只需要使用 HTTPS=true 配置。你可以编辑 package.json 中的 scripts 部分：

     json

     "scripts": {
       "start": "set HTTPS=true && react-scripts start"
     }

     1
     2
     3
     

     或直接运行 set HTTPS=true && npm start

117. 如何避免在 create-react-app 中使用相对路径导入? ​

     在项目的根目录中创建一个名为 .env 的文件，并写入导入路径：

     NODE_PATH=src/app

     1
     

     然后重新启动开发服务器。现在，你应该能够在没有相对路径的情况下导入 src/app 内的任何内容。

118. 如何为 React Router 添加 Google Analytics? ​

     在 history 对象上添加一个监听器以记录每个页面的访问：

     jsx

     history.listen(function (location) {
       window.ga('set', 'page', location.pathname + location.search)
       window.ga('send', 'pageview', location.pathname + location.search)
     })

     1
     2
     3
     4
     

119. 如何每秒更新一个组件? ​

     你需要使用 setInterval() 来触发更改，但也需要在组件卸载时清除计时器，以防止错误和内存泄漏。

     jsx

     componentDidMount() {
       this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
     }
     
     componentWillUnmount() {
       clearInterval(this.interval)
     }

     1
     2
     3
     4
     5
     6
     7
     

120. 如何将 vendor prefixes 应用于 React 中的内联样式? ​

     React 不会自动应用 vendor prefixes，你需要手动添加 vendor prefixes。

     jsx

     <div
       style={{
         transform: 'rotate(90deg)',
         WebkitTransform: 'rotate(90deg)', // note the capital 'W' here
         msTransform: 'rotate(90deg)' // 'ms' is the only lowercase vendor prefix
       }}
     />

     1
     2
     3
     4
     5
     6
     7
     

121. 如何使用 React 和 ES6 导入和导出组件? ​

     导出组件时，你应该使用默认导出：

     jsx

     import React from 'react'
     import User from 'user'
     
     export default class MyProfile extends React.Component {
       render() {
         return <User type="customer">//...</User>
       }
     }

     1
     2
     3
     4
     5
     6
     7
     8
     

     使用 export 说明符，MyProfile 将成为成员并导出到此模块，此外在其他组件中你无需指定名称就可以导入相同的内容。

122. 为什么 React 组件名称必须以大写字母开头? ​

     在 JSX 中，小写标签被认为是 HTML 标签。但是，含有 . 的大写和小写标签名却不是。

     1. <component /> 将被转换为 React.createElement('component') (i.e, HTML 标签)
     2. <obj.component /> 将被转换为 React.createElement(obj.component)
     3. <Component /> 将被转换为 React.createElement(Component)

123. 为什么组件的构造函数只被调用一次? ​

     React 协调算法假设如果自定义组件出现在后续渲染的相同位置，则它与之前的组件相同，因此重用前一个实例而不是创建新实例。

124. 在 React 中如何定义常量? ​

     你可以使用 ES7 的 static 来定义常量。

     jsx

     class MyComponent extends React.Component {
       static DEFAULT_PAGINATION = 10
     }

     1
     2
     3
     

125. 在 React 中如何以编程方式触发点击事件? ​

     你可以使用 ref 属性通过回调函数获取对底层的 HTMLinputeElement 对象的引用，并将该引用存储为类属性，之后你就可以利用该引用在事件回调函数中， 使用 HTMLElement.click 方法触发一个点击事件。这可以分为两个步骤：

     1. 在 render 方法创建一个 ref：

        jsx

        <input ref={(input) => (this.inputElement = input)} />

        1
        

     2. 在事件处理器中触发点击事件

        jsx

        this.inputElement.click()

        1
        

126. 在 React 中是否可以使用 async/await? ​

     如果要在 React 中使用 async/await，则需要 Babel 和 transform-async-to-generator 插件。

127. React 项目常见的文件结构是什么? ​

     React 项目文件结构有两种常见的实践。

     1. 按功能或路由分组:

        构建项目的一种常见方法是将 CSS，JS 和测试用例放在一起，按功能或路由分组。

        common/
        ├─ Avatar.js
        ├─ Avatar.css
        ├─ APIUtils.js
        └─ APIUtils.test.js
        feed/
        ├─ index.js
        ├─ Feed.js
        ├─ Feed.css
        ├─ FeedStory.js
        ├─ FeedStory.test.js
        └─ FeedAPI.js
        profile/
        ├─ index.js
        ├─ Profile.js
        ├─ ProfileHeader.js
        ├─ ProfileHeader.css
        └─ ProfileAPI.js

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        

     2. 按文件类型分组:

        另一种流行的项目结构组织方法是将类似的文件组合在一起。

        api/
        ├─ APIUtils.js
        ├─ APIUtils.test.js
        ├─ ProfileAPI.js
        └─ UserAPI.js
        components/
        ├─ Avatar.js
        ├─ Avatar.css
        ├─ Feed.js
        ├─ Feed.css
        ├─ FeedStory.js
        ├─ FeedStory.test.js
        ├─ Profile.js
        ├─ ProfileHeader.js
        └─ ProfileHeader.css

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        

128. 最流行的动画软件包是什么? ​

     React Transition Group 和 React Motion 是 React 生态系统中流行的动画包。

129. 模块化样式文件有什么好处? ​

     建议避免在组件中对样式值进行硬编码。任何可能在不同的 UI 组件之间使用的值都应该提取到它们自己的模块中。

     例如，可以将这些样式提取到单独的组件中：

     jsx

     export const colors = {
       white,
       black,
       blue
     }
     
     export const space = [0, 8, 16, 32, 64]

     1
     2
     3
     4
     5
     6
     7
     

     然后在其他组件中单独导入：

     jsx

     import { space, colors } from './styles'

     1
     

130. 什么是 React 流行的特定 linters? ​

     ESLint 是一个流行的 JavaScript linter。有一些插件可以分析特定的代码样式。在 React 中最常见的一个是名为 eslint-plugin-react npm 包。默认情况下，它将使用规则检查许多最佳实践，检查内容从迭代器中的键到一组完整的 prop 类型。另一个流行的插件是 eslint-plugin-jsx-a11y，它将帮助修复可访问性的常见问题。由于 JSX 提供的语法与常规 HTML 略有不同，因此常规插件无法获取 alt 文本和 tabindex 的问题。

131. 如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用? ​

     你可以使用 AJAX 库，如 Axios，jQuery AJAX 和浏览器内置的 fetch API。你应该在 componentDidMount() 生命周期方法中获取数据。这样当获取到数据的时候，你就可以使用 setState() 方法来更新你的组件。

     例如，从 API 中获取员工列表并设置本地状态：

     jsx

     class MyComponent extends React.Component {
       constructor(props) {
         super(props)
         this.state = {
           employees: [],
           error: null
         }
       }
     
       componentDidMount() {
         fetch('https://api.example.com/items')
           .then((res) => res.json())
           .then(
             (result) => {
               this.setState({
                 employees: result.employees
               })
             },
             (error) => {
               this.setState({ error })
             }
           )
       }
     
       render() {
         const { error, employees } = this.state
         if (error) {
           return <div>Error: {error.message}</div>
         } else {
           return (
             <ul>
               {employees.map((item) => (
                 <li key={employee.name}>
                   {employee.name}-{employees.experience}
                 </li>
               ))}
             </ul>
           )
         }
       }
     }

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     

132. 什么是渲染属性? ​

     Render Props 是一种简单的技术，用于使用值为函数的 prop 属性在组件之间共享代码。下面的组件使用返回 React 元素的 render 属性：

     jsx

     <DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />

     1
     

     像 React Router 和 DownShift 这样的库使用了这种模式。