成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jubincn / 3344人閱讀

摘要：主要講述我一步一步優(yōu)化性能的過程。。才能將的性能發(fā)揮到極致要是各位看官用過一段時(shí)間的，而沒有用那么本文非常適合你。那么多么浪費(fèi)性能，好。。下一篇我講寫，，如何用

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

1,對(duì)于react的來說，如果父組件有多個(gè)子組件

想象一下這種場(chǎng)景，一個(gè)父組件下面一大堆子組件。然后呢，這個(gè)父組件re－render。是不是下面的子組件都得跟著re－render?？墒呛芏嘧咏M件里面是冤枉的啊??！很多子組件的props 和 state 然而并沒有改變?。。‰m然virtual dom 的diff 算法很快。。但是性能也不是這么浪費(fèi)的?。?！下面我們上代碼

1.原始代碼如下

以下是父組件代碼。。負(fù)責(zé)輸入name 和 age 然后循環(huán)顯示name 和 age

   export default class  extends Component {
      constructor(props){
        super(props)
        this.state={
          name:"",
          age :"",
          persons:[]
        }
      }
      render() {
        const {name,age,persons} = this.state
        return (
          

            姓名:
            年齡:
            
            {persons.map((person,index)=>(
              
            ))}
          

        )
      }
      _handleChange(event){
        this.setState({[event.target.name]:event.target.value})
      }
      _handleClick(){
        const {name,age} = this.state
        this.setState({
          name:"",
          age :"",
          persons:this.state.persons.concat([{name:name,age:age}])
        })
    
      }
    }

以下是子組件代碼單純的顯示name和age而已

class Person  extends Component {
  componentWillReceiveProps(newProps){
    console.log(`我新的props的name是${newProps.name}，age是${newProps.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是我要re-render了`);
  }
  render() {
    const {name,age} = this.props;

      return (
        

          姓名:
          {name}
           age:
          {age}
        

      )
  }
}

運(yùn)行起來長(zhǎng)下圖這個(gè)樣

好那么問題來了。。我們看一下控制臺(tái)

天哪，，這么多次re-reder..細(xì)細(xì)觀看。。不難發(fā)現(xiàn)。要re-render這么多次。。父組件一re-render,子組件就跟著re-render啊。。那么多么浪費(fèi)性能，好。。PureRenderMixin出場(chǎng)

2,PureRenderMixin

因?yàn)樵塾玫氖莈s2015的 Component，所以已經(jīng)不支持mixin了。。不過沒關(guān)系，可以用
HOCs,這個(gè)比mixin還更受推崇呢。。我有空回用代碼來展示他倆的異同，鑒于不是本文重點(diǎn)，，大家可以看這兩篇文章了解下React Mixin 的前世今生 和Mixins Are Dead. Long Live Composition
所以在這里我們用Pure render decorator代替PureRenderMixin，那么代碼如下

import pureRender from "pure-render-decorator"
...

@pureRender
class Person  extends Component {
  render() {
    console.log("我re-render了");
    const {name,age} = this.props;

      return (
        

          姓名:
          {name}
           age:
          {age}
        

      )
  }
}

加個(gè)這東西就完事了？？看上去咋這么不令人信服啊。。不管怎樣。。試試吧

果然可以做到pure render。。在必須render 的時(shí)候才render
好我們看看它的神奇之處

@pureRender

是es7的Decorators語法。上面這么寫就和下面這么寫一樣

class PersonOrigin  extends Component {
  render() {
    console.log("我re-render了");
    const {name,age} = this.props;

      return (
        

          姓名:
          {name}
           age:
          {age}
        

      )
  }
}
const Person = pureRender(PersonOrigin)

pureRender其實(shí)就是一個(gè)函數(shù)，接受一個(gè)Component。把這個(gè)Component搞一搞，返回一個(gè)Component
看他pureRender的源代碼就一目了然

function shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this, nextProps, nextState);
}

