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

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

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

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

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

發(fā)現(xiàn)一個(gè)問(wèn)題，對(duì)于Person這個(gè)子組件來(lái)說(shuō)，在父組件re－render的時(shí)候，即使Person得前后兩個(gè)props都沒(méi)改變，它依舊會(huì)re－render。。即使用immutable.js也不好使。。。
原來(lái)啊，父組件每次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 (
      
        
      
    )
  }
...
}

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

chenatu 2019-08-20 11:57 評(píng)論0 收藏0
React-Redux源碼剖析

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

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

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

darkbug 2019-08-23 18:38 評(píng)論0 收藏0