当前位置：首页 > news >正文

前端学习笔记：React.js中state和props的区别和联系

news 2025/7/16 8:47:55

文章目录

- - 1. `props`（属性）
  - - 定义
    - 用途
    - 示例
  - 2. `state`（状态）
  - - 定义
    - 用途
    - 示例
  - 3. 核心区别
  - 4. 常见使用场景
  - - props 的场景
    - state 的场景
  - 5. 交互模式
  - - 父组件修改子组件状态
    - 子组件通知父组件
  - 6. 最佳实践
  - 总结

在 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>;
}