function pureRende(component) {
  component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

pureRender很簡(jiǎn)單，就是把傳進(jìn)來的component的shouldComponentUpdate給重寫掉了，原來的shouldComponentUpdate，無論怎樣都是return ture，現(xiàn)在不了，我要用shallowCompare比一比，shallowCompare代碼及其簡(jiǎn)單，如下

function shallowCompare(instance, nextProps, nextState) {
  return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}

一目了然。分別拿現(xiàn)在props&state和要傳進(jìn)來的props&state，用shallowEqual比一比，要是props&state都一樣的話，就return false，是不是感覺很完美？不。。這才剛剛開始，問題就出在shallowEqual上了

3,shallowEqual的問題 shallowEqual引起的bug

很多時(shí)候，父組件向子組件傳props的時(shí)候，可能會(huì)傳一個(gè)復(fù)雜類型，比如我們改下。

  render() {
    const {name,age,persons} = this.state
    return (
      

...省略.....
        {persons.map((person,index)=>(
          
        ))}
      

    )
  }

person是一個(gè)復(fù)雜類型。。這就埋下了隱患，，在演示隱患前，我們先說說shallowEqual，是個(gè)什么東西，shallowEqual其實(shí)只比較props的第一層子屬性是不是相同，就像上述代碼，props 是如下

{
    detail:{
       name:"123",
       age:"123"}
}

他只會(huì)比較props.detail ===nextProps.detail
那么問題來了，上代碼
如果我想修改detail的時(shí)候考慮兩種情況

情況一，我修改detail的內(nèi)容，而不改detail的引用

這樣就會(huì)引起一個(gè)bug，比如我修改detail.name,因?yàn)閐etail的引用沒有改，所以
props.detail ===nextProps.detail 還是為true。。
所以我們?yōu)榱税踩鹨姳仨毿薷膁etail的引用，（redux的reducer就是這么做的）

情況二，我修改detail的引用

這種雖然沒有bug，但是容易誤殺，比如如果我新舊兩個(gè)detail的內(nèi)容是一樣的，豈不是還要，render。。所以還是不完美，，你可能會(huì)說用 深比較就好了，，但是 深比較及其消耗性能，要用遞歸保證每個(gè)子元素一樣,

這只是說沒有用immutable引起各種?。。下一篇我講寫，，如何用immutable.js..

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78476.html

相關(guān)文章

  • vue2.0源碼分析之理解響應(yīng)式架構(gòu)

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

    chenatu 評(píng)論0 收藏0

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

    摘要：即使用也不好使。。。原來啊，父組件每次，都會(huì)執(zhí)行這樣的引用每次都會(huì)改。。所以前后兩次其實(shí)是不一樣的。。那怎么辦把去掉不行還必須得用真正的答案是讓父組件每次不執(zhí)行，直接提前在執(zhí)行好，修改之后改成這樣參考。。 pure render 我就不多說了，附上我另一片文章鏈接 react如何性能達(dá)到最大化(前傳)不論你用不用immutable，只要你想達(dá)到pure render，下面值得你注意??！...

    LiveVideoStack 評(píng)論0 收藏0

  • React 的性能優(yōu)化（一）當(dāng) PureComponent 遇上 ImmutableJS

    摘要：四是在年出的持久性數(shù)據(jù)結(jié)構(gòu)的庫，持久性指的是數(shù)據(jù)一旦創(chuàng)建，就不能再被更改，任何修改或添加刪除操作都會(huì)返回一個(gè)新的對(duì)象。避免大量使用操作，這樣會(huì)浪費(fèi)性能。盡量將設(shè)計(jì)成扁平狀的。 一、痛點(diǎn) 在我們的印象中，React 好像就意味著組件化、高性能，我們永遠(yuǎn)只需要關(guān)心數(shù)據(jù)整體，兩次數(shù)據(jù)之間的 UI 如何變化，則完全交給 React Virtual Dom 的 Diff 算法 去做。以至于我們很...

    plus2047 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見，通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    neuSnail 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見，通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    wyk1184 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<