嵌套React组件重新渲染和React重新定义

Question

在处理嵌套的react组件时，我很难理解协调是如何工作的。以下是我的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实例都会继续卸载和重新安装。我的理解是；类型"；的react实例并不相同，因为我们在TodoList组件内部定义了Todo组件本地作用域。因此，在重新渲染期间，我们基本上每次都会创建一个新的Todo组件。然而，我觉得我的解释是一个非常高层次的答案(此外，我甚至不确定我是否正确(，并且我不确定关于react recommender如何管理"；类型"；当我们有嵌套组件和非嵌套组件时，react实例的数量。(我使用术语"嵌套"one_answers"非嵌套"来定义另一个反应组件内部的反应组件，就像我给出的例子一样(。

Answer 1

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