React组件状态复用问题：新增Note组件textarea初始值异常

一、为什么组件不会根据传入的props更新初始状态？ #

React中useState的初始值仅在组件首次挂载时生效一次，后续props发生变化时，不会自动重新初始化状态。

举个常见的错误写法：

function Note({ placeholder }) {
  // 仅首次挂载时会用placeholder初始化text，之后props变化不会更新
  const [text, setText] = useState(placeholder);
  // 渲染textarea等逻辑
}

当这个组件被复用（比如从列表中的笔记切换到新增笔记场景），只要组件实例没被卸载再挂载，useState的初始值就不会再次执行，因此text会保留之前的旧状态，不会自动同步新传入的placeholder。

二、多实例组件的状态是如何维持的？ #

React通过组件在DOM树中的位置+唯一key值来识别不同的组件实例：

• 若两个同类型组件在DOM树中的位置相同，且key一致（或未设置key时用默认索引），React会判定为同一个组件实例，复用其状态和DOM节点；
• 只有当key变化或组件位置完全不同时，React才会创建新的组件实例，初始化全新的状态。

你的场景中，新增笔记组件和列表最后一个笔记组件可能被React判定为同一个实例（比如未给新增组件设置唯一key，导致复用了列表项的索引key），因此状态被保留下来。

解决办法 #

1. 给新增组件设置唯一key
   给新增的Note组件分配一个和列表项不重复的key，比如：

{notes.map(note => <Note key={note.id} text={note.text} />)}
<Note key="new-note" placeholder="输入新笔记..." />

这样React会将新增组件视为独立实例，不会复用列表项的状态。

2. 监听props变化同步状态
   如果需要在props变化时更新状态，可以用useEffect监听props并手动更新：

function Note({ placeholder }) {
  const [text, setText] = useState(placeholder);

  // 当placeholder变化时，更新text状态
  useEffect(() => {
    setText(placeholder);
  }, [placeholder]);

  // 组件渲染逻辑
}

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