知识点梳理一：React16新特性

参考 segmentfault.com/a/119000001…

• Fragment 组件
• getDerivedStateFromProps 替换 componentWillReceiveProps
• getSnapshotBeforeUpdate 替换 componentWillUpdate
• componentDidCatch 处理错误
• getDerivedStateFromError 允许开发者在 render 完成之前渲染 ,该生命周期函数触发的条件是子组件抛出错误，getDerivedStateFromError 接收到这个错误参数后更新 state
• StrictMode组件，类似es6的严格模式。严格模式下，声明被废弃的componentWillxxx就不会被调用了。
• React.createContext() 上下文。contextType static contextType 为 Context API 提供了更加便捷的使用体验，可以通过 this.context 来访问 Context。

const ThemeContext = React.createContext('light');
class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

• createRef forwardRef(获得子组件)
• Error Boundaries 错误边界：React15 在渲染过程中遇到运行时的错误，会导致整个 React 组件的崩溃，而且错误信息不明确可读性差。React16 支持了更优雅的错误处理策略，如果一个错误是在组件的渲染或者生命周期方法中被抛出，整个组件结构就会从根节点中卸载，而不影响其他组件的渲染，可以利用 error boundaries 进行错误的优化处理。
• createPortal：脱离文档流组件渲染
• lazy/Suspense
• React.lazy() 提供了动态 import 组件的能力，实现代码分割。
• Suspense 作用是在等待组件时 suspend（暂停）渲染，并显示加载标识。

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

• fiber Fiber 是对 React 核心算法的一次重新实现，将原本的同步更新过程碎片化，避免主线程的长时间阻塞，使应用的渲染更加流畅。在 React16 之前，更新组件时会调用各个组件的生命周期函数，计算和比对 Virtual DOM，更新 DOM 树等，这整个过程是同步进行的，*** 中途无法中断*** 。当组件比较庞大，更新操作耗时较长时，就会导致浏览器唯一的主线程都是执行组件更新操作，而无法响应用户的输入或动画的渲染，很影响用户体验。Fiber 利用分片的思想，*** 把一个耗时长的任务分成很多小片***，每一个小片的运行时间很短，在每个小片执行完之后，就把控制权交还给 React 负责任务协调的模块，如果有紧急任务就去优先处理，如果没有就继续更新，这样就给其他任务一个执行的机会，唯一的线程就不会一直被独占。
• hooks