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 等)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

架构师备考-概念背诵(软件工程)

软件工程 软件开发生命周期: 软件定义时期:包括可行性研究和详细需求分析过程,任务是确定软件开发工程必须完成的总目标,具体可分成问题定义、可行性研究、需求分析等。软件开发时期:就是软件的设计与实现,可分成概要设计、详细设计、编码、测试等。软件运行和维护:就是…

刷题强训(day06) -- 大数加法、链表相加、大数乘法

目录 1、大数加法 1.1 题目 1.2 思路 1.3 代码实现 2、链表相加&#xff08;二&#xff09; 2.1 题目 2.2 思路 2.3 代码实现 3、大数乘法 3.1 题目 3.2 思路 3.3 代码实现 1、大数加法 1.1 题目 1.2 思路 这道题可以模拟列竖式相加解答&#xff0c; 将每一位都转…

Java多线程编程(四)- 阻塞队列,生产者消费者模型,线程池

目录&#xff1a; 一.阻塞队列 二.线程池 一.阻塞队列 1.阻塞队列是⼀种特殊的队列. 也遵守 "先进先出" 的原则 阻塞队列能是⼀种线程安全的数据结构, 并且具有以下特性&#xff1a; 1.1.当队列满的时候, 继续入队列就会阻塞, 直到有其他线程从队列中取走元素 1.…

JSP执行过程及其与Servlet执行效率的比较

JSP&#xff08;Java Server Pages&#xff09;和Servlet都是Java Web开发中常用的技术&#xff0c;它们都用于动态生成Web页面。然而&#xff0c;JSP和Servlet在执行过程和效率上存在一些差异。本文将详细探讨JSP的执行过程&#xff0c;并比较JSP与Servlet的执行效率。 一、J…

open3d

open3d open3d用于 3D 数据处理的现代库。 简介 Open3D 是一个开源库&#xff0c;支持快速开发处理 3D 数据的软件。Open3D 前端公开了一组精心挑选的 C 和 Python 数据结构和算法。后端经过高度优化&#xff0c;并设置为并行化。Open3D 是从零开始开发的&#xff0c;具有一更…

洞察鸿蒙生态,把握开发新机遇

随着科技的不断进步&#xff0c;鸿蒙系统以其独特的分布式架构和跨设备协同能力&#xff0c;逐渐在智能手机、智能穿戴、车载、家居等多个领域崭露头角&#xff0c;与安卓、iOS形成三足鼎立之势。作为一名开发者&#xff0c;我对鸿蒙生态的认知和了解如下&#xff1a; 一、鸿蒙…

adb 如何通过wifi连接手机

1. 电脑通过USB线连接手机 1.1手机开启开发者模式 以小米手机为例&#xff1a;连续点击OS版本系统&#xff08;设置–>我的设备–>全部参数&#xff09; 1.2在开发者模式下&#xff0c;启动允许USB安装与USB调试 操作步骤&#xff1a;设置>更多设置>开发者选项&g…

【webrtc】 RTP 中的 MID(Media Stream Identifier)

RTP 中的 MID(Media Stream Identifier) RID及其与MID的区别 cname与mid的对比【webrtc】CNAME 是rtprtcp中的Canonical Name(规范化名称) 同样都是RTP头部扩展: 基于mediasoup的最新的代码,学习,发现mid在创建RtpSendStream时是必须传递的参数: 例如 D:\XTRANS\soup\…

brother:什么是兄弟,你悟了吗?

brother&#xff08;兄弟&#xff09;这个单词好奇怪哦&#xff0c;它为什么就会是兄弟呢&#xff1f;为什么这样书写、这些字母组合在一起&#xff0c;就是兄弟呢&#xff1f;而且&#xff0c;西方人的兄弟brother一词和姐妹sister一词&#xff0c;并不是像中国人所称呼明确指…

如何在谷歌浏览器中优化内存使用

在日常使用电脑的过程中&#xff0c;我们经常会遇到系统资源被大量占用的情况&#xff0c;尤其是内存。谷歌浏览器作为一个广泛使用的网络浏览器&#xff0c;其内存占用问题也备受关注。本文将详细介绍如何在谷歌浏览器中优化内存使用&#xff0c;以提升浏览体验和系统性能。&a…

