React.js 小書(shū) Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作

Drinkey 發(fā)布于2019-08-21 17:32 / 3086人閱讀

摘要：一個(gè)組件的顯示形態(tài)由多個(gè)狀態(tài)決定的情況非常常見(jiàn)。我們順利地消除了手動(dòng)的操作。非一般的暴力，因?yàn)槊看味贾匦聵?gòu)造新增刪除元素，會(huì)導(dǎo)致瀏覽器進(jìn)行大量的重排，嚴(yán)重影響性能。下一節(jié)小書(shū)前端組件化三抽象出公共組件類我們把這個(gè)通用模式抽離到一個(gè)類當(dāng)中。

React.js 小書(shū) Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson3

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react/

看看上一節(jié)前端組件化（一）：從一個(gè)簡(jiǎn)單的例子講起我們的代碼，仔細(xì)留意一下 changeLikeText 函數(shù)，這個(gè)函數(shù)包含了 DOM 操作，現(xiàn)在看起來(lái)比較簡(jiǎn)單，那是因?yàn)楝F(xiàn)在只有 isLiked 一個(gè)狀態(tài)。由于數(shù)據(jù)狀態(tài)改變會(huì)導(dǎo)致需要我們?nèi)ジ马?yè)面的內(nèi)容，所以假想一下，如果你的組件依賴了很多狀態(tài)，那么你的組件基本全部都是 DOM 操作。

一個(gè)組件的顯示形態(tài)由多個(gè)狀態(tài)決定的情況非常常見(jiàn)。代碼中混雜著對(duì) DOM 的操作其實(shí)是一種不好的實(shí)踐，手動(dòng)管理數(shù)據(jù)和 DOM 之間的關(guān)系會(huì)導(dǎo)致代碼可維護(hù)性變差、容易出錯(cuò)。所以我們的例子這里還有優(yōu)化的空間：如何盡量減少這種手動(dòng) DOM 操作？

狀態(tài)改變 -> 構(gòu)建新的 DOM 元素更新頁(yè)面

這里要提出的一種解決方案：一旦狀態(tài)發(fā)生改變，就重新調(diào)用 render 方法，構(gòu)建一個(gè)新的 DOM 元素。這樣做的好處是什么呢？好處就是你可以在 render 方法里面使用最新的 this.state 來(lái)構(gòu)造不同 HTML 結(jié)構(gòu)的字符串，并且通過(guò)這個(gè)字符串構(gòu)造不同的 DOM 元素。頁(yè)面就更新了！聽(tīng)起來(lái)有點(diǎn)繞，看看代碼怎么寫(xiě)，修改原來(lái)的代碼為：

  class LikeButton {
    constructor () {
      this.state = { isLiked: false }
    }

    setState (state) {
      this.state = state
      this.el = this.render()
    }

    changeLikeText () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      this.el = createDOMFromString(`
        
      `)
      this.el.addEventListener("click", this.changeLikeText.bind(this), false)
      return this.el
    }
  }

其實(shí)只是改了幾個(gè)小地方：

render 函數(shù)里面的 HTML 字符串會(huì)根據(jù) this.state 不同而不同（這里是用了 ES6 的模版字符串，做這種事情很方便）。

新增一個(gè) setState 函數(shù)，這個(gè)函數(shù)接受一個(gè)對(duì)象作為參數(shù)；它會(huì)設(shè)置實(shí)例的 state，然后重新調(diào)用一下 render 方法。

當(dāng)用戶點(diǎn)擊按鈕的時(shí)候， changeLikeText 會(huì)構(gòu)建新的 state 對(duì)象，這個(gè)新的 state ，傳入 setState 函數(shù)當(dāng)中。

這樣的結(jié)果就是，用戶每次點(diǎn)擊，changeLikeText 都會(huì)調(diào)用改變組件狀態(tài)然后調(diào)用 setState ；setState 會(huì)調(diào)用 render ，render 方法會(huì)根據(jù) state 的不同重新構(gòu)建不同的 DOM 元素。

也就是說(shuō)，你只要調(diào)用 setState，組件就會(huì)重新渲染。我們順利地消除了手動(dòng)的 DOM 操作。

重新插入新的 DOM 元素

上面的改進(jìn)不會(huì)有什么效果，因?yàn)槟阕屑?xì)看一下就會(huì)發(fā)現(xiàn)，其實(shí)重新渲染的 DOM 元素并沒(méi)有插入到頁(yè)面當(dāng)中。所以在這個(gè)組件外面，你需要知道這個(gè)組件發(fā)生了改變，并且把新的 DOM 元素更新到頁(yè)面當(dāng)中。

重新修改一下 setState 方法：

...
    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = this.render()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }
...

使用這個(gè)組件的時(shí)候：

const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
component.onStateChange = (oldEl, newEl) => {
  wrapper.insertBefore(newEl, oldEl) // 插入新的元素
  wrapper.removeChild(oldEl) // 刪除舊的元素
}

這里每次 setState 都會(huì)調(diào)用 onStateChange 方法，而這個(gè)方法是實(shí)例化以后時(shí)候被設(shè)置的，所以你可以自定義 onStateChange 的行為。這里做的事是，每當(dāng) setState 中構(gòu)造完新的 DOM 元素以后，就會(huì)通過(guò) onStateChange 告知外部插入新的 DOM 元素，然后刪除舊的元素，頁(yè)面就更新了。這里已經(jīng)做到了進(jìn)一步的優(yōu)化了：現(xiàn)在不需要再手動(dòng)更新頁(yè)面了。

非一般的暴力，因?yàn)槊看?setState 都重新構(gòu)造、新增、刪除 DOM 元素，會(huì)導(dǎo)致瀏覽器進(jìn)行大量的重排，嚴(yán)重影響性能。不過(guò)沒(méi)有關(guān)系，這種暴力行為可以被一種叫 Virtual-DOM 的策略規(guī)避掉，但這不是本文所討論的范圍。

這個(gè)版本的點(diǎn)贊功能很不錯(cuò)，我可以繼續(xù)往上面加功能，而且還不需要手動(dòng)操作DOM。但是有一個(gè)不好的地方，如果我要重新另外做一個(gè)新組件，譬如說(shuō)評(píng)論組件，那么里面的這些 setState 方法要重新寫(xiě)一遍，其實(shí)這些東西都可以抽出來(lái)，變成一個(gè)通用的模式。

下一節(jié)《React.js 小書(shū) Lesson4 - 前端組件化（三）：抽象出公共組件類》我們把這個(gè)通用模式抽離到一個(gè)類當(dāng)中。