如何区分 React 中的 state 与 props？

在 React 中，state 和 props 是组件数据管理的重要概念，但在角色、来源和行为方面有根本区别。它们共同确保组件化的设计原则（如单向数据流）。以下是主要区别：

1. 来源与定义
   • props（属性）：由父组件通过外部接口向子组件传递数据，是一个只读对象。props 是组件之间数据和参数传递的核心方式。
   • state（状态）：在组件内部声明和管理，用于存储和更新组件的本地状态（私有数据）。组件初始化并维护自己的 state。
2. 可变性与修改规则
   • props 不可改变：子组件不能直接修改传入的 props。如果需要基于 props 的变化调整行为，应通过父组件传递回调函数，在父组件中更新自身 state 并重新传递新 props。例如：

     // 子组件
     function Child({ value, onChange }) {
       return <button onClick={() => onChange(value + 1)}>Increment</button>;
     }
     
     // 父组件
     function Parent() {
       const [count, setCount] = useState(0);
       return <Child value={count} onChange={setCount} />;
     }
     

   • state 可修改：通过 this.setState()（在类组件中）或 Hook（如 useState() 在函数组件中）更新。当 state 改变时，React 自动触发组件重新渲染。例如：

     // 函数组件使用 useState
     import React, { useState } from 'react';
          
     function Counter() {
       const [count, setCount] = useState(0); // state 初始化
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={() => setCount(count + 1)}>Increment</button>
         </div>
       );
     }
     

3. 初始化方式
   • props 在实例化时由父组件传递，可在组件外部用 defaultProps 设置默认值（例如 ChildComponent.defaultProps = { count: 0 };）。
   • state 在组件内部设置：类组件中在 constructor 用 this.state = {...};；函数组件用 useState() Hook。
4. 使用场景与行为
   • props 用于共享数据：适用于组件间通信和数据依赖的外部化。传递对象、数组或函数均可。
   • state 负责内部逻辑：管理可动态更新的状态值（如 UI 动画或表单输入）。更新时遵循异步规则，可优化性能。

本质区别强调：props 定义组件的对外接口，确保单向数据流和不可变性强特性；state 是组件的内部状态，驱动动态交互和渲染过程。正确使用二者是构建高效 React 应用的关键（如避免在组件内部修改 props）。