React 的 prop 是响应式值吗：直接修改 prop 会发生什么

先给结论：prop 不是响应式状态，它是父组件在一次渲染里传下来的值。父组件重新渲染时子组件会收到新的 prop，但你在子组件里直接给 prop 赋值既不会触发更新，也会在下一次渲染时被父组件的值覆盖。想"改"这个值，只有两条路：把状态提到父组件，或者让子组件把它接进自己的 state。

React 里 prop 的传递方向与修改会发生什么

这个问题几乎每个刚从 Vue 转过来的人都会问一遍。因为 Vue 的 props 虽然也禁止直接改，但 Vue 会给出明确的运行时警告，而 React 默不作声——你改了，页面没动，也没有报错，于是很容易误以为"React 的 prop 是响应式的，只是我用法不对"。

本文用一个计数器的最小例子把这件事讲透：为什么直接赋值没反应、为什么改对象的字段有时会"看起来生效"、以及三种真正可行的写法各自该在什么场景下用。

先看结论

prop 是单向的：数据只能从父组件流向子组件，子组件改了也不会往回传。
prop 是只读约定：直接赋值不会触发渲染，下一次父组件渲染时还会被覆盖。
要改就改源头：状态提到父组件，或者用 useState 把 prop 当初始值接进来。

组件通信的更多写法，React 教程里有按场景分组的说明。

一、最小场景与预期行为

任务定死：父组件持有一个计数，把它传给子组件显示；子组件里有一个按钮，点击后计数加一。

输入是一段函数组件代码。预期行为是点击后数字变大并保持。实际行为取决于你把状态放在哪一层。

function Child({ count }) {
  function handleClick() {
    count = count + 1;   // 这样写不会有任何效果
  }

  return (
    <button onClick={handleClick}>{count}</button>
  );
}

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child count={count} />;
}

这段做的是：父组件用 useState 持有 count，传给子组件。子组件里那行赋值改的只是函数作用域里的一个局部变量，React 完全不知道发生了什么，也不会安排重新渲染。

预期结果（未在本机执行）：点击按钮后数字始终停在 0，控制台在严格模式下可能给出只读相关的提示，但页面不会更新，也不会抛出可见错误。

二、prop 到底是什么

prop 的单向数据流与三种可写路径

把 prop 理解成"函数参数"最准确。组件本质上是一个接收参数、返回界面的函数，父组件每次渲染都会用新的参数重新调用它。

由此能推出三条结论：

prop 的更新来自父组件的重新渲染，不是来自子组件内部的变化。父组件不动，子组件的 prop 就一直是上一次传进来的那个值。
prop 对象是只读约定。React 并没有用 Object.freeze 把它冻住，所以严格来说你能改得动，但改动不会被任何机制观察到。
React 不做深度比较。子组件是否重渲染，取决于父组件有没有重新渲染、以及有没有用 memo 做浅比较。改一个对象的内部字段，浅比较看不出来。

第三条最容易造成误会：如果你传的是一个对象，然后在子组件里写 obj.value = 1，界面上可能"看起来"变了。那不是响应式，只是你改的那个对象恰好也被其他地方引用着，下一次任何一次渲染发生时才把新值显示出来。这种依赖副作用的更新不可预测，属于必须避免的写法。

版本差异方面，本文示例全部基于函数组件与 Hooks，React 16.8 之后可用。类组件里对应的是 this.props，只读约定完全一致，区别只是没有 Hooks 那套记忆化工具。

三、三种真正可行的写法

三种写法在适用边界、性能代价与排错难度上并不相同，下面逐一说明。

3.1 把状态提到父组件

最常用也最符合单向数据流的做法：值由父组件持有，子组件只负责通知。

function Child({ count, onAdd }) {
  return <button onClick={onAdd}>{count}</button>;
}

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child count={count} onAdd={() => setCount(count + 1)} />;
}

这段做的是把"加一"这个动作也交给父组件。子组件拿到的是值和回调两样东西，自己不保存任何状态。适用边界很清楚：只要这份数据不止一个组件在用，就该用它。性能代价是多一次父组件渲染，但在几十个节点的子树里完全可以忽略。

3.2 把 prop 当作 useState 的初始值

当子组件确实需要一份"自己的副本"时（比如一个可编辑的表单默认值），用 prop 初始化自己的 state。

