3. React16后的新功能

React16后的新功能

  • 梵
    administrators

    软件版本通常分3级：

    • 第一个数字代表大版本
    • 第二个数字代表小版本
    • 第三个数字代表小打小闹 - bug fixes等

    V15 到 V16 是大版本升级，惊心动魄的新功能不少：

    1. fragments - 曾几何时，render()必须且只能返回一个node，因此，你不得不加上一些不必要的<div>把多个node包起来。fragments 让你可以直接render一个数组。这个配上map真是太完美了。注意：key是需要的，这个有点烦。所以v16.2.0后，我们可以用特殊字符<>, 例如：<><li /><li /><>，这样可以就可省略了。

    2. 对了，你可以直接返回字符串了 - 不由再次感叹：曾几何时，render()必须且只能返回一个node

    3. contextAPI - 就是说createContext之后，可以在一个component里提供provider，例外一个component里通过consumer来读取
      祝：这个我基本上没用过 - 因为我要吗直接传props，或者用其他state管理，例如：redux或者mobx等。

    4. createRef API - 这个在不受控制的form还是很有用的。受控制指通过react state来控制form的字。

    5. 新的lifecycles

    • getDerivedStateFromProps
    • getSnashotBeforeUpdate

    注意：几个will的lifecycles， 到V17后就没有life了。所以，大家有空还是看看上面两个新的lifecyles吧。

    1. StrictMode - 用了发现下面几个潜在问题
    • Identifying components with unsafe lifecycles
    • Warning about legacy string ref API usage
    • Detecting unexpected side effects

    1. React.memo - 用来替代PureComponent 或者 shouldComponentUpdate， memo让component变存， 或者说只有props变才重新render。如只是父级component变了，memo子component不会重新render

    2. React.lazy - 用来实现code-split - 基本是react loadable的复制版。

    下面几个还没出：

    1. Hooks - 让functional component 可以使用 state 通过 useState()

    2. suspend

    3. concurrent rendering

    10和11 基本上是用了提供弱CPU和慢网速用户的用户体验。大概意思：hold住render，知道数据ready，这样对网速快的用户少了loading icon，对慢用户仍然有repsond。这个概念有点难，等真正开始用了，我们再深入！

    0