React中Props不可变性疑问：修改子组件Props对象属性未报错

核心点：Props不可变性是约定而非强制语法限制 #

React本身不会通过报错阻止你修改Props的内部属性，原因在于：

• JavaScript里对象是引用类型，传递给子组件的是对象的引用，修改其内部属性不会改变引用本身，而React的Props检查只做浅层引用对比，不会深度拦截内部属性的修改。
• 所谓"Props不可变"是React的设计约定，目的是维护单向数据流的清晰性，而非语法层面的强制限制。

你的场景分析 #

你在子组件中直接修改Props对象的属性（比如props.user.name = "新值"），这种操作会直接改变父组件中原始对象的内容，但React不会抛出错误——因为它没有对Props做深度冻结或修改拦截。但这种做法会破坏单向数据流：父组件无法感知到Props的变化，可能导致UI和数据状态不一致，也会让组件的状态变得难以追踪和调试。

正确的实现方式 #

如果需要修改Props相关的数据，应该通过回调函数向上通知父组件，由父组件更新自身状态，再将新的Props传递给子组件：

父组件代码

import { useState } from 'react';
import ChildComponent from './ChildComponent';

function Parent() {
  const [user, setUser] = useState({ name: "初始名称" });

  // 定义更新状态的回调函数
  const updateUserName = (newName) => {
    // 采用不可变方式更新对象，创建新对象而非修改原对象
    setUser(prevUser => ({ ...prevUser, name: newName }));
  };

  return <ChildComponent user={user} updateUserName={updateUserName} />;
}

子组件代码

function ChildComponent({ user, updateUserName }) {
  const handleModifyName = () => {
    // 调用父组件的回调，不直接修改Props
    updateUserName("修改后的名称");
  };

  return (
    <div>
      <p>当前名称：{user.name}</p>
      <button onClick={handleModifyName}>修改名称</button>
    </div>
  );
}

遵守不可变约定的意义 #

• 维护单向数据流的清晰性：数据从父组件流向子组件，状态变更统一由父组件管理，避免组件间状态混乱。
• 确保React能正确触发重渲染：通过setState创建新的对象引用，React会检测到Props变化并重新渲染相关组件，保证UI和数据一致。

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