当前位置：首页 > news >正文

从项目代码看 React：State 和 Props 的区别及应用场景实例讲解

news 来源：原创 2025/7/5 2:40:19

在 React 中，state 和 props 是组件的两个重要概念，它们有不同的作用和应用场景。理解它们之间的区别对于开发 React 应用至关重要。

1. `state` 和 `props` 的区别

props (属性)：
- props 是由父组件传递给子组件的数据或函数。
- props 是只读的，子组件不能修改父组件传递给它的 props。它只能接收和使用这些数据。
- props 用来传递数据和回调函数，子组件通过 props 获取父组件传递的值。
state (状态)：
- state 是组件内部管理的状态，用于存储组件本地的数据。
- state 是可变的，组件内部可以通过 this.setState() 来更新状态，并触发组件重新渲染。
- state 用于存储组件需要动态变化的数据，并根据这些数据决定渲染内容。

2. `state` 和 `props` 的应用场景

props 的应用场景：
- props 主要用于父组件向子组件传递数据，或者在子组件中执行父组件传递的回调函数。
- 适用于组件间数据传递的场景，比如父子组件间的交互。
state 的应用场景：
- state 用于管理组件内部的可变数据，适用于组件需要在不同状态下渲染不同内容的场景。
- 比如，表单输入、用户点击操作、动态显示等场景。

3. 通过实际项目代码讲解 `state` 和 `props` 的应用

假设我们正在开发一个简单的计数器应用。我们有两个组件：一个是父组件 App，另一个是子组件 Counter，用于显示和增加计数值。

代码示例：使用 `props` 和 `state` 的计数器应用

