Things I Learned (React)

Latest Props in React Fiber🔗

• React

ReactDOM 在创建 DOM 元素的时候，会将 Fiber 信息也存储到 DOM 节点上（参考之前的文章）。但是需要注意的一点是，从 Fiber 上拿到的 Props 不一定是最新的数据。特别是对于使用 React Hooks 的情况来说，需要额外小心。举例来说：

const App = () => {
  const btn = React.useRef(null);
  const [value, setValue] = React.useState("");
  function onChange(event) {
    setValue(event.target.value);
  }
  function onClick() {
    if (!btn.current) return;
    const fiberKey = Object.keys(btn.current).filter((key) =>
      key.startsWith("__reactInternalInstance")
    )[0];
    if (!fiberKey) return;
    const fiber = btn.current[fiberKey];
    console.log(fiber.memoizedProps.onClick.valueInContext);
  }
  onClick.valueInContext = value;
  return (
    <form>
      <input onChange={onChange} value={value}>
      <button
        ref={btn}
        type="submit"
        onClick={onClick}
      >
        输入内容后点我
      </button>
    </form>
  );
};

在输入框输入一段文字之后点击按钮，可以看到最终在 console 输出的内容并不是完整的输入内容。比如，输入 12345 但是在 console 只输出了 1234。通过阅读 React 中对于事件处理的代码可以发现，在获取当前监听事件的时候（这里的 getListener 函数），使用了 getFiberCurrentPropsFromNode 这个函数，而这个函数的定义方法在这里。可以看到，使用的是另一个 DOM 节点上的字段：'__reactEventHandlers$' + randomKey。

因此，上面的代码只需要稍作调整，就可以正常工作了：

const App = () => {
  const btn = React.useRef(null);
  const [value, setValue] = React.useState("");
  function onChange(event) {
    setValue(event.target.value);
  }
  function onClick() {
    if (!btn.current) return;
    const propsKey = Object.keys(btn.current).filter((key) =>
      // ** 主要改动点 **
      key.startsWith("__reactEventHandlers")
    )[0];
    if (!propsKey) return;
    const props = btn.current[propsKey];
    console.log(props.onClick.valueInContext);
  }
  onClick.valueInContext = value;
  return (
    <form>
      <input onChange={onChange} value={value}>
      <button
        ref={btn}
        type="submit"
        onClick={onClick}
      >
        输入内容后点我
      </button>
    </form>
  );
};

对于 __reactEventHandlers 字段的更新，可以参考 ReactDOM 给 Reconciler 配置的两个 API：createInstance 和 commitUpdate（代码在这里）。

当然，对于 Class Component 来说，因为方法一般都是固定的成员方法，因此 __reactEventHandlers 和 __reactInternalInstance 记录下的内容没有什么差别。

另外需要注意的一点是，在 React 最新版本中，__reactInternalInstance$xxx 改名叫 __reactFiber$xxx；而 __reactEventHandlers$xxx 改名叫 __reactEvents$xxx。

React Capture Event🔗

• React

React 为了消除不同浏览器上的 Event 差异，设计了一套合成事件（SyntheticEvent）。一般常用的有 onClick，onKeyDown 等等。

类似于原生的浏览器事件，React 的合成事件也有捕获和冒泡两个不同的阶段。一般常用的 onClick 是在冒泡阶段的回调函数，对应的捕获阶段的回调函数是 onClickCapture。

需要注意的是，React 合成事件的设计，是在顶层元素上捕获事件，然后通过 React 内部的机制生成对应的合成事件，并转发给 React 元素。其中的捕获和冒泡是由 React 自身来维护的。通过下面的例子，可以直观的看到 React 合成事件和原生浏览器的事件之间的执行顺序。

假设有下面一段 HTML 代码：

<div id="not-react-dom-outer">
  <div id ="not-react-dom-inner">
    <div id="app"></div>
  </div>
</div>

以及下面这段配套的 JavaScript 代码：

const outer = document.querySelector('#not-react-dom-outer');
outer.addEventListener('click', function(e) {
  console.log('not-react-dom-outer (bubble)');
}, false);
outer.addEventListener('click', function(e) {
  console.log('not-react-dom-outer (capture)');
}, true);
 
const inner = document.querySelector('#not-react-dom-inner');
inner.addEventListener('click', function(e) {
  console.log('not react div inner (bubble)');
}, false);
inner.addEventListener('click', function(e) {
  console.log('not react div inner (capture)');
}, true);

const Button = () => (
  <div
    onClick={() => console.log('react div (bubble)')}
    onClickCapture={() => console.log('react div (capture)')}
  >
    <button
      onClick={() => console.log('react button (bubble)')}
      onClickCapture={() => console.log('react button (capture)')}
    >
      Click Me
    </button>
  </div>
);

ReactDOM.render(<Button />, document.getElementById('app'));

那么，在点击了 <button> 按钮之后，控制台的输出顺序为：

not-react-dom-outer (capture)
not react div inner (capture)
not react div inner (bubble)
not-react-dom-outer (bubble)
react div (capture)
react button (capture)
react button (bubble)
react div (bubble)

执行顺序上是先完成了从捕获到冒泡的所有原生事件，然后再执行从捕获到冒泡的所有 React 合成事件。

关于合成事件，可以参考官方给出的文档。