nodejs 020: React语法规则 props和state
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 的
useStateHook 或类组件的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 等）。
原文地址：https://blog.csdn.net/ResumeProject/article/details/143633857
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！