计算机低能儿从0刷leetcode | 38.外观数列

题目&#xff1a;38. 外观数列 思路&#xff1a;这一题感觉仅仅难在了阅读理解上&#xff0c;搬了评论里一位朋友的中译中&#xff1a; 1 11 21 1211 111221 一步一步来 给一个数&#xff0c;这个数是1描述上一步的数&#xff0c;这个数是 1 即一个1&#xff0c;故写作11…

iSCSI 和SCSI的概述

一、定义与基础 SCSI 定义&#xff1a;SCSI是一种并行接口标准&#xff0c;用于连接高性能设备&#xff0c;如硬盘驱动器、磁带机和光驱等。基础&#xff1a;SCSI设备通过控制器与计算机系统通信&#xff0c;具有很高的数据传输速率和可靠性。 iSCSI 定义&#xff1a;iSCSI是一…

关于 Oracle Database Express Edition 的功能和安装

Oracle Database Express Edition&#xff0c;简称 Oracle Database XE。是一个免费的版本&#xff0c;主要用于培训和一些功能要求比较简单&#xff0c;又需要免费分发的场景。 看看官方的说明&#xff1a; Whether you are a developer, a DBA, a data scientist, an educat…

谷歌浏览器支持的开发者工具详解

谷歌浏览器&#xff08;Google Chrome&#xff09;是全球最受欢迎的网页浏览器之一&#xff0c;它不仅提供了快速、安全的浏览体验&#xff0c;还为开发者提供了强大的开发者工具。本文将详细介绍如何使用谷歌浏览器的开发者工具&#xff0c;并解答一些常见问题。&#xff08;本…

day57 图论章节刷题Part08(拓扑排序、dijkstra(朴素版))

拓扑排序-117. 软件构建 思路&#xff1a;拓扑排序是经典的图论问题。给出一个有向图&#xff0c;把有向图转成线性的排序就叫拓扑排序&#xff0c;拓扑排序也要检测有向图是否有环&#xff0c;即存在循环依赖的情况&#xff0c;因为这种情况是不能做线性排序的&#xff0c;所…

同局域网ssh连接wsl2

同局域网ssh连接wsl2 简介 如果在Windows使用Ubuntu系统而不想使用虚拟机&#xff0c;wsl是一种不错的选择&#xff0c;提供了一个相对传统虚拟机还不错的功能&#xff0c;但是如果我们想远程这个wsl则是比较麻烦&#xff0c;这里主要介绍一下如何在同一个局域网下使用ssh连接…

Vue.插槽使用指南,实现高复用组件

前言 在现代前端开发中&#xff0c;组件化开发已经成为主流&#xff0c;其中 Vue.js 的插槽&#xff08;slots&#xff09;特性为我们构建灵活、可复用的组件提供了强有力的支持。本文将深入探讨 Vue.js 插槽特性&#xff0c;包括基础插槽、具名插槽、作用域插槽、动态插槽名和…

在C++上实现反射用法

0. 简介 最近看很多端到端的工作&#xff0c;发现大多数都是基于mmdet3d来做的&#xff0c;而这个里面用的比较多的形式就是反射机制&#xff0c;这样其实可以比较好的通过类似plugin的形式完成模型模块的插入。当然我们这里不是来分析python的反射机制的。我们这篇文章主要来…

推荐一款多物理场模拟仿真软件:STAR-CCM+

Siemens STAR-CCM是一款功能强大的计算流体力学(CFD)软件&#xff0c;由西门子公司推出。它集成了现代软件工程技术、先进的连续介质力学数值技术和卓越的设计&#xff0c;为工程师提供了一个全面的多物理场仿真平台。主要特点与优势&#xff1a;多物理场仿真、自动化与高效、高…

无人机飞手考证,地面站培训技术详解

无人机飞手考证及地面站培训技术涉及多个关键方面&#xff0c;以下是对这些方面的详细解析&#xff1a; 一、无人机飞手考证流程与要求 1. 证书类型 民用无人机驾驶员证书&#xff1a;这是国家民航局颁发的无人机操作人员资质证书&#xff0c;分为视距内驾驶员、超视距驾驶员…