React 16.3變化

生命周期函數(shù)變化

函數(shù) 操作 說(shuō)明
componentWillMount
componentWillReceiveProps
componentWillUpdate
16.3版本開始警告將要棄用
17.0版本開始移除
增加UNSAFE_前綴可以去掉警告
static getDerivedStateFromProps(nextProps, prevState) 16.3新增 返回值將作為state,返回空表示不需要更新state
getSnapshotBeforeUpdate(prevProps, prevState) 16.3新增 componentDidUpdate之前可以把當(dāng)前UI的一些狀態(tài)信息暫存起來(lái)

Context API

之前是實(shí)驗(yàn)性質(zhì)的API,現(xiàn)在轉(zhuǎn)正了。提供的功能跟redux這樣的狀態(tài)管理庫(kù)差不多。

Fragment

之前的版本中要在方法里面返回多個(gè)elements時(shí),外面必須包一層級(jí),例如:

render()
{
    return (
        <ul>
            { this.renderChilds([{name: 'Hello'}, {name: 'world'}]) }
        </ul>
    );
}
renderChilds(array)
{
    return (
        <div>
            { array.map((item, index)=><li>{ item.name }</li>) }
        </div>
    );
}

最終結(jié)果:

<ul>
    <div>
        <li>Hello</li>
        <li>world</li>
    </div>
</ul>

現(xiàn)在可以直接return多個(gè)elements了,不用外面包一層了,用一個(gè)虛擬的fragment即可

renderChilds(array)
{
    return (
        <Fragment>
            { array.map((item, index)=><li>{ item.name }</li>) }
        </Fragment>
    );
}

最終結(jié)果:

<ul>
    <li>Hello</li>
    <li>world</li>
</ul>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • React 16.3-alpha已經(jīng)發(fā)布。這次發(fā)布都有哪些新特性呢,我們來(lái)一起看看。 新的Context API ...
    uncle_charlie閱讀 834評(píng)論 0 2
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,323評(píng)論 25 708
  • 前言 Context被翻譯為上下文,在編程領(lǐng)域,這是一個(gè)經(jīng)常會(huì)接觸到的概念,React中也有。 在React的官方...
    張國(guó)鈺閱讀 54,750評(píng)論 17 113
  • 本周制定80,完成件27,完成率34%,一字頭8,單筆1.7.分享單1個(gè) 總結(jié):本周還是單筆低,高單少,客資循環(huán)的...
    positive默然閱讀 201評(píng)論 0 0
  • 今天,狀態(tài)只能說(shuō),還好。 睡眠是真好,中午不知不覺就睡了兩個(gè)多小時(shí),醒...
    彬彬麻麻閱讀 264評(píng)論 0 0

友情鏈接更多精彩內(nèi)容