react 實現(xiàn)pure render的時候，bind(this)隱患

LiveVideoStack 發(fā)布于2019-08-19 17:23 / 1505人閱讀

摘要：即使用也不好使。。。原來啊，父組件每次，都會執(zhí)行這樣的引用每次都會改。。所以前后兩次其實是不一樣的。。那怎么辦把去掉不行還必須得用真正的答案是讓父組件每次不執(zhí)行，直接提前在執(zhí)行好，修改之后改成這樣參考。。

pure render 我就不多說了，附上我另一片文章鏈接 react如何性能達(dá)到最大化(前傳)
不論你用不用immutable，只要你想達(dá)到pure render，下面值得你注意！！！
一天我和往常一樣，開開心心得寫著react，用著@pureRender，

export default class  extends Component {
...
  render() {
    const {name,age} =this.state;
    return (
      
        //bug 所在
      
    )
  }
...
}

發(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 (
      
        
      
    )
  }
...
}

參考。。React.js pure render performance anti-pattern（抽空翻譯）

GPU云服務(wù)器云服務(wù)器 react實現(xiàn)輪播圖代理服務(wù)器的隱患 Pure linux 關(guān)閉防火墻的隱患

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78493.html

相關(guān)文章

react如何性能達(dá)到最大化(前傳)，暨react為啥非得使用immutable.js

摘要：主要講述我一步一步優(yōu)化性能的過程。。才能將的性能發(fā)揮到極致要是各位看官用過一段時間的，而沒有用那么本文非常適合你。那么多么浪費性能，好。。下一篇我講寫，，如何用一行代碼勝過千言萬語。。這篇文章呢。。主要講述我一步一步優(yōu)化react性能的過程。。為啥要用immutable.js呢。毫不夸張的說。有了immutable.js（當(dāng)然也有其他實現(xiàn)庫）。。才能將react的性能發(fā)揮到極致！要是...

jubincn 2019-08-19 17:22 評論0 收藏0
React組內(nèi)開發(fā)規(guī)范

摘要：部門組件開發(fā)規(guī)范適用范圍部門所有基于開發(fā)的包含組件，歡迎提意見。必須書寫，規(guī)定每個可接受屬性的類型，并對加以說明。更多的通用組件規(guī)范基本的書寫規(guī)范基礎(chǔ)上，更多的通用的組件開發(fā)規(guī)范。可以提供與組件內(nèi)部數(shù)據(jù)結(jié)構(gòu)緊密相關(guān)的操作方法。下面是我們部門總結(jié)的內(nèi)部開發(fā)規(guī)范（試行版本），歡迎提意見。部門FE React 組件開發(fā)規(guī)范適用范圍部門FE 所有基于React開發(fā)的（包含fcui2）組...

Paul_King 2019-08-19 17:53 評論0 收藏0
vue2.0源碼分析之理解響應(yīng)式架構(gòu)

摘要：分享前啰嗦我之前介紹過如何實現(xiàn)和。我們采用用最精簡的代碼，還原響應(yīng)式架構(gòu)實現(xiàn)以前寫的那篇源碼分析之如何實現(xiàn)和可以作為本次分享的參考。到現(xiàn)在為止，我們再看那張圖是不是就清楚很多了總結(jié)我非常喜歡，以上代碼為了好展示，都采用最簡單的方式呈現(xiàn)。分享前啰嗦我之前介紹過vue1.0如何實現(xiàn)observer和watcher。本想繼續(xù)寫下去，可是vue2.0橫空出世..所以直接看vue2.0吧...

chenatu 2019-08-20 11:57 評論0 收藏0
React-Redux源碼剖析

摘要：為了能夠更好的使用這個工具，今天就對它進(jìn)行一下源碼剖析。它內(nèi)部的關(guān)鍵代碼是在不指定的時候等于，這就意味著的源碼剖析到此結(jié)束，謝謝觀看當(dāng)然如果指定了剖析就還得繼續(xù)。好了，源碼剖析到此結(jié)束，謝謝觀看 React-Redux是用在連接React和Redux上的。如果你想同時用這兩個框架，那么React-Redux基本就是必須的了。為了能夠更好的使用這個工具，今天就對它進(jìn)行一下源碼剖析。 Pr...

Shimmer 2019-08-20 10:11 評論0 收藏0
React學(xué)習(xí)之漫談React

摘要：事件系統(tǒng)合成事件的綁定方式合成事件的實現(xiàn)機制事件委派和自動綁定。高階組件如果已經(jīng)理解高階函數(shù)，那么理解高階組件也很容易的。例如我們常見的方法等都是高階函數(shù)。對測試群眾來說，從質(zhì)量保證的角度出發(fā)，單元測試覆蓋率是事件系統(tǒng) 合成事件的綁定方式 `Test` 合成事件的實現(xiàn)機制：事件委派和自動綁定。 React合成事件系統(tǒng)的委托機制，在合成事件內(nèi)部僅僅是對最外層的容器進(jìn)行了綁定，并且依賴...

darkbug 2019-08-23 18:38 評論0 收藏0