Повторный рендеринг вложенных компонентов 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>

Меня смущает то, почему все экземпляры реакции продолжают размонтироваться и повторно монтироваться каждый раз, когда я нажимаю кнопку. Насколько я понимаю, «тип» экземпляров реакции не одинаков, потому что мы определяем компонент Todo локальновнутри компонента TodoList. Из-за этого мы в основном создаем новый компонент Todo каждый раз во время повторного рендеринга. Тем не менее, я чувствую, что мое объяснение является ответом очень высокого уровня (Кроме того, я даже не уверен, прав ли я), и я не уверен в деталях реализации более низкого уровня о том, как реагирующий согласователь управляет различиями между «тип» экземпляров реакции, когда у нас есть вложенные и невложенные компоненты. (Я использую термин «вложенный» и «не вложенный» в значении определения компонента реакции внутри другого компонента реакции, как в примере, который я привел).

Answer 1

Компонент Todo размонтирован, потому что TodoList перерисовывается при изменении состояния. Если вы держите компонент Todo вне компонента TodoList, он не будет размонтирован при изменении состояния.