React 16.3你必须要了解的

React 16.3是上周发布的，之前也有些文章介绍过，不过我们还是来看看最终发布的一些新特性。

一、Context API

多年以来, context api都是一个实验性的接口，现在正式发布了。它主要解决的是多层级属性传递的问题，它充当一个全局的状态树，小型项目中可以用它来代替Redux。

下面是一个在不同组件间传递theme值的例子

image

二、 createRef API

之前是有两个使用ref的方式，一种是直接使用字符串作ref（不建议使用），另一种是通过回调。16.3版增加了一个新的接口即createRef，有方便之处，同时又避免了字符串方式的弊端。

image

三、forwardRef API

这个API主要用于HOC高阶组件中。如果我们创建了一个HOC，向其传递theme属性

image

接着创建一个组件

image

使用的时候是这样的

image

那么FancyThemedButton这个组件会带有来自Context传递的theme属性，同时还有HOC传递下去的属性，但是ref不会传递传递到最终的组件中。所以上面这个例子中的focus无法调用。这时候forwardRef就可以起作用了，如下：

image

四、生命周期接口变化

这个部分是比较重大的改变，一方面为了适应新的一些高级特性，比如错误边界、异步渲染。另一方面，也避免一些不合理的编程方式，特别是componentWillMount, componentWillReceiveProps, componentWillUpdate在实际使用中存在混乱的编程习惯，所以这几个接口会被移除。同时引入了getDerivedStateFromProps，它可以替代componentWillReceiveProps，还有getSnapshotBeforeUpdate能在更新之前获取DOM属性。关于新的生命周期，DAN给了一张图

image

五、StrictMode组件

这个组件和Fragment类似，是不渲染UI的，它主要用来做检查和警告，并且这个检查只限于开发阶段，正式环境下没有什么作用。

StrictMode主要帮助

1、检查组件是否正当的使用生命周期

2、对一些使用过时的接口发出告警，比如字符串方式使用的ref

3、检查一些未预料中的会产生副作用的代码

实际使用是这么用的

image

更多内容，请关注我们

image