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

請教關(guān)于reactjs的教程一點疑問

鏈接描述

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

回答
編輯回答
亮瞎她

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

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

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

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

2018年7月19日 03:29