Reactシリーズの0から1への実装：ライフサイクルとdiffの実装

この一連の記事では、React フレームワークのバックボーン コンテンツ (JSX/仮想 DOM/コンポーネント/ライフ サイクル/差分アルゴリズム/...) を整理しながら、(x)react を実装します

• 0 から1 React シリーズ - JSX と Virtual DOM

• React シリーズの 0 から 1 への実装 - コンポーネントと状態|小道具

ライフサイクル

まず、フローチャートで表される React のライフサイクルを確認しましょう。以下:

このフローチャートは、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 関数は次のとおりです: 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  // 标志符
}

次に、componentDidMount、ShouldComponentUpdate、componentWillUpdate、 を追加します。 ComponentDidUpdate メソッド

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

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

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

  componentWillMount() {
    console.log(&#39;componentWillMount&#39;)
  }

  componentDidMount() {
    console.log(&#39;componentDidMount&#39;)
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(&#39;shouldComponentUpdate&#39;, nextProps, nextState)
    return true
  }

  componentWillUpdate() {
    console.log(&#39;componentWillUpdate&#39;)
  }

  componentDidUpdate() {
    console.log(&#39;componentDidUpdate&#39;)
  }

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

  render() {
    console.log(&#39;render&#39;)
    return (
      <p>
        <button onClick={this.click.bind(this)}>Click Me!</button>
        <A count={this.state.count} />
      </p>
    )
  }
}

ReactDOM.render(
  <B />,
  document.getElementById(&#39;root&#39;)
)

ライフサイクルをテストします

次のユースケースをテストします:

componentWillMount
render
componentDidMount

ページがロードされると、出力結果は次のようになります:

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

ボタンがクリックされると、出力結果は次のようになります:

/**
 * 比较旧的 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
}

diff 実装

React における diff 実装の考え方は、古い仮想 dom と新しい仮想 dom を比較し、比較されたパッチ (パッチ) をページにレンダリングして、この記事が描画する部分的な更新を実現することです。 preact と simple-react の差分実装について説明します。全体的な考え方は、古い仮想 dom と新しい仮想 dom を比較することです。dom ノードは新しい仮想 dom ノードと比較され、異なる比較タイプに従って対応するロジックが呼び出されます (テキスト)。ノード、非テキスト ノード、カスタム コンポーネント) を使用して、ページの部分的なレンダリングを実現します。コードの全体的な構造は次のとおりです。

// 对比文本节点
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)
  }
}

非テキスト ノードを比較

非テキスト ノードを比較します。アイデアは、同じレベルにある古いノードを新しいノードに置き換えることです。コードは次のとおりです:

// 对比自定义组件
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）
  }
}

カスタム コンポーネントの比較

カスタム コンポーネントを比較するという考えは、新しいコンポーネントと古いコンポーネントが異なる場合は、古いコンポーネントを新しいコンポーネントに直接置き換えます。同様に、新しいコンポーネントのプロパティを古いコンポーネントに割り当て、新しいコンポーネントを取得する前後で古いコンポーネントの差分比較を行います。コードは次のとおりです:

// 对比子节点
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]) // 递归比较
  }
}

子ノードを走査して比較する

子ノードを走査して比較するには 2 つの戦略があります。1 つは同じレベルのノードのみを比較することであり、もう 1 つはノードにキー属性を追加することです。その目的は、空間の複雑さを軽減することです。コードは次のとおりです:

/**
 * 更改属性，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()
  }
}

Test

ライフ サイクル セクションでは、componentWillReceiveProps メソッドはまだ実行されていません。 setProps 関数を少し変更するだけです:

rrreee

ライフ サイクル セクションの最後のテスト ケースをテストしてみましょう:

• ライフサイクルテスト

• 差分テスト

プロジェクトアドレス、pr方法について

関連記事:

Reactコンポーネントのライフサイクルインスタンス分析

詳細React コンポーネントのライフサイクルの説明

関連ビデオ:

仮想 dom-React フレームワーク ビデオ チュートリアル

🎜

以上がReactシリーズの0から1への実装：ライフサイクルとdiffの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。