nodejs 020: React语法规则 props和state

props和state

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

一、props 和 state的区别

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

二、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;

四、propsstate 的组合使用

  • 通常情况下,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 通过 propsmessage 传递给子组件 Child
    在这里插入图片描述

  • 点击按钮后,父组件会更新其 state,从而触发 Child 重新渲染。
    在这里插入图片描述

CG

  • useState是异步的,可能会结果合并
  • 如果一个变量不用于JSX中显示,考虑使用useReference而非useState
  • ?用于处理可选的属性类型, ?.可选链操作符(可选链操作符是在 Node.js 14.x 及以上版本中引入的)
  • 使用immer可变数据替换state
  • 状态提升适合在局部组件树中共享状态,而不是整个应用程序。
  • 如果需要在整个应用中共享状态,或状态过于复杂,则可以考虑使用 React Context全局状态管理工具(如 Redux、Zustand 等)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912752.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源免费】基于SpringBoot+Vue.JS水果购物网站(JAVA毕业设计)

博主说明&#xff1a;本文项目编号 T 065 &#xff0c;文末自助获取源码 \color{red}{T065&#xff0c;文末自助获取源码} T065&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

python可视化进阶

引用&#xff1a; 首先需要安装 plotnine from plotnine import* import joypy数据可视化进阶操作 3.1 类别数据可视化 【例3-1】——绘制简单条形图 【代码框3-1】——绘制简单条形图 # 图3-1的绘制代码 import pandas as pd import matplotlib.pyplot as plt from cvxpy …

大模型入门自学资源汇总,很难找到比这还全的大模型学习资源总结了!

接触各种AI工具到现在也快两年了&#xff0c;今年和同学陆续做了一些AI应用的科普宣讲&#xff0c;在这过程中收集了不少自学资源&#xff0c;特地挑出一部分整理成以下的内容。 书籍 大模型应用开发极简入门&#xff1a;基于GPT-4和ChatGPT 首推今年年初出版的《大模型应用开…

为何选择Spring AI Alibaba开发智能客服平台?

0 前言 本文来看如何使用Spring AI Alibaba构建Agent应用。 1 需求 智能客服平台&#xff0c;可帮助用户完成机票预定、问题解答、机票改签、取消等动作&#xff0c;具体要求&#xff1a; 基于 AI 大模型与用户对话&#xff0c;理解用户自然语言表达的需求支持多轮连续对话…

Python学习从0到1 day27 第三阶段 Spark ② 数据计算Ⅰ

人总是会执着于失去的&#xff0c;而又不珍惜现在所拥有的 —— 24.11.9 一、map方法 PySpark的数据计算&#xff0c;都是基于RDD对象来进行的&#xff0c;采用依赖进行&#xff0c;RDD对象内置丰富的成员方法&#xff08;算子&#xff09; map算子 功能&#xff1a;map算子…

数据结构合并两个有序链表

数据结构 1.合并两个有序数组代码&#xff1a; 1.合并两个有序数组 这里我们可以创建一个新的对象作为合并后的新链表newHead&#xff0c;而NewHead.next就是我们要返回的头部的位置 在创建一个对象来获取nextHead.next下一个节点来作为我们新链表的起始位置防止我们的头部位置…

动态规划 —— dp 问题-买卖股票的最佳时机含手续费

1. 买卖股票的最佳时机含手续费 题目链接&#xff1a; 714. 买卖股票的最佳时机含手续费 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-with-transaction-fee/description/ 2. 算法原理 状态表示&#xff1a;以某一个…

利用pythonstudio写的PDF、图片批量水印生成器,可同时为不同读者生成多组水印

现在很多场合需要将PDF或图片加水印&#xff0c;本程序利用pythonstudio编写。 第一步 界面 其中&#xff1a; LstMask:列表框 PopupMenu:PmnMark LstFiles:列表框 PopupMenu:PmnFiles OdFiles:文件选择器 Filter:PDF文件(.PDF)|.PDF|图像文件(.JPG)|.JPG|图像文件(.png…

基于python深度学习技术矩阵分解的推荐系统,通过学习隐含特征,实现推荐

