鍍金池/ 問答/HTML/ 請(qǐng)教關(guān)于reactjs的教程一點(diǎn)疑問

請(qǐng)教關(guān)于reactjs的教程一點(diǎn)疑問

鏈接描述

請(qǐng)問：
問題是PureComponent將會(huì)在this.props.words的新舊值之間做一個(gè)簡(jiǎn)單的比較。由于代碼中words數(shù)組在WordAdder的handleClick方法中被改變了，盡管數(shù)組中的實(shí)際單詞已經(jīng)改變，this.props.words的新舊值還是相等的，因此即便ListOfWords具有應(yīng)該被渲染的新單詞，它還是不會(huì)更新。
原文中，不理解this.props.words的新舊值還是相等的這句。它的值不是被父親組件改變并傳遞到子組件了嘛？
thx

回答
編輯回答
亮瞎她

大部分情況下，你可以使用React.PureComponent而不必寫你自己的shouldComponentUpdate，它只做一個(gè)淺比較。但是由于淺比較會(huì)忽略屬性或狀態(tài)突變的情況，此時(shí)你不能使用它。

PureComponent 只是做了一層淺比較， JS 里對(duì)數(shù)組， 對(duì)象等引用類型的數(shù)據(jù)，用 === 比較的是它們的引用，而不是每個(gè)成員，字段。
也就是說，如果修改了原始的數(shù)組， 即使前后的值都變了， 但是它們的引用是同一個(gè)， 它們就是相等的。
打個(gè)比方，一個(gè)叫小明的人再怎么整容，他還是這個(gè)人， 還是叫小明。不會(huì)變成其他人。

數(shù)組里的 push 方法就是會(huì)修改原始數(shù)組的一個(gè)方法。它不是返回一個(gè)新的數(shù)組。
所以即使數(shù)組的內(nèi)部值改變了， PureComponent 經(jīng)過淺比較， 發(fā)現(xiàn)前后的 props 引用是同一個(gè)，值沒有被修改， 所以 shouldComponentUpdate 返回 false， 也就不會(huì)觸發(fā)重新渲染。

其他能修改原始數(shù)組的方法可以看下： Mutator 下面的。
https://developer.mozilla.org...

2018年7月19日 03:29