一：引言

React 组件的 state 和 props 都在数据传递上有重要作用，那么他们的差异是什么呢？

二：区分

（1）数据来源与可变性上

props‌=>

1：由父组件传递，作为组件的对外接口，用于跨组件数据传递，子组件无法直接修改‌

2：只读属性，若需修改需通过父组件回调函数实现‌

state‌=>

1：由组件自身创建和维护，用于存储动态变化的数据，通过 setState 更新

2：可变性是其核心特征，状态变化会触发组件重新渲染‌

（2）所有权与管理权限上

props‌=>

1：父组件拥有所有权，子组件仅能读取‌

2：用于配置子组件行为或样式‌

state‌=>

1：组件私有，其他组件无法直接访问（除非通过状态提升或 Context 共享:

2：管理用户交互、UI 状态等内部逻辑‌

（3）触发更新的方式上

props‌=>父组件更新 props 时，子组件会重新渲染‌

state‌=>调用 setState 更新状态，React 合并更新后触发渲染‌

（4）作用范围与用途上

props‌=>

1：在组件树中向下传递，支持父子通信‌

2：适用于静态数据或跨组件配置（如显示文本、回调函数）‌

state‌=>

1：仅限当前组件使用，管理动态数据（如表单输入、开关状态）‌

2：数据流动方向单一，可传递给子组件作为 props，但无法反向传递‌

（5）更新机制差异上

props‌=>父组件更新时，子组件若依赖该 props 会重新渲染‌

state‌=>更新可能是异步的，React 会优化合并多次 setState 调用以提高性能‌

三：代码

1：props

// 父组件（传递数据）
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent title="用户列表" data={["Alice", "Bob"]} />; // ‌:ml-citation{ref="1,3" data="citationList"}
  }
}

// 子组件（接收并渲染 props）
const ChildComponent = (props) => (
  <div>
    <h1>{props.title}</h1>  {/* 父组件传递的只读数据 */}
    <ul>
      {props.data.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  </div>
);

2：state

// 计数器组件（通过 state 控制动态数据）
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 初始化 state ‌:ml-citation{ref="2,5" data="citationList"}
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 }); // 更新 state 触发重新渲染 ‌:ml-citation{ref="1,4" data="citationList"}
  };

  render() {
    return (
      <div>
        <p>当前计数: {this.state.count}</p>
        <button onClick={this.increment}>点击增加</button>
      </div>
    );
  }
}

四：拓展

（1）props特性

   1：只读性=>React 中 props 是只读的，组件不能修改自己的 props

   2：数据类型=>props 可以传递任何类型的数据，包括字符串、数字、对象、函数等

   3：默认值=>可以通过 defaultProps 为组件的 props 设置默认值

（2）state特性

   1：异步更新=>setState 是异步操作，多个 setState 调用可能会被合并

   2：不可变性=>不要直接修改 state，而是创建新的对象来更新状态

   3：局部更新=>setState 只更新传入的字段，其他字段保持不变

五：总结

1：props‌ 是父组件对子组件的“配置”，而 ‌state‌ 是组件自身的“记忆”

2：‌控制权‌=>props 由外部控制，state 由组件自主管理‌

3：‌更新驱动‌=>props 变化依赖父级，state 变化依赖组件内部逻辑‌

‌4：数据流向‌=>props 向下传递，state 仅内部维护‌