nodejs 020: React语法规则 props和state

props和state

在 React 中,propsstate 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。

一、props 和 state的区别

特性 props state
定义方式 由父组件传递给子组件的数据 组件内部管理的本地数据
是否可修改 不可变(只读) 可变 (可以使用 setStateuseState 修改)
数据流向 单向(从父组件流向子组件) 组件自身内部使用
用途 用于在组件之间传递数据 用于存储和管理组件内部的动态数据
是否触发重新渲染 变更会触发子组件重新渲染 更新状态会触发组件重新渲染

二、props(属性)

1. props 是什么?

  • props 是父组件传递给子组件的数据
  • 它们是只读 的,子组件不能直接修改 props

2. props 的示例

bash 复制代码
// 子组件
import React from 'react';

function Child(props) {
  return <h1>{props.message}</h1>;
}

export default Child;
bash 复制代码
// 父组件
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 的示例

jsx 复制代码
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 中更新嵌套对象时出现副作用,确保始终返回新的对象或数组引用。
bash 复制代码
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;

四、propsstate 的组合使用

  • 通常情况下,React 应用程序是通过 父组件管理数据 ,将其通过 props 传递给子组件,而子组件通过事件回调 将数据更改传回父组件。这种模式确保了数据流是单向的,使得应用程序更加易于调试和维护。

示例:父子组件通信

bash 复制代码
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 通过 propsmessage 传递给子组件 Child

  • 点击按钮后,父组件会更新其 state,从而触发 Child 重新渲染。

CG

  • useState是异步的,可能会结果合并
  • 如果一个变量不用于JSX中显示,考虑使用useReference而非useState
  • ?用于处理可选的属性类型, ?.可选链操作符(可选链操作符是在 Node.js 14.x 及以上版本中引入的)
  • 使用immer可变数据替换state
  • 状态提升适合在局部组件树中共享状态,而不是整个应用程序。
  • 如果需要在整个应用中共享状态,或状态过于复杂,则可以考虑使用 React Context全局状态管理工具(如 Redux、Zustand 等)
相关推荐
Ai行者心易4 分钟前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东23312 分钟前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼17 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽18 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥34 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴43 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长1 小时前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端