React中已移除组件的状态保留方案是否为不良实践？

你的方案不算典型的不良实践，但属于利用React Diff机制的「技巧性」用法，需要结合场景判断适用性，同时得注意潜在的坑：

为什么这个方案能生效？ #

React通过key识别组件实例的唯一性——当同一位置（或不同渲染分支的同一层级）出现相同key的组件时，React会判定这是同一个实例，不会销毁重建，而是直接复用，因此组件内部的useState状态会被保留。你这里的Form在两个渲染分支用了同一个key="form1"，正好触发了这个复用逻辑。

什么时候用这种方式是合理的？ #

• 当组件在不同渲染分支间切换，且你明确需要保留它的内部独立状态，同时不想把状态提升到父组件（提升状态会增加父组件的复杂度）时，这种方式是简洁的解决方案。
• 组件内部状态完全独立，不需要父组件参与管理的场景（比如这个例子里的输入框内容，只是Form自己的状态）。

需要警惕的潜在问题 #

1. 可读性差：其他维护代码的开发者可能没注意到key的作用，会困惑为什么切换hint后输入框内容没被清空。建议在代码里加注释说明「使用相同key保留Form组件状态」。
2. 副作用复用风险：如果Form组件有useEffect、useLayoutEffect这类依赖挂载/卸载的副作用，复用实例时不会重新执行挂载钩子（比如空依赖的useEffect只会在第一次挂载时运行）。如果你的组件逻辑依赖挂载/卸载流程，这可能导致意料之外的bug。
3. key冲突隐患：虽然当前场景下key="form1"是唯一的，但如果未来在同一层级添加其他同key的组件，会触发React的key冲突警告，甚至导致状态混乱。必须确保这个key在当前组件的渲染层级里是唯一的。

更稳妥的替代方案 #

1. 调整渲染结构，避免组件切换 #

把hint的显示/隐藏放到同一渲染分支里，让Form始终存在，这样不需要依赖key也能保留状态：

import { useState } from 'react';

export default function App() {
  const [showHint, setShowHint] = useState(false);
  return (
    <div>
      {showHint && <p><i>Hint: Your favorite city?</i></p>}
      <Form />
      <button onClick={() => setShowHint(!showHint)}>
        {showHint ? 'Hide hint' : 'Show hint'}
      </button>
    </div>
  );
}

function Form() {
  const [text, setText] = useState('');
  return (
    <textarea
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}

这种方式更符合常规的React条件渲染逻辑，可读性和可维护性更好。

2. 状态提升到父组件 #

把Form的text状态提升到App组件，通过props传递给Form。这是React官方推荐的状态共享方式，适合需要父组件控制或访问状态的场景：

import { useState } from 'react';

export default function App() {
  const [showHint, setShowHint] = useState(false);
  const [formText, setFormText] = useState('');
  
  return (
    <div>
      {showHint ? (
        <>
          <p><i>Hint: Your favorite city?</i></p>
          <Form text={formText} setText={setFormText} />
          <button onClick={() => setShowHint(false)}>Hide hint</button>
        </>
      ) : (
        <>
          <Form text={formText} setText={setFormText} />
          <button onClick={() => setShowHint(true)}>Show hint</button>
        </>
      )}
    </div>
  );
}

function Form({ text, setText }) {
  return (
    <textarea
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}

总结 #

你的方案是有效的，在简单场景下可以用，但如果项目规模较大或需要长期维护，更推荐用「调整渲染结构」或「状态提升」的方式，避免因技巧性用法带来的理解成本和潜在bug。

内容的提问来源于stack exchange，提问作者IZ Dev