Когда реагируют, выполните componentDidMount и componentWillUnmount

Component — это новая функция каждый раз, когда App визуализируется, поэтому <Component name = "one" /> тоже каждый раз перемонтируется, они считаются разными компонентами.

Результатом вызова Component("two") является <TestMount name = {"two"} />, TestMount остается неизменным при каждом рендеринге App, поэтому он не перемонтируется.

Component является недопустимым компонентом для того, для чего он используется, для передачи name строки в качестве name реквизита для TestMount компонента, потому что параметр name не является строкой, а объект реквизита, когда Component используется как <Component name = "one" />. name => <TestMount name = {name} /> — это функция рендеринга, для ясности предпочтительнее назвать его соответственно, например, renderTestMount, потому что компоненты не должны вызываться напрямую, как Component("two").

В случае, если предполагается, что функция используется как компонент или функция рендеринга взаимозаменяемо, сигнатура должна быть изменена на ({ name }) => <TestMount name = {name} />.

Ожидаемое поведение может быть достигнуто для <Component name = "one" /> путем запоминания Component:

const Component = useCallback(({ name }) => <TestMount name = {name} />, []);

Но так как Component не зависит от области App, правильный способ — определить его снаружи:

const Component = ({ name }) => <TestMount name = {name} />;

function App() {...}

Например, по этой причине React Router Route имеет отдельные реквизиты component и render для компонента и функция рендеринга. Это позволяет предотвратить ненужные перемонтирования для компонентов маршрута, которые необходимо определять динамически в текущей области.

Ключом к этой проблеме является разница между компонентом React и элементом React, короче говоря, React умный с element не Component

Компонент против элемента

Компонент — это шаблон, используемый для создания элемента с помощью операции <>. На мой взгляд, <> очень похож на new оператора в мире ООП.

Как React выполняет обновление между рендерами

Каждый раз, когда вызывается метод render (или функциональный компонент). Новый элемент создается с помощью <>, однако React достаточно умен, чтобы сказать, что элемент, созданный между рендерами, на самом деле один и тот же, то есть он был создан ранее и может быть повторно использован пока элемент создается одним и тем же компонентом

Как насчет другого компонента

Однако, когда идентификация компонента, используемого для создания элемента, изменяется (даже если компоненты выглядят одинаково), React считает, что появилось что-то новое, поэтому он удаляет (размонтирует) предыдущий элемент и добавляет (монтирует) новый. Таким образом, вызывается componentDidMount или componentWillUnmount.

Как сбивает с толку

Думаю, у нас есть Component, и когда мы генерируем element с помощью <Component />, реакция может указать одни и те же элементы, потому что они генерируются одним и тем же Component Однако HOCComponent=()=><Component />; element= <HOCComponent /> каждый раз, когда генерируется element, используется другой Component. на самом деле это HOC, построенный динамически. Поскольку HOC создается динамически внутри функции рендеринга, на первый взгляд это может сбить с толку.

Это правда

Я так и не нашел официального документа об изложенной выше идее. Однако приведенного ниже кода достаточно, чтобы доказать

function TestMount(props) {
  useEffect(() => {
    console.info("componentDidMount", props.name);
    return () => {
      console.info("componentWillUnount", props.name);
    };
  }, []);
  return <h1>Test content {" " + JSON.stringify(props.name)}</h1>;
}

function Update({ click }) {
  return <button onClick = {click}>Update</button>;
}

let _Component;
function cacheComponent(C) {
  if (C && !_Component) {
    _Component = C;
  }
  return _Component || null;
}

const CacheComponent2 = once(({ name }) => <TestMount name = {name} />, []);

function App() {
  const [count, setCount] = useState(0);
  // can be used as a HOC of TestMount or a plain function returnnung a react element
  const Component = name => <TestMount name = {name} />;
  const CacheComponent1 = cacheComponent(Component);
  const CacheComponent3 = useCallback(
    ({ name }) => <TestMount name = {name} />,
    []
  );

  return (
    <div className = "App">
      <h1>{count}</h1>
      {/* used as HOC */}
      <Component name = "one" />
      {/* used as function returnning the element */}
      {Component("two")}
      <CacheComponent1 name = "three" />
      <CacheComponent2 name = "four" />
      <CacheComponent3 name = "five" />
      <Update click = {() => setCount(x => x + 1)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Также приведенный выше код предоставляет три различных способа избежать нежелательного монтирования/размонтирования. Все решения каким-то образом кэшируют личность HOC