從 0 到 1 實作 React 系列 —— 3.生命周期和 diff 算法

看源碼一個痛處是會陷進理不順主幹的困局中，本系列文章在實作一個 (x)react 的同時理順 React 架構的主幹内容(JSX/虛拟DOM/元件/生命周期/diff算法/setState/ref/...)

從 0 到 1 實作 React 系列 —— JSX 和 Virtual DOM
從 0 到 1 實作 React 系列 —— 元件和 state|props
從 0 到 1 實作 React 系列 —— 生命周期和 diff 算法
從 0 到 1 實作 React 系列 —— 優化 setState 和 ref 的實作

生命周期

先來回顧 React 的生命周期，用流程圖表示如下：

從 0 到 1 實作 React 系列 —— 3.生命周期和 diff 算法

該流程圖比較清晰地呈現了 react 的生命周期。其分為 3 個階段 —— 生成期，存在期，銷毀期。

因為生命周期鈎子函數存在于自定義元件中，将之前 _render 函數作些調整如下：

// 原來的 _render 函數，為了将職責拆分得更細，将 virtual dom 轉為 real dom 的函數單獨抽離出來
function vdomToDom(vdom) {
  if (_.isFunction(vdom.nodeName)) {        // 為了更加友善地書寫生命周期邏輯，将解析自定義元件邏輯和一般 html 标簽的邏輯分離開
    const component = createComponent(vdom) // 構造元件
    setProps(component)                     // 更改元件 props
    renderComponent(component)              // 渲染元件，将 dom 節點指派到 component
    return component.base                   // 傳回真實 dom
  }
  ...
}

我們可以在 setProps 函數内（渲染前）加入

componentWillMount

，

componentWillReceiveProps

方法，setProps 函數如下：

function setProps(component) {
  if (component && component.componentWillMount) {
    component.componentWillMount()
  } else if (component.base && component.componentWillReceiveProps) {
    component.componentWillReceiveProps(component.props) // 後面待實作
  }
}

而後我們在 renderComponent 函數内加入

componentDidMount

、

shouldComponentUpdate

、

componentWillUpdate

、

componentDidUpdate

方法

function renderComponent(component) {
  if (component.base && component.shouldComponentUpdate) {
    const bool = component.shouldComponentUpdate(component.props, component.state)
    if (!bool && bool !== undefined) {
      return false // shouldComponentUpdate() 傳回 false，則生命周期終止
    }
  }
  if (component.base && component.componentWillUpdate) {
    component.componentWillUpdate()
  }

  const rendered = component.render()
  const base = vdomToDom(rendered)

  if (component.base && component.componentDidUpdate) {
    component.componentDidUpdate()
  } else if (component && component.componentDidMount) {
    component.componentDidMount()
  }

  if (component.base && component.base.parentNode) { // setState 進入此邏輯
    component.base.parentNode.replaceChild(base, component.base)
  }

  component.base = base  // 标志符
}

測試生命周期

測試如下用例：

class A extends Component {
  componentWillReceiveProps(props) {
    console.log('componentWillReceiveProps')
  }

  render() {
    return (
      <div>{this.props.count}</div>
    )
  }
}

class B extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 1
    }
  }

  componentWillMount() {
    console.log('componentWillMount')
  }

  componentDidMount() {
    console.log('componentDidMount')
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentWillUpdate() {
    console.log('componentWillUpdate')
  }

  componentDidUpdate() {
    console.log('componentDidUpdate')
  }

  click() {
    this.setState({
      count: ++this.state.count
    })
  }

  render() {
    console.log('render')
    return (
      <div>
        <button onClick={this.click.bind(this)}>Click Me!</button>
        <A count={this.state.count} />
      </div>
    )
  }
}

ReactDOM.render(
  <B />,
  document.getElementById('root')
)

頁面加載時輸出結果如下：

componentWillMount
render
componentDidMount

點選按鈕時輸出結果如下：

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

diff 的實作

在 react 中，diff 實作的思路是将新老 virtual dom 進行比較，将比較後的 patch（更新檔）渲染到頁面上，進而實作局部重新整理；本文借鑒了 preact 和 simple-react 中的 diff 實作，總體思路是将舊的 dom 節點和新的 virtual dom 節點進行了比較，根據不同的比較類型（文本節點、非文本節點、自定義元件）調用相應的邏輯，進而實作頁面的局部渲染。代碼總體結構如下：

/**
 * 比較舊的 dom 節點和新的 virtual dom 節點：
 * @param {*} oldDom  舊的 dom 節點
 * @param {*} newVdom 新的 virtual dom 節點
 */
function diff(oldDom, newVdom) {
  ...
  if (_.isString(newVdom)) {
    return diffTextDom(oldDom, newVdom)   // 對比文本 dom 節點
  }

  if (oldDom.nodeName.toLowerCase() !== newVdom.nodeName) {
    diffNotTextDom(oldDom, newVdom)       // 對比非文本 dom 節點
  }

  if (_.isFunction(newVdom.nodeName)) {
    return diffComponent(oldDom, newVdom) // 對比自定義元件
  }

  diffAttribute(oldDom, newVdom)          // 對比屬性

  if (newVdom.children.length > 0) {
    diffChild(oldDom, newVdom)            // 周遊對比子節點
  }

  return oldDom
}

