React 组件中 State 的定义、使用及正确更新方式

​🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式

前言

在 React 应用开发中，state 是组件内部用来存储和管理数据的关键概念。它允许组件根据不同的状态展示不同的 UI。本文将详细介绍 state 的定义、使用方式以及如何正确地更新 state，帮助开发者更好地理解和运用这一核心特性。

目录

前言

1.1 state及其特点

1.2 state的定义和使用

1.2.1 es6的类 - 构造函数

1.2.2 es7的类 - 属性初始化器

1.3 如何正确的修改state

1.4 this.setState()方法及其特点

1.4.1 传递函数

1.4.2 传递对象

总结

1.1 state及其特点

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件

不要直接修改state：构造函数是唯一可以给 this.state 赋值的地方。

state更新可能是异步的：出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

state更新会被合并：当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state

1.2 state的定义和使用

目前react中的状态有两种使用方式：

1.2.1 es6的类 - 构造函数

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
import App from './09-App-state-es6'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
​

src/09-App-state-es6.jsx

import React, { Component } from 'react';
​
/*** ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。
这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。
如果不调用super()方法，子类就得不到自己的this对象。
​ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”*/
class App extends Component {// es6的类 - 构造函数constructor (props) {super(props) // 调用父类的constructor(props)this.state = { // 添加子类自己的实例属性和方法,在react中 state作为初始化状态的属性date: new Date()}}render() {return (<div>现在的时间是：{ this.state.date.toLocaleDateString()  + this.state.date.toLocaleTimeString() }</div>);}
}
​
export default App;

1.2.2 es7的类 - 属性初始化器

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
import App from './10-App-state-es7'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
​

src/10-App-state-es7.jsx

import React, { Component } from 'react';
​
// 推荐写法
class App extends Component {state = { // es7 类的属性date: new Date()}render() {return (<div>现在的时间是：{ this.state.date.toLocaleDateString()  + this.state.date.toLocaleTimeString() }！！！</div>);}
}
​
export default App;

1.3 如何正确的修改state

setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式.

将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。

setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。为了消除隐患，请使用 componentDidUpdate 或者 setState 的回调函数（setState(updater, callback)），这两种方式都可以保证在应用更新后触发。

记住修改状态的三大原则：

  • 不要直接修改 State

state = { a: 10 }
this.state.a = 100 // ❌

  • state 的更新可能是异步的

state = { a: 10 }
this.setState({a: this.state.a + 1 })
this.setState({a: this.state.a + 1 })
this.setState({a: this.state.a + 1 })
console.log(this.state.a) // 10

