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 等）。