React中导入组件与内联代码的key属性作用差异原因咨询

原拆分代码生效的核心逻辑 #

原代码中Chat是独立的React组件，它内部的text状态绑定在Chat组件实例上。当给<Chat key={to.id}>设置key后，切换联系人时key值发生变化，React会判定这是一个全新的组件实例：它会销毁旧的Chat组件（包括其内部所有状态），重新挂载一个全新的Chat组件，自然就会清空textarea的内容。

合并后无效的关键原因 #

把Chat的逻辑合并到Messenger组件后，text状态属于Messenger组件实例，不再和任何子DOM元素绑定。给section、textarea这类DOM元素加key，仅能让React在key变化时重新创建对应的DOM节点，但父组件Messenger的state并不会因为子DOM元素的重建而被重置，所以textarea的内容会保留下来。

合并后实现清空效果的两种方案 #

• 手动重置状态：用useEffect监听to.id的变化，当联系人切换时主动清空文本状态：

  useEffect(() => {
    setText('');
  }, [to.id]);
  

• 复用组件key逻辑：把聊天区域的逻辑抽成Messenger内部的独立组件，给这个内部组件加key={to.id}，让React在切换时重建组件实例，自动重置状态：

  function Messenger() {
    const [to, setTo] = useState(contacts[0]);
  
    // 内部独立组件，状态绑定在自身实例上
    const ChatSection = () => {
      const [localText, setLocalText] = useState('');
      return (
        <section>
          <textarea value={localText} onChange={(e) => setLocalText(e.target.value)} />
          {/* 其他聊天逻辑 */}
        </section>
      );
    };
  
    return (
      <div>
        {/* 联系人列表 */}
        <ChatSection key={to.id} />
      </div>
    );
  }
  

内容的提问来源于stack exchange，提问作者Rich KS