React：如何检测相同的组件

Question

首先，抱歉我的英语不好！ （DeepL 翻译）

MyComponent 有一些“状态”，例如计数器并显示它。

在模式A中，当hiddenFlag切换时，第一个MyComponent的'state'被保留。 在模式 B 中，当隐藏标志切换时，第二个 MyComponent 的“状态”保持不变。

在这两种情况下，显示的MyComponent的数量不会根据hiddenFlag而改变。 React 如何检测相同的组件？

模式A：

return hiddenFlag ? (
  <div>
    <MyComponent />
  </div>
) : (
  <div>
    <MyComponent />
    <MyComponent />
  </div>
);

模式B：

return (
  <div>
    {!hiddenFlag && <MyComponent />}
    <MyComponent />
  </div>
);

我知道当组件状态发生变化时，React 有两个阶段“渲染阶段”和“提交阶段”。前一个阶段创建虚拟 DOM，后一个阶段重写与当前 DOM 相比发生变化的位置。

这是否意味着模式A的渲染阶段计算if分支时，也判断第一个MyComponent是同一个？

Answer 1

如果您希望保留特定组件，可以使用

key

属性来实现。 在下面的示例中，我创建了两个场景，并提供了计数器元素的键。通过这样做，在场景 A 中，我能够告诉 React 第二个计数器是我想要保留的计数器。

const { useState } = React;

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(p => p + 1)}>{count}</button>;
}

function App(props) {
  const [hidden, setHidden] = useState(false);
  return (
    <div className='App'>
      <div>
        <button onClick={() => setHidden(p => !p)}>Hidden</button>
      </div>
<div>Scenario A</div>
      {hidden ? (
        <div>
          <Counter key="1"/>
        </div>
      ) : (
        <div>
          <Counter key="3"/>
          <Counter key="1"/>
        </div>
      )}
<div>Scenario B</div>
      <div>
        <Counter key="6"/>
        {hidden || <Counter key="7"/>}
      </div>
    </div>
  );
}

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

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