嵌套 React 组件重新渲染和 React 协调

Question

我正在努力理解处理嵌套反应组件时协调的工作原理。下面是我的index.js 代码

import React from "react";
import { render } from "react-dom";
import { useState, useEffect } from "react";

const TodoList = ({ todos }) => {
  useEffect(() => {
    console.log("mounted List")

    return () => {
      console.log("unmounted List")
    }
  }, [])

  const Todo = ({ txt }) => {
    useEffect(() => {
      console.log("mounted Todo")

      return () => {
        console.log("unmounted Todo")
      }
    }, [])

    return (
      <li>
        {txt}
      </li>
    );
  };
  return todos.map(todo => <Todo {...todo} />);
};

const App = () => {
  const [todos, setIt] = useState([{ txt: "foo" }, { txt: "bar" }, { txt: "baz" }])
  return (
    <>
      <button onClick={() => setIt(todos.concat({ txt: 'new' }))}>Click</button>
      <TodoList todos={todos} />
    </>)
}

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

下面是index.html

<div id="root"></div>

令我困惑的部分是为什么每次我单击按钮时所有反应实例都会继续卸载和重新安装。我的理解是，react 实例的“类型”并不相同，因为我们在 TodoList 组件内部定义了 Todo 组件本地范围。因此，我们基本上每次在重新渲染期间都会创建一个新的 Todo 组件。然而，我觉得我的解释是一个非常高级的答案（另外，我什至不确定我是否正确），并且我不确定关于反应协调器如何管理之间的区别的较低级别的实现细节当我们有嵌套组件和非嵌套组件时，反应实例的“类型”。 （我使用术语“嵌套”和“非嵌套”来表示在另一个反应组件内部定义一个反应组件，就像我给出的示例一样）。

Answer 1

Todo 组件已卸载，因为状态更改时 TodoList 会重新呈现。
如果将 Todo 组件保留在 TodoList 组件之外，一旦状态发生变化，它就不会卸载。