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è)問題，對(duì)于Person這個(gè)子組件來說，在父組件re－render的時(shí)候，即使Person得前后兩個(gè)props都沒改變，它依舊會(huì)re－render，即使用immutable.js也不好使。
原來啊，父組件每次render，_handleClick都會(huì)執(zhí)行bind(this) 這樣_handleClick的引用每次都會(huì)改，所以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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了快速搭建React的步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了在react中使用tailwind的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
簡單的React SSR服務(wù)器渲染實(shí)現(xiàn)
這篇文章主要介紹了簡單的React SSR服務(wù)器渲染實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
這篇文章主要介紹了D3.js(v3)+react 制作 一個(gè)帶坐標(biāo)與比例尺的柱形圖 (V3版本) ，本文通過實(shí)例代碼文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05
React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo
這篇文章主要為大家介紹了React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React中useEffect原理的代碼簡單實(shí)現(xiàn)詳解
React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過一個(gè)簡單的例子解釋如何用代碼實(shí)現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下2023-12-12
使用React封裝一個(gè)Tree樹形組件的實(shí)例代碼
這篇文章主要介紹了使用React封裝一個(gè)Tree樹形組件的實(shí)例,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
在Create React App中使用CSS Modules的方法示例
本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。2019-01-01
React模擬實(shí)現(xiàn)Vue的keepAlive功能
Vue中,keep-alive組件可以緩存組件狀態(tài),在路由切換時(shí)重新掛載,實(shí)現(xiàn)這一功能在React中并不簡單,但我們可以借助一個(gè)第三方庫——react-activation 來模擬Vue的keep-alive功能,需要的朋友可以參考下2024-10-10
教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor
這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中，并且使用方便，需要的朋友可以參考下2023-01-01