【React】state和props有什么区别?

1. state

一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state,一般在constructor中初始化
当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用,并且重新调用组件render方法。如下面的例子:

class Button extends React.Component{constructor() {super();this.state = {count: 0,}}updateCount() {this.setState((prevState, props) => {return { count:prevState.count + 1};});}render(){return(<button onClick={() => this.updateCount()}>Clicked  {this.state.count} times</button>)}
}

setState 还可以接受第二个参数,他是一个函数,会在setState调用完成并且组件开始重新渲染时调用,可以用来监听渲染是否完成

this.setState({name:'supersharerui'},()=>console.log('setState finished')
)

2.props

React 的核心思想就是组件化思想,而且页面会被切分成一些独立的、可复用的组件
组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据
react 具有单项数据流的特性,所以他的主要作用是从父组件向子组件中传递数据
props除了可以传递字符串,数字,还可以传递对象,数组甚至回调函数,如下

class Welcome extends React.Component {render (){return <h1> hello { this.props.name }</h1>}
}
const element=<Welcome name='rui' onNameChange={this.handleName}/>

上述name与onNameChange 方法都能在子组件的props变量中访问
在子组件中,props在内部不可改变的,如果想要改变他,只能通过外部组件传入新的props来重新渲染子组件,否则子组件的props和展示形式不会改变

3.区别

相同点:

  • 两者都是JavaScript对象
  • 两者都是用于保存信息
  • props和state都能触发渲染更新

区别

  • props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
  • props 在组件内部是不可改变的,但 state 在组件内部可以进行修改
  • state 是多变的、可以修改的

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

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

相关文章

JS实现chatgpt数据流式回复效果

最近高了一个简单chatgpt对话功功能&#xff0c;回复时希望流式回复&#xff0c;而不是直接显示结果&#xff0c;其实很简单&#xff0c;前端流式读取即可&#xff0c;后端SSE实现流式传输 前端用到fetch获取数据&#xff0c;然后利用reader读取 let requestId parseInt(Ma…

【Python】成功解决TypeError: ‘tuple‘ object does not support item assignment

【Python】成功解决TypeError: ‘tuple’ object does not support item assignment &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

C语言对应汇编代码分析用gdb

在 GDB&#xff08;GNU 调试器&#xff09;中&#xff0c;layout 命令用于控制调试会话期间显示的窗口布局。它允许您在单个 GDB 窗口中同时查看源代码、汇编代码、寄存器内容等&#xff0c;以帮助您更好地理解程序的执行状态。以下是 layout 命令的基本用法和示例&#xff1a;…

算法归纳【数组篇】

目录 二分查找1. 前提条件&#xff1a;2. 二分查找边界 2.移除元素有序数组的平方长度最小的子数组59.螺旋矩阵II54. 螺旋矩阵 二分查找 参考链接 https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html#%E6%80%9D%E8%B7%AF 1. 前提条件&#xff1a; 数…

SQL24 统计每个用户的平均刷题数

题意明确&#xff1a; 仅查看山东大学的用户在不同难度下的每个用户的平均答题题目数 问题分解&#xff1a; 限定条件&#xff1a;山东大学的用户 up.university"山东大学"&#xff1b;不同难度&#xff1a;按难度分组group by difficult_level平均答题数&#xff…

阿里云ECS磁盘扩容操作手册

云原生专栏大纲 文章目录 ESC磁盘扩容步骤前提条件云盘备份云盘扩容扩容分区和文件系统前提条件操作视频操作步骤准备工作&#xff1a;获取目标云盘信息步骤1&#xff1a;扩容分区步骤2&#xff1a;扩容文件系统 ESC磁盘扩容步骤 扩容已有云盘的操作步骤和注意事项_云服务器 …

影响哈默纳科Harmonic减速机使用寿命的5大因素

哈默纳科HarmonicDrive减速机以其轻量、小型、传动效率高、减速范围广、精度高等特点&#xff0c;被广泛应用于各种传动系统中。然而&#xff0c;尽管哈默纳科Harmonic减速机具有诸多优势&#xff0c;但其使用寿命仍可能受到多种因素的影响。 首先&#xff0c;环境因素对哈默纳…

ThreadLocal, InheritableThreadLocal和TransmittableThreadLocal

