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