react--react16的新特性

react16的新特性主要在以下四个方面：

  新的生命周期

  新的语法

  优化

  hook

新的生命周期

在react16中，不建议使用以下生命周期函数：

  componentWillMount()

  componentWillReceiveProps(nextProps, nextState)

  componentWillUpdate()

新增了以下生命周期函数：

  static getDerivedStateFromProps(nextProps, prevState)

  getSnapshotBeforeUpdate(prevProps, prevState)

  componentDidCatch(error, info)

static getDerivedStateFromProps(nextProps, prevState)

在组件实例内无法调用静态方法，静态方法中也无法通过this使用实例中的其他属性或方法。可以防止对组件实例的错误操作。

主要用来在组件实例后、接受到新的prop后，进行调用。此方法返回一个对象，这个对象会被更新到实例的state中；如果返回为空，则不会更新。

getSnapshotBeforeUpdate(prevProps, prevState)

在DOM更新前调用，返回值将被传给componentDidUpdate

componentDidCatch(error, info)

在之前，只要某个组件中出现错误，整个应用就会崩溃。通过此函数，在发生错误的组件的父组件中进行错误捕获。如果组件的父组件中未处理，则去父组件的父组件中进行查看是否有处理函数，层层递归。

新的语法

在之前，ref是通过在元素上指定ref值进行使用，并通过this.refs.xxx进行获取，在react16中，新增了以下两个定义方式：

// 第一种方式
constructor(){
   this.inputRef = React.createRef()
}

render(){
   return (
      <input ref={this.inputRef} />
   )
}

// 第二种方式
render(){
   return (
      <input ref={(ref) => {this.inputRef = ref}} />
   )
}

如果是需要层层传递的props，可以通过React.createContext避免嵌套。

性能方面的优化

fragment

react要求jsx元素是树结构，但每次需要在最外层包裹一个容器会造成浪费。react提供了fragment，让我们在实现元素列表时，无需增加额外节点

render(){
   return (
      <> // 也可以用<React.Fragments>
        <tr><td></td></tr>
        <tr><td></td></tr>
      </> //也可以用</React.Fragments>
   )
}

React.memo()

用来控制组件何时重新渲染。在之前，只要有更新就会引起该组件及其所有子组件重新渲染。使用memo就可以实现仅仅部分组件渲染。类似之前的pureComponent，但可以在函数组件中使用。

React.lazy & React.Suspens

实现React的Code Spliting对React代码进行拆包，有效的减少一次性加载太多代码的问题。

用法：

const IconDemo = lazy(() => import('./icon'));

<Suspense fallback={<div className="loading">Loading...</div>}>
    <Route path="/" component={Home} exact />
    <Route path="/icon" component={IconDemo} />
</Suspense> 

hook

实现了在函数组件中使用state，详解参考官网