React16新特性学习

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;

发布了90 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/me_never/article/details/103189402