React中props传入数据时是否需使用useEffect？同步props到本地state的useEffect是否冗余？

嘿，这个问题问得特别接地气！咱们先拆解一下你给出的两个组件，再聊聊那个useEffect到底是不是多余的。

先看两段代码的实际行为差异：

1. 不带useEffect的版本 #

export function CounterWithoutEffect({ initialValue }: NoEffectProps) {
  // 仅在组件首次挂载时用initialValue初始化state，后续props更新不影响
  const [count, setCount] = useState(initialValue);
  return (
    <div>
      <p>NoEffect count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

这个组件的本地count state只在第一次渲染的时候读取initialValue，之后哪怕父组件把initialValue改成任何值，本地计数器都不会跟着变——比如你点递增到3，父组件把initialValue改成5，这个计数器还是停在3，完全不受父组件的新props影响。

2. 带useEffect的版本 #

export function CounterWithEffect({ initialValue }: WithEffectProps) {
  // 首次挂载用initialValue初始化state
  const [count, setCount] = useState(initialValue);
  // 监听initialValue变化，同步到本地state
  useEffect(() => {
    setCount(initialValue);
  }, [initialValue]);
  return (
    <div>
      <p>WithEffect count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

这个版本加的useEffect可一点都不冗余！它的作用是监听initialValue的变化，只要父组件传过来的initialValue变了，就立刻把本地的count重置成新的initialValue。比如你之前点递增到3，父组件把initialValue改成5，这个计数器会瞬间变成5，直接覆盖你之前的操作。

核心结论：这个useEffect是否冗余，完全看你的业务需求 #

• 如果你需要本地state完全独立于父组件的props——比如用户手动操作计数器后，不管父组件怎么改初始值，都要保留用户的操作结果，那这个useEffect确实多余，直接用CounterWithoutEffect的写法就行。
• 但如果你需要本地state始终和父组件的props保持同步——比如父组件切换了不同的数据源（比如从编辑A项切换到编辑B项），需要把本地计数器重置成当前项的初始值，那这个useEffect就是必须的，它是React里实现「props同步到本地state」的标准手段之一。

举个更具体的场景：假设你做一个多步骤表单，每一步的初始进度值由父组件传入。如果用带useEffect的版本，切换步骤时进度会自动同步到当前步骤的初始值；用不带的版本，进度会停留在上一步用户操作后的数值，不会自动切换。

另外要注意：useState(initialValue)里的initialValue只是首次渲染的初始化参数，后续渲染时这个参数会被React忽略，所以想监听props变化同步state，必须用useEffect来做，没有其他更简洁的替代方式（除非你用useReducer，但那是更复杂的场景了）。

内容来源于stack exchange