星沙做淘宝店铺网站山东泰润建设集团网站

在 React.js 中，state 和 props 是两个核心概念，用于管理组件的数据和数据流。它们的设计目的不同，但共同构成了 React 组件的状态管理系统。

1. props（属性）

定义

• 外部传入的数据：由父组件传递给子组件的参数，子组件只能读取，不能直接修改。
• 不可变（Immutable）：props 的值在组件内部不可变，若需要修改，应由父组件重新传递新值。

用途

• 组件复用：通过 props 传递不同参数，使同一组件可以表现出不同的行为或外观。
• 单向数据流：数据只能从父组件流向子组件，确保数据流清晰可控。

示例

// 父组件
function ParentComponent() {const name = "John";return <ChildComponent name={name} />;
}// 子组件
function ChildComponent(props) {return <div>Hello, {props.name}</div>;
}

2. state（状态）

定义

• 组件内部的私有数据：由组件自身管理和修改，用于存储动态变化的数据（如用户输入、加载状态等）。
• 可变（Mutable）：通过 setState 方法更新，每次更新会触发组件重新渲染。

用途

• 管理动态数据：如表单输入、加载状态、动画效果等。
• 响应式更新：当 state 变化时，React 会自动重新渲染组件。

示例

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0); // 初始化 statereturn (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

3. 核心区别

特性	props	state
数据来源	由父组件传递	组件内部自行管理
数据流向	单向（父 → 子）	组件内部私有
可变性	不可变（只读）	可变（通过 setState 修改）
初始化位置	父组件中定义	组件内部（通常在构造函数或 useState 中）
触发重渲染	父组件重新渲染或 props 变化时	调用 setState 时

4. 常见使用场景

props 的场景

• 传递配置参数（如颜色、大小、文本内容）
• 传递回调函数（用于子组件通知父组件）
• 渲染列表数据（通过 map 遍历数组传递每个元素）

state 的场景

• 表单输入值（如 input、textarea 的值）
• 加载状态（如 isLoading）
• 动画状态（如 isExpanded、isVisible）
• 计数器或游戏分数

5. 交互模式

父组件修改子组件状态

父组件通过传递新的 props 给子组件，子组件将 props 转换为自己的 state：

function Parent() {const [message, setMessage] = useState("Hello");return <Child initialMessage={message} />;
}function Child(props) {const [localMessage, setLocalMessage] = useState(props.initialMessage);return <div>{localMessage}</div>;
}

子组件通知父组件

子组件通过调用父组件传递的回调函数来修改父组件的 state：

function Parent() {const [count, setCount] = useState(0);const handleIncrement = () => setCount(count + 1);return <Child onIncrement={handleIncrement} />;
}function Child(props) {return <button onClick={props.onIncrement}>Increment</button>;
}

6. 最佳实践

• 最小化 state：只存储影响组件渲染的关键数据，避免冗余状态。
• 提升状态：当多个组件需要共享状态时，将 state 提升到最近的共同父组件中管理。
• 不可变更新：使用展开运算符（...）或 immer 等工具确保 state 以不可变方式更新。
• 优先使用 props：尽量通过 props 传递数据，减少组件内部 state。

总结

• props 是组件的输入，用于外部数据传递和组件复用。
• state 是组件的记忆，用于管理内部动态数据和响应式更新。
• 两者共同构成了 React 的单向数据流模型，确保数据流向清晰可控。