英文

1. invoke 调用

文章

作者先添加了一个state,然后加了一个按钮，点击后setState没有任何反应，这是因为添加的click事件没有被调用，实际是点击事件没有添加。这里就可以看出fiber tree和实际dom树之间的关系了。所以下面手动添加一下代码中定义的其他属性

 createInstance: function (
    type,
    newProps,
    rootContainerInstance,
    currentHostContext,
    workInProgress
  ) {
    const element = document.createElement(type);
    element.className = newProps.className || "";
    element.style = newProps.style;
    // 这里添加代码中定义的点击事件
    if (newProps.onClick) {
      element.addEventListener("click", newProps.onClick);
    }
    return element;
  },

然后点击后报错，缺少prepareUpdate,commitTextUpdate,先依次在hostConfig中添加

  /**
   * 提示reconciler该节点是否需要更新
   */
  prepareUpdate(
    instance,
    type,
    oldProps,
    newProps,
    rootContainerInstance,
    currentHostContext
  ) {
    // 一般来说会返回一个对象，决定哪些信息将会更新，但是如果返回为null,react将会根据他的算法进行更新
    return;
  },
  /**
   * 进行实际的dom更新
   * @param {*} textInstance
   * @param {*} oldText
   * @param {*} newText
   */
  commitTextUpdate: function (textInstance, oldText, newText) {
    textInstance.nodeValue = newText;
  },

剩下的就是作者描述一些其他的方法，这篇文章看下来的收获主要还是理解了你写的jsx代码是怎么变成react dom，更新时是怎么遍历fiber tree，然后再进行渲染。更细节的地方还是需要看react的源代码，后面安排时间整理一下react的源码阅读。

之所以看这篇文章就是觉得react-three-fiber这个库用起来太方便了，想看看这个是怎么实现的。

参考

原文链接