实现了一个基于矩阵分解的推荐系统&#xff0c;用于预测用户对电影的评分。具体来说&#xff0c;该程序通过TensorFlow构建和训练一个模型&#xff0c;来学习用户和电影之间的隐含特征&#xff0c;并根据这些特征预测评分。以下是代码的主要功能和步骤的详细描述&#xff1a; …

[vulnhub] DarkHole: 1

https://www.vulnhub.com/entry/darkhole-1,724/ 端口扫描主机发现 探测存活主机&#xff0c;184是靶机 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 09:59 CST Nmap scan report for 192.168.75.1 Host is up (0.00027s latency). MA…

4.1 WINDOWS XP,ReactOS对象与对象目录----1

系列文章目录 文章目录 系列文章目录4.1 对象与对象目录OBJECT_HEADERObpLookupEntryDirectory()NtCreateTimer() 4.1 对象与对象目录 “对象(Object)”这个词现在大家都已耳熟能详了&#xff0c;但是对象到底是什么呢?广义地说&#xff0c;对象就是“目标”&#xff0c;行为…

STM32H503开发(2)----STM32CubeProgrammer烧录

STM32H503开发----2.STM32CubeProgrammer烧录 概述硬件准备视频教学样品申请源码下载参考程序自举模式BOOT0设置UART烧录USB烧录 概述 STM32CubeProgrammer (STM32CubeProg) 是一款用于编程STM32产品的全功能多操作系统软件工具。 它提供了一个易用高效的环境&#xff0c;通过…

“双十一”电商狂欢进行时,在AI的加持下看网易云信IM、RTC如何助力商家!

作为一年一度的消费盛会&#xff0c;2024年“双十一”购物狂欢节早已拉开帷幕。蹲守直播间、在主播热情介绍中点开链接并加购&#xff0c;也已成为大多数人打开“双11”的重要方式。然而&#xff0c;在这火热的购物氛围背后&#xff0c;主播频频“翻车”、优质主播稀缺、客服响…

debian系统安装qt的时候 显示xcb相关文件缺失

如果是安装之后的问题 我们可以选择使用ldd的命令查看当前依赖的so那些文件确实 ldd /home/yinsir/Qt/5.15.2/gcc_64/plugins/platforms/libqxcb.so 本人在进行打包的时候 出现则会个报错 ERROR: ldd outputLine: “libxcb-util.so.1 > not found” ERROR: for binary: “/…

A023-基于SpringBoot的冷链物流系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

【数据分析】如何构建指标体系?

有哪些指标体系搭建模型&#xff1f;五个步骤教你从0开始搭建指标体系 一、企业指标体系搭建存在什么问题 许多企业在搭建数据指标体系时遇到了诸多难题&#xff0c;如问题定位不准确、数据采集不完整、目标不一致、报表无序、指标覆盖不全面以及报表价值未充分利用等。 1、…

C++20 概念与约束(1)—— SFINAE

1、从模板说起 众所周知&#xff0c;C在使用模板时&#xff0c;如果有多个模板匹配&#xff0c;则编译器会选择最匹配的一个模板进行实例化&#xff0c;这也正是模板特化和偏特化的依据。 根据上面这张图中的现象&#xff0c;列举下面几个示例&#xff1a; 1、不存在模板的情况…

基于Spring Boot的在线装修管理系统的设计与实现,LW+源码+讲解

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#…

原生鸿蒙应用市场:赋能开发者全生命周期服务体验

文章目录 背景自动化检测前移&#xff1a;早发现&#xff0c;早解决技术细节&#xff1a;静态代码分析与兼容性测试应用场景 按需加载&#xff1a;优化性能&#xff0c;提升用户体验技术细节&#xff1a;模块化与懒加载实现应用场景 应用加密&#xff1a;保护应用代码安全&…

RDD 算子全面解析:从基础到进阶与面试要点

Spark 的介绍与搭建&#xff1a;从理论到实践_spark环境搭建-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交&#xff1a;本地与集群模式全解析-CSDN博客 Spark on YARN&#xff1a;Spark集群模式…