react實(shí)現(xiàn)pure render時(shí)bind(this)隱患需注意!
pure render 我就不多說了，附上我另一片文章鏈接 react如何性能達(dá)到最大化(前傳)
不論你用不用immutable，只要你想達(dá)到pure render，下面值得你注意！
一天我和往常一樣，開開心心得寫著react，用著@pureRender，
export default class extends Component {
...
render() {
const {name,age} =this.state;
return (
<div>
<Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在
</div>
)
}
...
}
發(fā)現(xiàn)一個(gè)問題，對于Person這個(gè)子組件來說，在父組件re－render的時(shí)候，即使Person得前后兩個(gè)props都沒改變，它依舊會re－render，即使用immutable.js也不好使。
原來啊，父組件每次render，_handleClick都會執(zhí)行bind(this) 這樣_handleClick的引用每次都會改，所以Person前后兩次props其實(shí)是不一樣的。
那怎么辦？把bind（this）去掉？不行 還必須得用
真正的答案是 讓父組件每次render 不執(zhí)行bind（this），直接提前在constructor執(zhí)行好，修改之后
export default class extends Component {
constructor(props){
super(props)
this._handleClick=this._handleClick.bind(this)//改成這樣
}
render() {
const {name,age} =this.state;
return (
<div>
<Person name={name} age={age} onClick={this._handleClick}></Person>
</div>
)
}
...
}
參考：React.js pure render performance anti-pattern
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于React如何使用相對于根目錄進(jìn)行引用組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示
在業(yè)務(wù)中,需要在一個(gè)卡片組件中展示多個(gè)標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下2023-12-12
最近在處理項(xiàng)目代碼的時(shí)候,出現(xiàn)了一個(gè)bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細(xì)給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下2024-01-01
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了react定位組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼
本篇文章主要介紹了ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
react-router-dom?V6的配置使用實(shí)踐
本文主要介紹了react-router-dom?V6的配置使用實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
electron其實(shí)是一個(gè)桌面應(yīng)用程序，不是一個(gè)標(biāo)準(zhǔn)的前端web程序，所有沒有什么請求的發(fā)生，控制臺network看不到請求，而是只能通過console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進(jìn)行通信,需要的朋友可以參考下2022-06-06
解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問題
這篇文章主要介紹了React?-?ref?命令為什么代替父子組件的數(shù)據(jù)傳遞,使用?ref?之后，我們不需要再進(jìn)行頻繁的父子傳遞了，子組件也可以有自己的私有狀態(tài)并且不會影響信息的正常需求，這是為什么呢？因?yàn)槲覀兪褂昧?ref?命令的話，ref是可以進(jìn)行狀態(tài)的傳輸2022-08-08