  • state 的更新会被合并

1.4 this.setState()方法及其特点

setState() 会对一个组件的 state 对象安排一次更新。当 state 改变了，该组件就会重新渲染。

setState()可以添加两个参数,

setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行

1.4.1 传递函数

参数一为带有形式参数的 updater 函数：

this.setState((state, props) => stateChange[, callback] )

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
import App from './11-App-setState-function'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
​

src/11-App-setState-function.jsx

import React, { Component } from 'react';
​
class App extends Component {state = {count: 100}render() {return (<div>{ this.state.count }<button onClick={ () => {this.setState((state, props) => {console.log(state, props)return {count: state.count + 1}})this.setState((state, props) => {console.log(state, props)return {count: state.count + 1}})this.setState((state, props) => {console.log(state, props)return {count: state.count + 1}})} }>加</button></div>);}
}
​
export default App

updater 函数中接收的 state 和 props 都保证为最新。updater 的返回值会与 state 进行浅合并。

1.4.2 传递对象

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
// import App from './11-App-setState-function'
import App from './12-App-setState-object'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/12-App-setState-object.jsx

import React, { Component } from 'react';
// 为什么？
// const obj = { a: 100 }
// es6 中对象合并
// const newObj = Object.assign(obj, {a: 100 + 1}, {a: 100 + 1}, {a: 100 + 1})
// console.log(newObj) // { a: 101 }
​
class App extends Component {state = {count: 10}render() {return (<div>{ this.state.count }<button onClick={ () => {this.setState({count: this.state.count + 1})this.setState({count: this.state.count + 1})this.setState({count: this.state.count + 1})console.log(this.state.count)} }>加</button></div>);}
}
​
export default App;

这种形式的 setState() 是异步的，并且在同一周期内会对多个 setState 进行批处理,相当于

Object.assign(
prevState,
{count: this.state.count + 1},
{count: this.state.count + 1},
...
)

后调用的 setState() 将覆盖同一周期内先调用 setState 的值，因此商品数仅增加一次。如果后续状态取决于当前状态,建议使用 updater 函数的形式代替（前面案例已经实现）。或者在第二个参数中再继续操作。

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
// import App from './11-App-setState-function'
// import App from './12-App-setState-object'
import App from './13-App-setState-callback'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/13-App-setState-callback.jsx

import React, { Component } from 'react';
​
​
class App extends Component {state = {count: 10}render() {return (<div>{ this.state.count }<button onClick={ () => {this.setState({count: this.state.count + 1}, () => {this.setState({count: this.state.count + 1}, () => {this.setState({count: this.state.count + 1})})})console.log(this.state.count) // 10} }>加</button></div>);}
}
​
export default App;

思考题：

1.何时以及为什么 setState() 会批量执行？

2.为什么不直接更新 this.state？

总结

通过本文的介绍，我们了解了 state 在 React 组件中的重要性，以及如何在 ES6 和 ES7 类组件中定义和使用 state。同时，我们还探讨了正确更新 state 的方法，包括使用 setState() 方法时需要注意的事项。遵循这些最佳实践，可以帮助我们避免常见的陷阱，提高应用的性能和可靠性。

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

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

相关文章

C++（十二）

C++（十二）

前言&#xff1a; 本文将进一步讲解C中&#xff0c;条件判断语句以及它是如何运行的以及内部逻辑。 一&#xff0c;if-else,if-else语句。 在if语句中&#xff0c;只能判断两个条件的变量&#xff0c;若想实现判断两个以上条件的变体&#xff0c;就需要使用if-else,if-else语…
阅读更多...
查询产品所涉及的表有（product、product_admin_mapping）

查询产品所涉及的表有（product、product_admin_mapping）

文章目录 1、ProductController2、AdminCommonService3、ProductApiService4、ProductCommonService5、ProductSqlService1. 完整SQL分析可选部分&#xff08;条件筛选&#xff09;&#xff1a; 2. 涉及的表3. 总结4. 功能概述 查询指定管理员下所有产品所涉及的表&#xff1f;…
阅读更多...
Java应用服务器JVM配置与优化全面指南

Java应用服务器JVM配置与优化全面指南

Java应用服务器JVM配置与优化全面指南 1. JVM基础知识 Java虚拟机&#xff08;JVM&#xff09;是Java平台的核心&#xff0c;负责执行Java字节码。理解JVM的基本组成和工作原理是进行有效优化的基础。 1.1 JVM主要组件 类加载器&#xff1a;负责加载、链接和初始化类文件。…
阅读更多...
游戏引擎学习第36天

游戏引擎学习第36天

仓库 :https://gitee.com/mrxiao_com/2d_game 回顾之前的内容 在这个程序中&#xff0c;目标是通过手动编写代码来从头开始制作一个完整的游戏。整个过程不使用任何库或现成的游戏引擎&#xff0c;这样做的目的是为了能够全面了解游戏执行的每一个细节。开发过程中&#xff0…
阅读更多...
【SpringMVC】用户登录器项目，加法计算器项目的实现

【SpringMVC】用户登录器项目，加法计算器项目的实现

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;用户登录项目实现 1&#xff1a;需求 2&#xff1a;准备工作 &#xff08;1&#xf…
阅读更多...
3.5 认识决策树

3.5 认识决策树

3.5 认识决策树 3.5.1 认识决策树 如何高效的进行决策&#xff1f; 特征的先后顺序 3.5.2 决策树分类原理详解 已知有四个特征&#xff0c;预测 是否贷款给某个人。 先看房子&#xff0c;再看工作&#xff0c;是否贷款。 年龄&#xff0c;信贷情况&#xff0c;工作&#…
阅读更多...
MyBatis-Plus分页查询方式

MyBatis-Plus分页查询方式

分页查询基本方式 SpringBootTest(classes LearningApplication.class) public class MPTest {AutowiredILearningLessonService lessonService;Testpublic void test(){/*** Page<LearningLesson>&#xff1a;MyBatisPlus提供的分页对象* 1&#xff1a;当前页数* 2&am…
阅读更多...
AI智能体Prompt预设词指令大全+GPTs应用使用

AI智能体Prompt预设词指令大全+GPTs应用使用

AI智能体使用指南 直接复制在AI工具助手中使用&#xff08;提问前&#xff09; 可前往SparkAi系统用户官网进行直接使用 SparkAI系统介绍文档&#xff1a;Docs 常见AI智能体GPTs应用大全在线使用 自定义添加制作AI智能体进行使用&#xff1a; 文章润色器 你是一位具有敏锐洞察…
阅读更多...
MYSQL字符集和校对规则

MYSQL字符集和校对规则

文章目录 MYSQL字符集MYSQL默认字符集MySQL常见字符集 MYSQL校对规则校对规则总结 MYSQL字符集 UTF(Unicode Tranformation Format)是Unicode字符集规范的其中一个编码方式。 各字符编码详解可参考&#xff1a;字符编码发展历史 MYSQL默认字符集 5.7版本及之前&#xff1a;…
阅读更多...
K8S，StatefulSet

K8S，StatefulSet

有状态应用 Deployment实际上并不足以覆盖所有的应用编排问题&#xff1f; 分布式应用&#xff0c;它的多个实例之间&#xff0c;往往有依赖关系&#xff0c;比如&#xff1a;主从关系、主备关系。 还有就是数据存储类应用&#xff0c;它的多个实例&#xff0c;往往都会在本地…
阅读更多...
子类有多个父类的情况下Super不支持指定父类来调用方法

子类有多个父类的情况下Super不支持指定父类来调用方法

1、Super使用方法 super()函数在Python中用于调用父类的方法。它返回一个代理对象&#xff0c;可以通过该对象调用父类的方法。 要使用super()方法&#xff0c;需要在子类的方法中调用super()&#xff0c;并指定子类本身以及方法的名称。这样就可以在子类中调用父类的方法。 …
阅读更多...
Mac电脑如何解压rar压缩包

Mac电脑如何解压rar压缩包

group 868373192 second group 277356808 在 macOS 上解压 RAR 文件&#xff0c;你可以使用以下几种方法&#xff1a; 方法 1: 使用 The Unarchiver 下载并安装 The Unarchiver: 你可以从 Mac App Store 下载 The Unarchiver。 解压 RAR 文件: 找到你想要解压的 RAR 文件。 …
阅读更多...
《深入浅出HTTPS》读书笔记（16）：消息验证码算法分类

《深入浅出HTTPS》读书笔记（16）：消息验证码算法分类

MAC算法有两种形式&#xff0c;分别是CBC-MAC算法和HMAC算法。 CBC-MAC算法从块密码算法的CBC分组模式演变而来&#xff0c;简单地说就是最后一个密文分组的值就是MAC值。 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法使用Hash算法作为加密基元&am…
阅读更多...
又一个ansible例子

又一个ansible例子

这个例子有点复杂&#xff0c;他在被控端上采集CPU 内存和磁盘利用率&#xff0c;并且以模板的形式保存在被控端&#xff0c;最后再把这个结果文件从被控端取回来。综合用到了shell、register、template和fetch4个模块 --- - name: get cpu mem and disk hosts: all tasks…
阅读更多...
使用国内镜像源加速Qt“更新/安装”的方法

使用国内镜像源加速Qt“更新/安装”的方法

QT更新/安装时&#xff0c;国外源下载很慢&#xff0c;国内镜像源也因网络环境的不同而速度各异&#xff0c;下文给出国内镜像源的配置方法。 一、命令行 1、切换对应目录&#xff0c;更新器默认目录是 C:\Qt 2、文件名镜像源 安装示例&#xff1a; .\qt-unified-windows-x…
阅读更多...
包管理器npm, cnpm, yarn 和 pnpm 的命令

包管理器npm, cnpm, yarn 和 pnpm 的命令

npm (Node Package Manager) 安装与更新 npm install 或 npm i&#xff1a; 安装项目依赖&#xff1a;根据 package.json 文件安装所有列出的依赖。参数&#xff1a; -S, --save&#xff1a;保存到 dependencies&#xff08;默认行为&#xff09;。-D, --save-dev&#xff1a;…
阅读更多...
python中权重剪枝，低秩分解，量化技术 代码

python中权重剪枝，低秩分解，量化技术 代码

目录 python中权重剪枝，低秩分解，量化技术 代码 权重剪枝 低秩分解 scipy 量化技术 python中权重剪枝，低秩分解，量化技术 代码 权重剪枝 权重剪枝可以通过PyTorch的torch.nn.utils.prune模块实现。以下是一个简单的例子： import torch import torch.nn as nn impor…
阅读更多...
如何让Google快速收录你的页面？

如何让Google快速收录你的页面？

要让Google更快地收录你的网站内容&#xff0c;首先需要理解“爬虫”这个概念。Google的爬虫是帮助它发现和评估网站内容质量的工具&#xff0c;如果你的页面质量高且更新频率稳定&#xff0c;那么Google爬虫更可能频繁光顾。通常情况下&#xff0c;通过Google Search Console&…
阅读更多...
使用 Flutter 进行移动应用开发：深入探索

使用 Flutter 进行移动应用开发：深入探索

文章目录 前言一、介绍二、安装 Flutter 环境三、Flutter 应用结构与基础组件四、状态管理策略五、高级主题结语 前言 随着移动技术的迅猛发展&#xff0c;跨平台开发的需求日益增长。开发者们一直在寻找一种既能保证应用性能又能减少开发成本和时间的技术方案。Flutter 应运而…
阅读更多...
qtcanpool 知 10：包管理雏形

qtcanpool 知 10：包管理雏形

文章目录 前言痛点转机雏形实践后语 前言 曾听闻&#xff1a;C/Qt 没有包管理器&#xff0c;开发起来太不方便。这是一个有过 node.js 开发经验的人对 Qt 的吐槽。 确实&#xff0c;像 python、golang、node.js 这些编程语言都有包管理器&#xff0c;给用户带来了极佳的开发体…
阅读更多...
最新文章

Copyright @ 2022~2023