react實現(xiàn)pure render時bind(this)隱患需注意!

更新時間：2017年03月09日 11:25:41 作者：楊川寶

這篇文章主要為大家詳細(xì)介紹了值得你在react實現(xiàn)pure render的時候，需要注意的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)一個問題，對于Person這個子組件來說，在父組件re－render的時候，即使Person得前后兩個props都沒改變，它依舊會re－render，即使用immutable.js也不好使。

原來啊，父組件每次render，_handleClick都會執(zhí)行bind(this) 這樣_handleClick的引用每次都會改，所以Person前后兩次props其實是不一樣的。

那怎么辦？把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)文章

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