生命周期函数变化
函数 | 操作 | 说明 |
---|---|---|
componentWillMount componentWillReceiveProps componentWillUpdate |
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>