React16新特性学习

矫情吗；* 2023-06-15 09:54 30阅读 0赞

1、**Fragment**  
Fragment 组件其作用是可以将一些子元素添加到 DOM tree 上且不需要为这些元素提供额外的父节点，相当于 render 返回数组元素。

2、**生命周期函数的更新**  
React 引入了 getDerivedStateFromProps 、 getSnapshotBeforeUpdate 及 componentDidCatch 等三个全新的生命周期函数。  
将 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 标记为不安全的方法。

3、**lazy/suspense**  
React.lazy() 提供了动态 import 组件的能力，实现代码分割。  
Suspense 作用是在等待组件时 suspend（暂停）渲染，并显示加载标识。

4、**Strict Mode**  
识别被标志位不安全的生命周期函数  
对弃用的 API 进行警告  
探测某些产生副作用的方法  
检测是否使用 findDOMNode  
检测是否采用了老的 Context API

5、**render方法新增返回类型**  
render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级

6、**错误边界 Error Boundary**  
错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。

7、**createRef / forwardRef**  
通过ref只能拿到标签元素或者通过class创建的react元素，不能拿到通过函数创建的react元素，，适用于表单获取、元素动画等场景。  
React.forwardRef 是 Ref 的转发, 它能够让父组件访问到子组件的 Ref，从而操作子组件的 DOM，可以用于**高阶组件组件**

8、**createContext / Provider / contextType / Consumer**  
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。顶层的Provider中传入value，在子孙级的Consumer中获取该值，并且能够传递函数，用来修改context  
React.createContext 是一个函数，它接收初始值并返回带有 Provider 和 Consumer 组件的对象；  
Provider 组件是数据的发布方，一般在组件树的上层并接收一个数据的初始值；  
Consumer 组件是数据的订阅方，它的 props.children 是一个函数，接收被发布的数据，并且返回 React Element；