React 组件实例的协调

Question

我一直在尝试理解反应协调，但对比较算法如何工作的一些细节感到非常困惑。到目前为止，我了解到每当进行更新时，我们都会创建一个新的反应元素树并将其与之前的反应元素树进行比较。 diffing 算法设法找到新旧反应元素树之间的差异。算法的 2 个假设。相同级别和类型的元素不需要卸载和重新安装，并且键提供了一种不通过索引来识别子元素的方法。

让我困惑的部分是如何在两个反应实例之间进行比较。例如，当比较旧的 React 元素树中的 和新的 React 元素树中的 时（假设 在创建新树时， 替换了 ），比较算法是否只是比较两个 React 元素的“type”属性？因此，如果两者具有相同的“类型”，那么 diffing 算法不会考虑卸载和安装到 DOM 中？

Answer 1

比较算法是否简单地比较两个反应元素的“类型”
属性？

是的，来自文档：

只要根元素有不同的类型，React就会拆掉
旧树并从头开始构建新树。从 到
，或从

到 ，或从 > 到

- 任意
其中将导致全面重建。

另一个你的问题：

因此，如果两者具有相同的“类型”，则差异算法不会
考虑卸载并安装到 DOM 中？

是的，在这种情况下，React 只是更新现有实例。在组件更新期间，实例保持不变，并且状态在渲染之间保持不变。

---

您可以在下面的示例中看到：

• 我们渲染 A 的第一个位置，当我们将其替换为另一个 A 时（因为类型相同），它不会被卸载。
• 我们使用 A 的第二个地方，一旦我们将其替换为 B，react 就会卸载 A。

let A = (props) => {
  React.useEffect(() => {
    console.log('Mounted A', props);
    return () => {
      console.log('Unmounted A', props);
    };
  }, []);
  return <div>This is A: {props.tmp}</div>;
};

let B = (props) => {
  React.useEffect(() => {
    console.log('Mounted B', props);
    return () => {
      console.log('Unmounted B', props);
    };
  }, []);
  return <div>This is B</div>;
};

  function App() {
  let [tmp, setTemp] = React.useState(0);
  return (
    <div
      onClick={() => {
        setTemp(tmp + 1);
      }}
    >
      {tmp % 2 == 0 ? <A id="first A"/> : <A id="second A"/>}
      {tmp % 2 == 0 ? <A id="third A"/> : <B />}
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

ReactDOM.render(<App />,document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>