props和state
在 React 中,props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。
一、props 和 state的区别
特性 | props | state |
---|---|---|
定义方式 | 由父组件传递给子组件的数据 | 组件内部管理的本地数据 |
是否可修改 | 不可变(只读) | 可变(可以使用 setState 或 useState 修改) |
数据流向 | 单向(从父组件流向子组件) | 组件自身内部使用 |
用途 | 用于在组件之间传递数据 | 用于存储和管理组件内部的动态数据 |
是否触发重新渲染 | 变更会触发子组件重新渲染 | 更新状态会触发组件重新渲染 |
二、props
(属性)
1. props
是什么?
props
是父组件传递给子组件的数据。- 它们是只读的,子组件不能直接修改
props
。
2. props
的示例
// 子组件
import React from 'react';
function Child(props) {
return <h1>{props.message}</h1>;
}
export default Child;
// 父组件
import React from 'react';
import Child from './Child';
function Parent() {
return <Child message="Hello, React!" />;
}
export default Parent;
- 页面上会显示
Hello, React!
。
三、state(状态)
1. state 是什么?
state
是组件内部维护的数据,用于存储组件的动态信息。- 当
state
发生变化时,React 会重新渲染组件。
2. state
的示例
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;
- 每次点击按钮时,计数器会增加 1,页面会自动更新。
3. state
的用法
- 适合用来存储和管理组件内部的可变数据。
- 使用 React 的
useState
Hook 或类组件的this.setState
方法来更新state
。 - setObj必须传入一个新的对象(可使用对象解构管理复杂状态):
- 不直接修改状态(例如,不能使用 push、splice、sort 等会直接修改数组的方法)。
- 使用不可变操作(例如 map(更新)、filter(删除)、concat、展开运算符 … 等)创建新数组。
- 避免在 useState 中更新嵌套对象时出现副作用,确保始终返回新的对象或数组引用。
import React, { useState } from 'react';
function UserProfile() {
const [user, setUser] = useState({ name: '', age: 0, email: '' });
const handleChange = (e) => {
const { name, value } = e.target;
setUser({ ...user, [name]: value });
};
return (
<div>
<input
type="text"
name="name"
placeholder="Name"
value={user.name}
onChange={handleChange}
/>
<input
type="number"
name="age"
placeholder="Age"
value={user.age}
onChange={handleChange}
/>
<input
type="email"
name="email"
placeholder="Email"
value={user.email}
onChange={handleChange}
/>
<h2>User Info</h2>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
</div>
);
}
export default UserProfile;
四、props
和 state
的组合使用
- 通常情况下,React 应用程序是通过 父组件管理数据,将其通过 props 传递给子组件,而子组件通过事件回调将数据更改传回父组件。这种模式确保了数据流是单向的,使得应用程序更加易于调试和维护。
示例:父子组件通信
import React, { useState } from 'react';
function Parent() {
const [message, setMessage] = useState("Hello from Parent");
const updateMessage = () => {
setMessage("Message updated!");
};
return (
<div>
<Child message={message} />
<button onClick={updateMessage}>Update Message</button>
</div>
);
}
function Child({ message }) {
return <h1>{message}</h1>;
}
export default Parent;
-
父组件
Parent
通过props
将message
传递给子组件Child
。
-
点击按钮后,父组件会更新其
state
,从而触发Child
重新渲染。
CG
- useState是异步的,可能会结果合并
- 如果一个变量不用于JSX中显示,考虑使用useReference而非useState
- ?用于处理可选的属性类型,
?.
可选链操作符(可选链操作符是在 Node.js 14.x 及以上版本中引入的) - 使用immer可变数据替换state
- 状态提升适合在局部组件树中共享状态,而不是整个应用程序。
- 如果需要在整个应用中共享状态,或状态过于复杂,则可以考虑使用 React Context 或 全局状态管理工具(如 Redux、Zustand 等)。