ThreadLocal, InheritableThreadLocal和TransmittableThreadLocal ThreadLocal(TL) 后续部分地方会使用ThraedLocal简称为TL 什么是TL? ThreadLocal是Java中的一个类, 也称为线程本地变量, 它提供了线程局部变量的功能。每个ThreadLocal对象都可以存储一个线程本地的变量副…

STM32的IO模拟串口

串口的时序就不再多讲了&#xff0c;主要是分享一个比自己写的IO模拟串口的实例 申明&#xff1a; 这个波特率为115200 分频系数为8 自动重载值为68 约等于8.7微秒 使用其他波特率或者IO口&#xff0c;只需要修改.h文件中的对应参数即可 头文件 #ifndef IO_UART_H #def…

Service Mesh:如何为您的微服务架构带来可靠性和灵活性

在云原生架构中&#xff0c;Service Mesh 技术成为了微服务架构中不可或缺的一环。本文灸哥将和你一起探讨 Service Mesh 技术的原理、功能和实践&#xff0c;帮助架构师和开发人员更好地理解和应用这一关键技术。 1、Service Mesh 技术概述 Service Mesh 又称为服务网格&…

世界的本质是旋转(5)-在复平面上驱动软件无线电SDR发射BPSK波形

在上一篇文章中&#xff0c;我们介绍了复平面、拍照采样的一些思维实验。从本节开始&#xff0c;转入现实应用&#xff0c;通过控制复平面向量的位置&#xff0c;实现一个完整的BPSK全双工通信通道。 发射方&#xff1a;通过控制复平面向量在各个时刻的位置来携带信息的技术&a…

Axure RP 10:让原型设计更快、更直观、更智能 mac版

Axure RP 10是一款强大的原型设计工具&#xff0c;它能够帮助设计师快速创建高保真、交互式的原型&#xff0c;从而更好地展示和测试设计方案。这款软件凭借其直观易用的界面和丰富的功能&#xff0c;已经成为了许多设计师的首 选工具。 Axure RP 10 for Mac版软件获取 首先&a…

将D*算法应用到llm解码

将D算法应用于LLM解码是一个非传统的尝试&#xff0c;因为D算法通常用于动态环境中的路径规划&#xff0c;而语言模型解码是一个序列生成问题。然而&#xff0c;我们可以尝试将D算法的原理应用到解码过程中&#xff0c;特别是在处理动态变化的环境或者需要实时更新解码路径的场…

C++之进程管理

目录 1、创建进程 2、获取指定进程PID 3、结束进程 4、进程枚举 进程是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配的基本单位&#xff0c;也是操作系统结构的基础。它是操作系统动态执行的基本单元&#xff0c;在传统的操作系统中&#…

AI论文速读 | 【综述】城市计算中跨域数据融合的深度学习:分类、进展和展望

题目&#xff1a;Deep Learning for Cross-Domain Data Fusion in Urban Computing: Taxonomy, Advances, and Outlook 作者&#xff1a;Xingchen Zou, Yibo Yan, Xixuan Hao, Yuehong Hu, Haomin Wen&#xff08;温皓珉&#xff09;, Erdong Liu, Junbo Zhang&#xff08;张钧…

进程之舞:操作系统中的启动、状态转换与唤醒艺术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

解决QT cc1plus.exe: error: out of memory allocating

QT中增加资源文件过大时&#xff0c;会编译不过&#xff0c;报错&#xff1a; cc1plus.exe: out of memory allocating 1073745919 bytes 使用qrc资源文件&#xff0c;也就是在QT的工程中添加资源文件&#xff0c;就是添加的资源文件&#xff08;如qrc.cpp&#xff09;会直接被…

简明固体物理--晶体的形成与晶体结构的描述

简明固体物理-国防科技大学 chapter 1 Formation of Crystal Contents and roadmapQuantum Mechanics and atomic structureElectronsOld quantum theoryMethod of Quantum MechanicsDistributing functions of micro-particles BindingCrystal structure and typical crystal…

Compose基础之State状态

Compose基础之State状态 Stateless和Stateful什么是Stateless&#xff0c;让我看下面代码Stateless它有什么特点呢Stateless它是如何实现避免无效重组的呢什么是Stateful&#xff0c;让我看下面代码 Compose中的State<T>State子类之MutableState 状态的恢复与持久化remem…