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

react setState学习记录

react setState学习记录

  • 1.总体看来
  • 2.setState的执行是异步的
  • 3.函数式setState

1.总体看来

(1). setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
(2). setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则:
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取

2.setState的执行是异步的

一般可能setState都是直接this.setState({})使用的

import React, { Component } from 'react'export default class Demo extends Component {state = {count:0}add = ()=>{//对象式的setState//1.获取原来的count值const {count} = this.state//2.更新状态//setState其实是同步的,但是交给了react去执行,不是马上去执行执行是异步的this.setState({count:count+1},()=>{console.log(this.state.count);})console.log('12行的输出',this.state.count); }render() {return (<div><h1>当前求和为:{this.state.count}</h1><button onClick={this.add}>点我+1</button></div>)}
}

在这里插入图片描述
可以看到控制台的打印出来的值是不一样的,回调里可以拿到更新后的准确值,有点类似于vue的$nextTick

3.函数式setState

函数式的setState可以直接到state和props参数

    this.setState((state, props) => {console.log(state, props);return { count: state.count + 1 };},() => {console.log(this.state.count);});
http://www.lryc.cn/news/24772.html

相关文章:

  • Docker容器cpu利用率问题
  • FreeRTOS入门(06):任务通知
  • 谷歌seo做的外链怎样更快被semrush识别
  • Java | IO 模式之 JavaBIO 应用
  • C语言学习及复习笔记-【18】C内存管理
  • linux--多线程(一)
  • 计算机组成原理(2.1)--系统总线
  • C语言数组【详解】
  • 并行与体系结构会议
  • 【巨人的肩膀】JAVA面试总结(三)
  • 嵌入式 STM32 SHT31温湿度传感器
  • 哪款蓝牙耳机打电话好用?打电话音质好的蓝牙耳机
  • 【C++】-- 内存泄漏
  • C++ STL学习之【string类的模拟实现】
  • Selenium基于POM的自动化测试实践
  • 记录每日LeetCode 2373.矩阵中的局部最大值 Java实现
  • QT中级(6)基于QT的文件传输工具(2)
  • 【Linux】工具(3)——gcc/g++
  • Android文件选择器
  • 《MySql学习》 Select 查询语句慢的非性能原因
  • Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
  • 【ES】Elasticsearch-深入理解索引原理
  • pdf压缩文件大小的方法是什么?word文件怎么批量转换成pdf格式?
  • 论文阅读——FECANet:应用特征增强的上下文感知小样本语义分割网络
  • 数组模拟常见数据结构
  • ADC0832的AD模数转换原理及编程
  • 【工具插件类教学】UnityPackageManager私人定制资源工具包
  • 【软件测试】2023年了还不会接口测试?老鸟总结接口测试面试谁还敢说我不会......
  • 类Vuex轻量级状态管理实现
  • Java 基本数据类型