下面根據不同比較類型實作相應邏輯。

對比文本節點

首先進行較為簡單的文本節點的比較，代碼如下：

// 對比文本節點
function diffTextDom(oldDom, newVdom) {
  let dom = oldDom
  if (oldDom && oldDom.nodeType === 3) {  // 如果老節點是文本節點
    if (oldDom.textContent !== newVdom) { // 這裡一個細節：textContent/innerHTML/innerText 的差別
      oldDom.textContent = newVdom
    }
  } else {                                // 如果舊 dom 元素不為文本節點
    dom = document.createTextNode(newVdom)
    if (oldDom && oldDom.parentNode) {
      oldDom.parentNode.replaceChild(dom, oldDom)
    }
  }
  return dom
}

對比非文本節點

對比非文本節點，其思路為将同層級的舊節點替換為新節點，代碼如下：

// 對比非文本節點
function diffNotTextDom(oldDom, newVdom) {
  const newDom = document.createElement(newVdom.nodeName);
  [...oldDom.childNodes].map(newDom.appendChild) // 将舊節點下的元素添加到新節點下
  if (oldDom && oldDom.parentNode) {
    oldDom.parentNode.replaceChild(oldDom, newDom)
  }
}

對比自定義元件

對比自定義元件的思路為：如果新老元件不同，則直接将新元件替換老元件；如果新老元件相同，則将新元件的 props 賦到老元件上，然後再對獲得新 props 前後的老元件做 diff 比較。代碼如下：

// 對比自定義元件
function diffComponent(oldDom, newVdom) {
  if (oldDom._component && (oldDom._component.constructor !== newVdom.nodeName)) { // 如果新老元件不同，則直接将新元件替換老元件
    const newDom = vdomToDom(newVdom)
    oldDom._component.parentNode.insertBefore(newDom, oldDom._component)
    oldDom._component.parentNode.removeChild(oldDom._component)
  } else {
    setProps(oldDom._component, newVdom.attributes) // 如果新老元件相同，則将新元件的 props 賦到老元件上
    renderComponent(oldDom._component)              // 對獲得新 props 前後的老元件做 diff 比較（renderComponent 中調用了 diff）
  }
}

周遊對比子節點

周遊對比子節點的政策有兩個：一是隻比較同層級的節點，二是給節點加上 key 屬性。它們的目的都是降低空間複雜度。代碼如下：

// 對比子節點
function diffChild(oldDom, newVdom) {
  const keyed = {}
  const children = []
  const oldChildNodes = oldDom.childNodes
  for (let i = 0; i < oldChildNodes.length; i++) {
    if (oldChildNodes[i].key) { // 将含有 key 的節點存進對象 keyed
      keyed[oldChildNodes[i].key] = oldChildNodes[i]
    } else {                    // 将不含有 key 的節點存進數組 children
      children.push(oldChildNodes[i])
    }
  }

  const newChildNodes = newVdom.children
  let child
  for (let i = 0; i < newChildNodes.length; i++) {
    if (keyed[newChildNodes[i].key]) {  // 對應上面存在 key 的情形
      child = keyed[newChildNodes[i].key]
      keyed[newChildNodes[i].key] = undefined
    } else {                            // 對應上面不存在 key 的情形
      for (let j = 0; j < children.length; j++) {
        if (isSameNodeType(children[i], newChildNodes[i])) { // 如果不存在 key，則優先找到節點類型相同的元素
          child = children[i]
          children[i] = undefined
          break
        }
      }
    }
    diff(child, newChildNodes[i]) // 遞歸比較
  }
}

測試

在生命周期的小節中，componentWillReceiveProps 方法還未跑通，稍加修改 setProps 函數即可：

/**
 * 更改屬性，componentWillMount 和 componentWillReceiveProps 方法
 */
function setProps(component, attributes) {
  if (attributes) {
    component.props = attributes // 這段邏輯對應上文自定義元件比較中新老元件相同時 setProps 的邏輯
  }

  if (component && component.base && component.componentWillReceiveProps) {
    component.componentWillReceiveProps(component.props)
  } else if (component && component.componentWillMount) {
    component.componentWillMount()
  }
}

來測試下生命周期小節中最後的測試用例：

生命周期測試

從 0 到 1 實作 React 系列 —— 3.生命周期和 diff 算法

diff 測試

從 0 到 1 實作 React 系列 —— 3.生命周期和 diff 算法

項目位址，關于如何 pr

轉載于:https://www.cnblogs.com/MuYunyun/p/9375560.html

從 0 到 1 實作 React 系列 —— 3.生命周期和 diff 算法

生命周期

測試生命周期

diff 的實作

對比文本節點

對比非文本節點

對比自定義元件

周遊對比子節點

測試

繼續閱讀

七牛雲-C#SDK-上傳-前期準備

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

測試面試題整理

layui多任務上傳添加進度條