function Editor({ initialTitle }) {
  const [title, setTitle] = React.useState(initialTitle);

  return (
    <input value={title} onChange={e => setTitle(e.target.value)} />
  );
}

这段做的是：initialTitle 只在首次挂载时被读取一次，之后输入框的改动存在子组件自己的 state 里。要点是这个 prop 之后改了不会同步过来——这不是 bug，是设计。如果要强制同步，就给组件加一个 key，让 React 把它当成新组件重新挂载。

3.3 受控组件加回调

表单场景的标准写法：值来自父组件，改动通过回调上报，父组件更新后再传回来。

function Field({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

这段做的是让输入框完全受控。它的代价是每次按键都要走一遍父组件的更新，长表单里这一步的性能开销要留意，可以用防抖或局部状态过渡。优点则是值永远只有一个来源，做校验、做联动都方便。

三种写法做个对比：状态提升的数据最一致、排错最容易，适合共享数据；useState 接初值最省事，适合"复制一份再编辑"的场景；受控加回调最可控，适合表单。选的时候先问一句"这份数据还有谁要用"。

四、常见失败分支与验证清单

4.1 改了 prop 却没报错也没变化

说明你改的是局部变量或对象字段，没有走 setState。修复办法是回到上面三种写法里挑一种，不要在子组件里写赋值语句。

4.2 子组件用了 memo 之后父组件更新也没反应

memo 做的是浅比较，传一个新创建的对象或箭头函数每次都不相等，反而会失效；反过来，传一个被就地修改的同一个对象则永远相等。修复办法是给回调加 useCallback，给对象加 useMemo。

4.3 把 prop 当初始值后父组件改了不同步

这是预期行为，不是缺陷。修复办法是给组件加 key 强制重挂载，或者改回受控写法。

4.4 验证清单

检查：在子组件里加一行 console.log，确认父组件渲染时子组件是否重新执行
运行：点击按钮三次，观察数字是否递增并保持
预期：采用 3.1 写法时数字稳定递增
失败：数字不变或只变一次 → 状态放错了层级或被覆盖
修复：把 useState 提到持有数据的那一层，子组件只接值与回调
验证：连续点击十次，确认每次都递增且没有闪烁回旧值

上面这些步骤做的是确认渲染触发链、验证状态层级、排除 memo 干扰。预期结果（未在本机执行）是十次点击后计数为 10；若中途回退，多半是有两处 state 在互相覆盖。

prop 该由谁持有状态的判断路径

总结

prop 不是响应式值，它是父组件传下来的只读参数。更新只能从源头发起：要么把状态提到父组件用回调改，要么在子组件里用 useState 接一份自己的副本。直接赋值不会报错，但也永远不会生效。

三条要点带走：

prop 的变化来自父组件重新渲染，子组件内部赋值不会被观察；
改对象的字段可能"看起来生效"，那是巧合，不是响应式；
useMemo 与 useCallback 是让 memo 比较真正生效的配套工具，不是可选装饰。

下一步建议把你手上的组件按"谁持有这个状态"重新分一遍类，能提到共同父级的一律提上去。组件通信的其他写法，React 入门教程里有更完整的清单。

常见问题

Q：为什么 React 不直接禁止修改 prop？

A：React 把 props 对象当作普通对象传入，没有做冻结。这属于约定而非强制，靠开发模式下的提示和 lint 规则来约束。

Q：直接改 prop 的对象字段为什么有时会生效？

A：那是引用共享造成的假象，改动在下一次任何渲染时才被显示出来，时机不可控。这种写法必须避免。

Q：子组件想改父组件的值，一定要写回调吗？

A：绝大多数场景是。回调是唯一符合单向数据流的反向通知方式，其余做法（比如直接改引用对象）都会让数据流变得难以追踪。

Q：prop 当初始值后父组件改了不同步怎么办？

A：这是 useState 的设计行为。加 key 让组件重新挂载可以强制同步，或者改成受控组件加回调的写法。

Q：memo 包了子组件为什么还是每次都重渲染？

A：浅比较失败。传入的对象或函数是每次新建的，引用不相等。用 useMemo 与 useCallback 稳定住这些引用。

延伸学习

想把组件数据流的写法练熟，可以按这个顺序来：

读一篇相关笔记 React 组件通信，把几种通信方式放在一起比对；
想系统补一遍基础，React+Redux 课程可以跟一遍；
想把文中的状态更新逻辑单独验证一遍，可以在在线代码实例里跑一跑。