深入掌握 react的 setState的工作机制

react 是单向数据流，若想要改变已有组件的外观，我们只能通过更改组件的 props 或者更新组件的 state。在 react 项目的代码中我们操作最多的就是 this.setState 方法。下面对 setState 方法进行详细的说明。

<!--more -->

setState要点：react 框架为了提高性能，会对 state 的更新进行收集、合并、再进行一次批量的状态更新。这种机制常常导致一些意想不到的情况。

setState 有两种调用形式：

向 setState 传递对象
setState()并不会立即触发 state 的更新。

//this.state.demo = 1;
handleClick = () => {
  this.setState({demo: 2});
  console.log(this.state.demo);// 1
}

1、🔔注意：在 addEventListener、setTimeout、ajax 回调中 this.setState 是立即触发的。

2、setState 会合并更新，可能会造成状态更新的丢失

handleClick = () => {
  this.setState({demo: this.state.demo + 1});
  this.setState({demo: this.state.demo + 1});
}
//click 之后 demo 为2而不是3

综上：在同一代码块中不要多次调用 this.setState 方法

react 的 setState 还提供了另一种调用形式： this.setState(callbackFunc)

this.setState((previousState, currentProps) => {
  return { ...previousState, foo: currentProps.bar };
});

该语法和直接为 setState 传递对象不同,不会合并更新。

// demo + 1
handleSyncStateChange = () => {
  this.setState({
    demo: this.state.demo + 1
  });
  this.setState({
    demo: this.state.demo + 1
  });

}
// demo + 2
handleAsyncStateChange = () => {
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
}

refs