import React, { Component } from 'react';// 子组件：计数器
class Counter extends Component {constructor(props) {super(props);this.state = {count: 0,  // 组件内部的状态};}// 增加计数increment = () => {this.setState(prevState => ({count: prevState.count + 1,}));};render() {return (<div><h2>Current Count: {this.state.count}</h2><button onClick={this.increment}>Increment</button><h3>Message from parent: {this.props.message}</h3> {/* 使用父组件传递的 props */}</div>);}
}// 父组件：App
class App extends Component {render() {return (<div><h1>React Props and State Example</h1><Counter message="Hello from App!" />  {/* 通过 props 传递数据 */}</div>);}
}export default App;

4. 代码解析

`props` 在应用中的使用：

message 是从父组件 App 传递给子组件 Counter 的 props。子组件通过 this.props.message 来访问该值。
- 这里，message="Hello from App!" 就是父组件传递给子组件的 props 数据。
- 在 Counter 组件中，this.props.message 用于显示父组件传递的信息。
父子组件的传递数据：
- props 的作用是让父组件将数据传递给子组件，子组件不能修改父组件传递的数据，它只能接收并展示这些数据。

`state` 在应用中的使用：

count 是 Counter 组件的内部状态，它用来表示计数器的当前值。
- state 用于存储组件内部的可变数据。每当 state 更新时，React 会重新渲染组件。
- this.state.count 存储计数器的值，点击按钮时，通过 this.setState 来更新 count 的值，触发重新渲染。
更新 state 并重新渲染：
- 当用户点击 Increment 按钮时，increment 方法会被调用，这会更新 state 中的 count，导致组件重新渲染，显示新的计数值。

5. 应用场景总结

props：
- 父组件向子组件传递数据。
- 子组件通过 props 接收父组件的数据并展示。
- props 适用于组件间的数据传递和函数回调，子组件不能修改 props。
state：
- 管理组件内部的动态数据。
- 在组件中使用 state 存储和管理用户交互、数据变化等信息。
- 适用于需要变更组件状态并触发重新渲染的场景。

6. 实际项目中的应用

在一个真实的项目中，props 和 state 的使用是非常常见的。比如，在一个购物车应用中：

props：用来传递商品数据、用户信息、购物车状态等给子组件，子组件根据 props 渲染 UI。
state：用来管理用户的购物车状态，比如商品数量、总价等，当用户点击加减按钮时更新 state，然后重新渲染 UI。

例如，在购物车组件中，state 用于存储商品数量，props 用于传递商品的详细信息和价格。

// 购物车组件示例
class CartItem extends React.Component {constructor(props) {super(props);this.state = {quantity: this.props.quantity,  // 从父组件传递的 props};}incrementQuantity = () => {this.setState(prevState => ({quantity: prevState.quantity + 1,}));};render() {const { name, price } = this.props;return (<div><h3>{name}</h3><p>Price: ${price}</p><p>Quantity: {this.state.quantity}</p><button onClick={this.incrementQuantity}>Add one more</button></div>);}
}

在这个例子中，name、price 是通过 props 传递的，而 quantity 是通过 state 在组件内部管理的。当用户点击 “Add one more” 按钮时，quantity 的值会更新，触发重新渲染。

总结

props 用于父组件传递数据给子组件，不可变。
state 用于管理组件自身的动态数据，可变，组件内部可更新其 state 并触发重新渲染。
props 和 state 在 React 中具有不同的用途和应用场景：props 用于组件间的通信，而 state 用于组件内部的状态管理。

希望这个解释和代码示例能够帮助你更好地理解 state 和 props 之间的区别及其应用场景！

从项目代码看 React：State 和 Props 的区别及应用场景实例讲解

在 React 中，state 和 props 是组件的两个重要概念，它们有不同的作用和应用场景。理解它们之间的区别对于开发 React 应用至关重要。 1. state 和 props 的区别 props (属性)： props 是由父组件传递给子组件的数据或函数。props 是只读的&am…...

编程日记 2025/7/5 2:40:19

深度学习中的优化算法

深度学习中的优化算法，是模型训练期间微调神经网络参数的关键元素。其主要作用是最小化模型的误差或损失，从而提高性能。各种优化算法(称为优化器)采用不同的策略来收敛到最佳参数值，从而有效地提高预测效果。在深度学习的背景下&#xff0c…...

编程日记 2025/7/3 15:32:22

python3GUI--大屏可视化-传染病督导平台 By:PyQt5

文章目录一．前言二．预览三．软件组成&开发心得1.样式&使用方法2.左侧表格实现3.设计4.学习5.体验效果四．代码分享1.环形渐变进度组件2.自定义图片的背景组件五．总结大小：60.9 M，软件…...

编程日记 2025/7/5 1:24:28

设计模式——单例模式

单例模式实现单例模式的方法前置条件懒汉式（Lazy Initialization）饿汉式（Eager Initialization）双重锁式（Double-Checked Locking）静态内部类式（Static Inner Class）枚举式&#xf…...

编程日记 2025/7/5 2:05:06

【01】AE特效开发制作特技-Adobe After Effects-AE特效制作快速入门-制作飞机，子弹，爆炸特效以及导出png序列图-优雅草央千澈

【01】AE特效开发制作特技-Adobe After Effects-AE特效制作快速入门-制作飞机，子弹，爆炸特效以及导出png序列图-优雅草央千澈开发背景优雅草央千澈所有的合集，系列文章可能是不太适合完全初学者的，因为课程不会非常细致的系统…...

编程日记 2025/7/5 1:26:32

第一种方法一键安装命令 curl -O --url http://luyuanbo79.south.takin.cc/wenjian/docker_install.sh && chmod x docker_install.sh && ./docker_install.sh 备用方法 curl -O --url https://file.gitcode.com/4555247/releases/untagger_0896d4789937405…...

编程日记 2025/7/4 14:06:33

Python的Matplotlib库应用（超详细教程）

目录一、环境搭建 1.1 配置matplotlib库 1.2 配置seaborn库 1.3 配置Skimage库二、二维图像 2.1 曲线（直线）可视化 2.2 曲线（虚线）可视化 2.3 直方图 2.4 阶梯图三、三维图像 3.1 3D曲面图 3.2 3D散点图 3.3 3D散…...

编程日记 2025/7/5 2:09:08

VS Code的设置功能以及多层级的设置方式与解密

VS Code的Settings功能为用户提供了极大的灵活性和便利性，使得用户可以根据自己的需求和偏好来定制编辑器的行为和外观。 Settings 可以实现的具体功能 VS Code的设置项非常丰富，涵盖了各个方面，包括但不限于： 编辑器选项&…...

编程日记 2025/7/5 1:03:45

怎么理解编码器与解码器？

编码器和解码器是在信息处理、通信、多媒体等众多领域中广泛应用的两个概念，它们的作用相反但又紧密相关。下面从多个角度来帮助你理解这两个概念： 定义编码器：编码器是一种将输入信息（如模拟信号、文本、图像、声音等&#xf…...

编程日记 2025/7/3 6:00:18

关于智能个人生活助手的一些想法

我感觉未来计算机发展会变成钢铁侠的贾维斯那样, 每个人有自己的系统集成ai和其他功能助力生活和工作说一下我为什么有这样的想法: 1.ai发展迅猛: 近些年来ai的发展势头越来越猛,不断破圈,越来越多的人了解到ai的强大,并使用ai改变了自己原有的生活或工作方式,熟练使用…...

编程日记 2025/7/2 4:58:30

FFmpeg音视频流媒体，视频编解码性能优化

你是不是也有过这样一个疑问：视频如何从一个简单的文件变成你手机上快速播放的短片，或者是那种占满大屏幕的超高清大片？它背后的法宝，离不开一个神奇的工具——FFmpeg！说它强大，完全不为过，它在…...

编程日记 2025/6/28 16:34:20

页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动js代码以视频示例 <style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px} </style><section id"abou…...

编程日记 2025/6/27 15:15:10

Python玩转视频剪辑 - Opencv、Moviepy（附完整案例）

1. 准备工作 1.1 安装Opencv-python、Moviepy pip install opencv-python pip install moviepy 1.2 视频剪辑目标如图，作者从b站下载了两个视频(仅做代码测试用，不作转载等任何商业用途)，一个是刘初寻的疏远（以下简称视频一&a…...

编程日记 2025/7/4 23:11:21

Pulsar客户端如何控制内存使用

Pulsar客户端如何控制内存使用一、使用场景在实际应用中，Pulsar客户端的内存使用控制是一个重要的性能优化点。假设有一个搜索类业务需要记录用户搜索请求，以便后续分析搜索热点和优化搜索效果。以下是一个简化的代码示例： PulsarClient…...

编程日记 2025/7/2 21:39:44

接口测试总结（http与rpc）

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换，传…...

编程日记 2025/7/4 13:54:07

Linux：进程概念（二.查看进程、父进程与子进程、进程状态详解）

目录 1. 查看进程 1.1 准备工作 1.2 指令：ps—显示当前系统中运行的进程信息 1.3 查看进程属性 1.4 通过 /proc 系统文件夹看进程 2. 父进程与子进程 2.1 介绍 2.2 getpid() \getppid() 2.3 fork()函数—通过系统调用创建进程 fork()函数疑问 3. 进程状态…...

编程日记 2025/6/30 16:10:41

ubuntu22.04 编译安装libvirt 10.x

环境安装 sudo apt-get update -y sudo apt-get install qemu-system-x86 bridge-utils libyajl-dev -y sudo apt-get install build-essential autoconf automake libtool -y sudo apt-get install libxml2-dev libxslt1-dev libgnutls28-dev libpciaccess-dev libnl-3-de…...

编程日记 2025/7/2 7:21:17

Ubuntu 下载安装 Consul1.17.1

下载来到 Consul 的下载页面：https://developer.hashicorp.com/consul/install?product_intentconsul 上面标注的地方可以切换你想要的版本，复制下载链接，使用 wget 下载这个文件： wget https://releases.hashicorp.com/consu…...

编程日记 2025/6/30 20:10:36

怎么实现Redis的高可用？

大家好，我是锋哥。今天分享关于【怎么实现Redis的高可用？】面试题。希望对大家有帮助； 怎么实现Redis的高可用？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网为了实现 Redis 的高可用性，我们需要保证在发…...

编程日记 2025/7/3 14:56:29

Domain Adaptation（李宏毅）机器学习 2023 Spring HW11 （Boss Baseline）

1. 领域适配简介领域适配是一种迁移学习方法，适用于源领域和目标领域数据分布不同但学习任务相同的情况。具体而言，我们在源领域（通常有大量标注数据）训练一个模型，并希望将其应用于目标领域（通常只有少量或没有标注数据）。然而，由于这两个领域的数据分布不同，模型在…...

编程日记 2025/6/30 12:39:05

Chatper 4: mplementing a GPT model from Scratch To Generate Text

4 Implementing a GPT model from Scratch To Generate Text 本章节包含编写一个类似于GPT的大型语言模型（LLM），这个模型可以被训练来生成类似人类的文本。Normalizing layer activations to stabilize neural network training在深度神经网…...

编程日记 2025/7/3 1:09:01

websocket股票行情接口

股票行情区别交易所出来的数据，不管通过什么渠道，延时一般都不会差太远，估计一般也就几十ms的差别。但是如果是通过http轮询，不太可能几十ms全部轮询一次。所以，做量化的话，用http协议是最次的选择。 …...

编程日记 2025/7/2 4:00:48

一键部署Netdata系统无需公网IP轻松实现本地服务器的可视化监控

文章目录前言1.关于Netdata2.本地部署Netdata3.使用Netdata4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定Netdata公网地址 💡 推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。…...

编程日记 2025/6/30 16:56:12

概率图模型01

机器学习中，线性回归、树、集成和概率图都属于典型的统计学习方法，概率图模型会更深入地体现出‘统计’两字概率图模型的常见算法概率图模型中的图概率图模型如图主要分为两种，即贝叶斯网络和马尔可夫网络，有向图与无向图&…...

编程日记 2025/7/1 12:02:36

oxml中创建CT_Document类

概述本文基于python-docx源码，详细记录CT_Document类创建的过程，以此来加深对Python中元类、以及CT_Document元素类的认识。元类简介元类（MetaClass）是Python中的高级特性。元类是什么呢？Python是面向对象编程…...

编程日记 2025/7/3 5:23:58

YARN 集群

一、集群角色 1.1 概述 Apache Hadoop YARN是一个标准的Master/Slave集群（主从架构）。其中ResourceManager（RM） 为Master， NodeManager（NM） 为 Slave。常见的是一主多从集群，也可以…...

编程日记 2025/7/1 13:07:32

电机控制的数字化升级：基于DSP和FPGA的仿真与实现

数字信号处理器（DSP，Digital Signal Processor）在工业自动化领域的应用日益广泛。DSP是一种专门用于将模拟信号转换成数字信号并进行处理的技术，能够实现信号的数字滤波、重构、调制和解调等多项功能，确保信号处理的精…...

编程日记 2025/6/29 19:33:21

homework 2025.01.11 math 6

homework 2025.01.11 math 6 小学6年级数学...

编程日记 2025/6/28 16:30:47

【会话详解】

会话详解概述会话： 用户通过浏览器访问多个Web资源的过程，从打开浏览器开始访问特定网站，直到关闭浏览器的过程称为会话（Session）。会话管理是Web应用中跟踪和存储用户状态的重要机制。有状态会话： …...

编程日记 2025/6/30 20:24:39

Unity 的 Vector3 与 Babylon.js 的 Vector3：使用上的异同

在 3D 开发中，向量是不可或缺的数学工具，用于表示位置、方向、速度等物理量。Unity 和 Babylon.js 都提供了 Vector3 类来处理三维向量，但它们在实现和使用上有一些异同。本文将详细对比 Unity 的 Vector3 和 Babylon.js 的 Vector…...

编程日记 2025/7/2 19:41:53

【2024年华为OD机试】(A卷,100分)- 单词倒序（Java JS PythonC/C++）

一、问题描述题目描述输入单行英文句子，里面包含英文字母，空格以及,.?三种标点符号，请将句子内每个单词进行倒序，并输出倒序后的语句。输入描述输入字符串S，S的长度 1 ≤ N ≤ 100 输出描述输出倒序后的字…...

编程日记 2025/6/29 19:11:00

芯片：CPU和GPU有什么区别？

CPU（中央处理器）和GPU（图形处理单元）是计算机系统中两种非常重要的处理器，它们各自有不同的设计理念、架构特点以及应用领域。下面是它们之间的一些主要差异： 1. 设计目的与应用领域 CPU：设计…...

编程日记 2025/7/1 19:46:24

springboot整合mysql

1.首先在pom.xml中添加依赖： <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency>…...

编程日记 2025/6/29 23:36:14

复合机器人助力手机壳cnc加工向自动化升级

在当今竞争激烈的制造业领域，如何提高生产效率、降低成本、提升产品质量，成为众多企业面临的关键挑战。尤其是在手机壳 CNC 加工这一细分行业，随着市场需求的持续增长，对生产效能的要求愈发严苛。而复合机器人的出现，正…...

编程日记 2025/7/2 14:46:36

深入浅出负载均衡：理解其原理并选择最适合你的实现方式

负载均衡是一种在多个计算资源（如服务器、CPU核心、网络链接等）之间分配工作负载的技术，旨在优化资源利用率、提高系统吞吐量和降低响应时间。负载均衡的实现方式多种多样，以下是几种常见的实现方式： 1. 硬件负载均衡&…...

编程日记 2025/6/28 13:44:10

征程 6X release版本内核模块安全加载

1.概述征程 6X 系统在 release 编译时支持内核模块签名验证，仅加载使用正确密钥进行数字签名的内核模块。禁止加载未签名的内核模块或使用错误密钥签名的内核模块，客户需要替换成自己的 key 进行签名。模块签名启用后，Linux 内核将仅加载…...

编程日记 2025/6/30 7:54:48

uni-app的学习

uni-app 有着跨平台支持、丰富的插件和生态系统、高性能、集成开发工具HBuilderX的配合使用。允许使用者仅通过一套代码发布到多平台使用。 uni-app官网 uni-app 是一个适合开发跨平台移动应用和小程序的框架，能够大幅提高开发效率。一、了解 1.1 工具准备从Git…...

编程日记 2025/6/30 9:41:40

国产信创实践（国能磐石服务器操作系统CEOS +东方通TongHttpServer）

替换介绍： 国能磐石服务器操作系统CEOS 对标 Linux 服务器操作系统（Ubuntu, CentOS） 东方通TongHttpServer 对标 Nginx 负载均衡Web服务器第一步： 服务器安装CEOS映像文件，可直接安装，本文采用使用VMware …...

编程日记 2025/7/3 1:09:06

前端实时显示当前在线人数的实现

实时显示当前在线人数的实现本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。方法一：使用 WebSocket 实现实时更新服务器端设置通过 Node.js 和 WebSocket 库（如 …...

编程日记 2025/7/2 8:46:53

为AI聊天工具添加一个知识系统之27 支持边缘计算设备的资源存储库及管理器

本文问题现在我们回到 ONE/TWO/TREE 的资源存储库的设计--用来指导足以支持本项目（为AI聊天工具增加一套知识系统）的核心能力 “语言处理” 中最高难度系数的“自然语言处理” 中最具挑战性的“含糊性” 问题的解决。--因为足以解决自然语言中最…...

编程日记 2025/7/3 1:25:29

继续坚持与共勉

经过期末考试后，又要开始学习啦。当时一直在刷算法题就很少写博客了，现在要继续坚持写博客，将每天对于题的感悟记录下来。同时我将会在学习Linux操作系统，对于过去学习的内容进行回顾！！ 在此&#xff…...

编程日记 2025/7/4 10:39:32

PHP的扩展Imagick的安装

windows下的安装下载：Imagick扩展 PECL :: Package :: imagick 3.7.0 for Windows 下载：ghostscript（PDF提取图片时用到，不处理PDF可以不安装） Ghostscript : Downloads 安装扩展 Imagick解压后&…...

编程日记 2025/6/30 8:40:14

【2024年华为OD机试】 (A卷,100分)- 租车骑绿岛（Java JS PythonC/C++）

一、问题描述题目描述部门组织绿岛骑行团建活动。租用公共双人自行车，每辆自行车最多坐两人，最大载重 M。给出部门每个人的体重，请问最多需要租用多少双人自行车。输入描述第一行两个数字 m、n，分别代表自行车限重&#…...

编程日记 2025/7/1 18:46:03

Solidity入门: 函数

函数 Solidity语言的函数非常灵活，可以进行各种复杂操作。在本教程中，我们将会概述函数的基础概念，并通过一些示例演示如何使用函数。我们先看一下 Solidity 中函数的形式: function <function name>(<parameter types>) {in…...

编程日记 2025/7/4 15:06:53

1、docker概念和基本使用命令

docker概念微服务：不再是以完整的物理机为基础的服务软件，而是借助于宿主机的性能。以小量的形式，单独部署的应用。 docker：是一个开源的应用容器引擎，基于go语言开发的，使用时apache2.0的协议。docker是…...

编程日记 2025/7/1 20:47:59

【Python】深入Python元类：动态生成类与对象的艺术

在Python中，元类（Metaclass）是一个强大且高级的特性，允许开发者在类创建时控制其行为与属性。通过元类，开发者可以动态生成类和对象，实现自定义的类行为，进而增强代码的灵活性和可扩展性。本文将…...

编程日记 2025/7/2 15:45:57

数字孪生可视化在各个行业的应用场景

数字孪生技术，作为新一代信息技术的集大成者，正在深刻改变着我们对物理世界的认知和管理方式。本文将探讨数字孪生可视化在不同行业的应用场景，以及它们如何赋能行业数字化转型。 1. 智慧城市与交通在智慧城市领域，数字孪生技术…...

编程日记 2025/7/2 23:12:51

CES Asia 2025科技盛宴，AI智能体成焦点

2025第七届亚洲消费电子技术展（CES Asia赛逸展）将在北京拉开帷幕，AI智能体有望成为展会的核心亮点。深圳市人工智能行业协会发文表示全力支持CES Asia 2025（赛逸展），称其为人工智能领域的创新发展提供了强…...

编程日记 2025/7/2 18:24:00

【第04阶段-机器学习深度学习篇-1-深度学习基础-深度学习介绍】

1 深度学习概念深度学习是基于机器学习延伸出来的一个新的领域，由以人大脑结构为启发的神经网络算法为起源加之模型结构深度的增加发展，并伴随大数据和计算能力的提高而产生的一系列新的算法。 2 深度学习发展其概念由著名科学家Geoffrey Hinton等人…...

编程日记 2025/7/3 19:44:10

android framework.jar 在应用中使用

在开发APP中，有时会使用系统提供的framework.jar 来替代 android.jar, 在gradle中配置如下： 放置framework.jar 依赖配置 3 优先级配置 gradle.projectsEvaluated {tasks.withType(JavaCompile) {Set<File> fileSet options.bootstrapClasspat…...

编程日记 2025/6/30 6:03:56

1. state 和 props 的区别

2. state 和 props 的应用场景

3. 通过实际项目代码讲解 state 和 props 的应用

代码示例：使用 props 和 state 的计数器应用