React 16.3变化

生命周期函数变化

函数 操作 说明
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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容