Implementierung der React-Serie von 0 auf 1: Implementierung von Lebenszyklus und Diff

Diese Artikelserie optimiert den Backbone-Inhalt des React-Frameworks (JSX/virtuelles DOM/Komponente/Lebenszyklus/Diff-Algorithmus/...) bei der Implementierung einer (x)react. 🎜>

• Implementierung der React-Serie von 0 auf 1 – JSX und Virtual DOM

• Implementierung der React-Serie von 0 auf 1 – Komponenten und Status|Requisiten

Lebenszyklus

Betrachten wir zunächst den Lebenszyklus von React, dargestellt durch ein Flussdiagramm wie folgt:

Dieses Flussdiagramm stellt den Lebenszyklus von React relativ klar dar. Es ist in drei Phasen unterteilt: Generationszeitraum, Existenzzeitraum und Zerstörungszeitraum.

Da die Lebenszyklus-Hook-Funktion in der benutzerdefinierten Komponente vorhanden ist, nehmen Sie einige Anpassungen an der vorherigen _render-Funktion wie folgt vor:

// 原来的 _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
  }
  ...
}

Wir können

in der setProps-Funktion hinzufügen (vor dem Rendern) , componentWillMount Methode, setProps-Funktion lautet wie folgt: componentWillReceiveProps

function setProps(component) {
  if (component && component.componentWillMount) {
    component.componentWillMount()
  } else if (component.base && component.componentWillReceiveProps) {
    component.componentWillReceiveProps(component.props) // 后面待实现
  }
}

Dann fügen wir

, componentDidMount, shouldComponentUpdate, componentWillUpdate Methode 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  // 标志符
}

Testlebenszyklus< hinzu die renderComponent-Funktion 🎜>

Testen Sie den folgenden Anwendungsfall:

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;)
)

Wenn die Seite geladen wird, ist das Ausgabeergebnis wie folgt:

componentWillMount
render
componentDidMount

Wenn auf die Schaltfläche geklickt wird, wird das Ausgabeergebnis angezeigt lautet wie folgt:

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Implementierung von Diff

In React besteht die Idee der Diff-Implementierung darin, den alten und neuen virtuellen Dom zu vergleichen und den verglichenen Patch auf der Seite zu rendern Um eine teilweise Aktualisierung zu erreichen, basiert dieser Artikel auf der Diff-Implementierung in preact und simple-react. Die allgemeine Idee besteht darin, den alten Dom-Knoten mit dem neuen virtuellen Dom-Knoten zu vergleichen und die entsprechende Logik gemäß verschiedenen Vergleichstypen aufzurufen (Textknoten, Nicht-Text-Knoten, benutzerdefinierte Komponente), um eine teilweise Darstellung der Seite zu erreichen. Die Gesamtstruktur des Codes ist wie folgt:

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

Im Folgenden wird die entsprechende Logik gemäß verschiedenen Vergleichstypen implementiert.

Textknoten vergleichen

Führen Sie zunächst einen einfacheren Vergleich von Textknoten durch. Der Code lautet wie folgt:

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

Nicht-Textknoten vergleichen

Nicht-Textknoten vergleichen -Textknoten, Die Idee besteht darin, alte Knoten auf derselben Ebene durch neue Knoten zu ersetzen. Der Code lautet wie folgt:

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

Benutzerdefinierte Komponenten vergleichen

Die Idee, benutzerdefinierte Komponenten zu vergleichen, ist : Wenn die alten und neuen Komponenten unterschiedlich sind, ersetzen Sie die alte Komponente direkt durch die neue Komponente. Wenn die alten und neuen Komponenten gleich sind, weisen Sie die Requisiten der neuen Komponente der alten Komponente zu und führen Sie dann einen Diff-Vergleich durch alte Komponenten vor und nach Erhalt der neuen Requisiten. Der Code lautet wie folgt:

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

Untergeordnete Knoten durchqueren und vergleichen

Es gibt zwei Strategien zum Durchlaufen und Vergleichen von untergeordneten Knoten: Die eine besteht darin, nur Knoten auf derselben Ebene zu vergleichen, und die andere darin um Schlüsselattribute zu Knoten hinzuzufügen. Ihr Zweck besteht darin, die Komplexität des Raums zu reduzieren. Der Code lautet wie folgt:

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

Test

Im Lebenszyklusabschnitt wurde die Methode „componentWillReceiveProps“ noch nicht durchlaufen. Ändern Sie einfach die Funktion „setProps“ leicht:

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

Testen Sie das Leben. Der letzte Testfall im Zyklusabschnitt:

Lebenszyklustest

Diff-Test

Projektadresse, Informationen zur PR

Verwandte Artikel:

Instanzanalyse des React-Komponentenlebenszyklus

Detaillierte Erklärung des React-Komponentenlebenszyklus

Ähnliche Videos:

Virtuell Video-Tutorial zum Dom-React-Framework

Das obige ist der detaillierte Inhalt vonImplementierung der React-Serie von 0 auf 1: Implementierung von Lebenszyklus und Diff. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!