React 16.3变化
2018-04-02 本文已影响254人
TroyZhang
生命周期函数变化
| 函数 | 操作 | 说明 |
|---|---|---|
componentWillMountcomponentWillReceivePropscomponentWillUpdate |
16.3版本开始警告将要弃用17.0版本开始移除 |
增加UNSAFE_前缀可以去掉警告 |
static getDerivedStateFromProps(nextProps, prevState) |
16.3新增 | 返回值将作为state，返回空表示不需要更新state |
getSnapshotBeforeUpdate(prevProps, prevState) |
16.3新增 | 在componentDidUpdate之前可以把当前UI的一些状态信息暂存起来 |
Context API
之前是实验性质的API，现在转正了。提供的功能跟redux这样的状态管理库差不多。
Fragment
之前的版本中要在方法里面返回多个elements时，外面必须包一层级，例如：
render()
{
return (
<ul>
{ this.renderChilds([{name: 'Hello'}, {name: 'world'}]) }
</ul>
);
}
renderChilds(array)
{
return (
<div>
{ array.map((item, index)=><li>{ item.name }</li>) }
</div>
);
}
最终结果：
<ul>
<div>
<li>Hello</li>
<li>world</li>
</div>
</ul>
现在可以直接return多个elements了，不用外面包一层了，用一个虚拟的fragment即可
renderChilds(array)
{
return (
<Fragment>
{ array.map((item, index)=><li>{ item.name }</li>) }
</Fragment>
);
}
最终结果：
<ul>
<li>Hello</li>
<li>world</li>
</ul>