Async Nature Of setState

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ReactNative页面跳转实例代码

    ReactNative页面跳转实例代码

    效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte

  • React实现双向绑定示例代码

    前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性 双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数

  • React.js入门学习第一篇

    React.js入门学习第一篇

    一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

  • React组件的三种写法总结

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

  • 使用React实现轮播效果组件示例代码

    使用React实现轮播效果组件示例代码

    前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req

  • 实现React单页应用的方法详解

    实现React单页应用的方法详解

    首先在学习这门框架前,你需要对以下知识有所了解: 1.原生JS基础 2.CSS基础 3.npm包管理基础 4.webpack构建项目基础      5.ES6规范 以上五个知识点也是目前学习其他前端框架所必须了解的前置任务. JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了.而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势.至于ES6规范虽然现在主流浏览器还不兼容,但可以

  • Reactor反应器的实现方法详解

    大多数应用都会使用ACE_Reactor::instance()提供的默认反应器实例.但是你也可以选择自己的反应器,这是因为ACE使用了Bridge模式(使用两个不同的类:一个是编程接口,另一个是实现,第一个类会把各个操作传给第二个类).例如使用线程池反应器实现:ACE_TP_Reactor* tp_reactor = new ACE_TP_Reactor;ACE_Reactor* my_reactor = new ACE_Reactor(tp_reactor, 1);//1表示my_react

  • 深入掌握 react的 setState的工作机制

    react 是单向数据流,若想要改变已有组件的外观,我们只能通过更改组件的 props 或者更新组件的 state.在 react 项目的代码中我们操作最多的就是 this.setState 方法.下面对 setState 方法进行详细的说明. <!--more --> setState要点:react 框架为了提高性能,会对 state 的更新进行收集.合并.再进行一次批量的状态更新.这种机制常常导致一些意想不到的情况. setState 有两种调用形式: 向 setState 传递对象 s

  • react进阶教程之异常处理机制error Boundaries

    react进阶教程之异常处理机制error Boundaries

    目录 Error Boundaries介绍 ComponentDidCatch 参数 触发error boundaries后程序要走向哪里? 对于不能捕获的错误的新处理方式 在堆中跟踪component try/catch 如何? Event Handlers怎么样? React 15后的函数命名改变 总结 该文章翻译自官网 https://reactjs.org/docs/error-boundaries.html 该文章包含以下内容: 1.Error Boundaries介绍 2.Compo

  • 深入研究React中setState源码

    React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定.修改数据的同时,可以实现View的刷新.这大大简化了我们的逻辑,只用关心数据流的变化,同时减少了代码量,使得后期维护也更加方便.这个特性则要归功于setState()方法.React中利用队列机制来管理state,避免了很多重复的View刷新.下面我们来从源码角度探寻下setState机制. 1 还是先声明一个组件,从最开始一步步来寻源: class App extends Comp

  • 详解React Hooks是如何工作的

    1. React Hooks VS 纯函数 React Hook 说白了就是 React V18.6 新增的一些 API,API的本质就是提供某种功能的函数接口.因此,React Hooks 就是一些函数,但是 React Hooks 不是纯函数. 什么是纯函数呢?就是此函数在相同的输入值时,需产生相同的输出,并且此函数不能影响到外面的数据. 简单理解就是函数里面不能用到在外面定义的变量,因为如果用到了外面定义的变量,当外面的变量改变时会影响函数内部的计算,函数也会影响到外面的变量. 对于 Re

  • 关于React中setState同步或异步问题的理解

    目录 1. setState同步?异步? 2. 表现为异步 1. React 合成事件 2. 生命周期函数 3. 表现为同步 1. 原生事件 2. setTimeout 4. setState的第二个参数 1. setState同步?异步? 在 React 的类式组件中,我们可以使用setState方法更新state状态.但有些时候使用setState之后,得不到最新的数据. 其实 React 中setState本身执行的过程和代码是同步的,只是因为 React 框架本身的性能优化机制而导致的.

  • React 中 setState 的异步操作案例详解

    React 中 setState 的异步操作案例详解

    目录 前言 React 中的 setState 为什么需要异步操作? 什么时候setState会进行同步操作? 前言 在使用state的时候, 如果我们企图直接修改state中的某一个值之后直接打印(使用)他,就会发现,他其实并没有改变. 就像下面的例子,企图通过点击事件之后就使用修改之后的state的值,但是会发state中的并没有被立即修改,还是原先的值,我们都知道那是因为 setState就相当于是一个异步操作,不能立即被修改. import React, { Component } fr

  • tomcat中Servlet的工作机制详细介绍

    tomcat中Servlet的工作机制详细介绍

    tomcat中Servlet的工作机制 在研究Servlet在tomcat中的工作机制前必须先看看Servlet规范的一些重要的相关规定,规范提供了一个Servlet接口,接口中包含的重要方法是init.service.destroy等方法,Servlet在初始化时要调用init方法,在销毁时要调用destroy方法,而对客户端请求处理时则调用service方法.对于这些机制的支持都必须由Tomcat内部去支持,具体则是由Wrapper容器提供支持. 在tomcat中消息流的流转机制是通过四个不

  • 详解OpenStack云平台的网络模式及其工作机制

    详解OpenStack云平台的网络模式及其工作机制

    网络,是OpenStack的部署中最容易出问题的,也是其结构中难以理清的部分.经常收到关于OneStack部署网络方面问题和OpenStack网络结构问题的邮件.下面根据自己的理解,谈一谈OpenStack的虚拟网络.网络拓扑和网络流.个人理解有限,仅抛砖引玉,有问题请指正,谢谢. 一.相关概念和要点(可跳过) 1.OpenStack中nova-network的作用 OpenStack平台中有两种类型的物理节点,控制节点和计算节点.控制节点包括网络控制.调度管理.api服务.存储卷管理.数据库管

  • Session的工作机制详解和安全性问题（PHP实例讲解）

    Session的工作机制详解和安全性问题（PHP实例讲解）

    我们先简单的了解一些http的知识,从而理解该协议的无状态特性.然后,学习一些关于cookie的基本操作.最后,我会一步步阐述如何使用一些简单,高效的方法来提高你的php应用程序的安全性以及稳定行. 我想大多数的php初级程序员一定会认为php默认的session机制的安全性似乎是有一定保障的,事实恰好相反 – php团队只是提供了一套便捷的session的解决方案提供给程序员使用,至于安全性的话,应该由程序员来加强,这是应用程序开发团队的责任.因为,这里面的方法很多,可以这么说吧,没有最好,只

  • Javascript 引擎工作机制详解

    Javascript 引擎工作机制 javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A

随机推荐