代码解析React中setState同步和异步问题

2024-11-27 13:52:03

React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScript库，即使React的主要作用是构建UI，但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案。

angular中用的是watcher对象，vue是观察者模式，react就是state了，他们各有各的特点，没有好坏之分，只有需求不同而选择不同。

React的官方网址：https://reactjs.org/GitHub

地址为：https://github.com/facebook/react

1.在React中，由React控制的事件处理函数，如onClick, onChange等，setState是异步的

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }
    }

    _onChange(e) {
        this.setState({
            name:' world'
        })

        console.log(this.state.name); //hello
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input'  value={this.state.name}  onChange={this._onChange.bind(this)} type="text"/>
      </div>
    );
  }
}

2.在原生JS监听的事件中,如addEventListener, setState是同步的

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }
    }

    _onChange(e) {
        // do something
    }

    componentDidMount() {
        let input = document.querySelector('.cp-input');
        input.addEventListener('click', ()=>{
            this.setState({
                name:' world'
            })

            console.log(this.state.name); //world
        })
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input'  value={this.state.name}  onChange={this._onChange.bind(this)} type="text"/>
      </div>
    );
  }
}

3.在setTimeout中，setStatet是同步的

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }
    }

    _onChange(e) {
        // do something
    }

    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                name:' world'
            })
            console.log(this.state.name); //world
        }, 1000)
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input'  value={this.state.name}  onChange={this._onChange.bind(this)} type="text"/>
      </div>
    );
  }
}

以上就是解析React中setState同步和异步代码详解的详细内容，更多关于React setState同步和异步的资料请关注我们其它相关文章！

详解React setState数据更新机制

为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re
react学习笔记之state以及setState的使用

在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作
深入研究React中setState源码

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

前言这篇文章原标题是 3 Reasons why I stopped using React.setState ,但是我对原文作者提出的论点不是很感冒,但是作者提出的三点对 React 新手来说是很容易忽略的地方,所以我在这里只提出部分内容,而且把标题改为使用React.setState需要注意的三点 . 正文对 React 新手来说,使用 setState 是一件很复杂的事情.即使是熟练的 React 开发,也很有可能因为 React 的一些机制而产生一些bug,比如下面这个例子: 文档
详解React中setState回调函数

在使用React过程中,中可以使用this.state来访问需要的某些状态,但是需要更新或者修改state时,一般而言,我们都会使用setState()函数,从而达到更新state的目的,setState()函数执行会触发页面重新渲染UI.但是!!!setState是异步的!!! 1. 语法: setState(updater[, callback]) // updater是要改变的state对象,callback是state导致的页面重新渲染的回调,等价于componentDidUpdate
React中setState的使用与同步异步的使用

在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setState来对组件的属性进行修改. 1.this.setState的两种定义方式定义初始状态 state = { count: 0 }, 如果此时有一个按钮,点击按钮让计数加1,我们可以有两种写法 (1)传递对象 this.setState({ count: this.state.count + 1}) (2)传递函数 this.setState((state, props) => ({
详解react setState

setState是同步还是异步自定义合成事件和react钩子函数中异步更新state 以在自定义click事件中的setState为例 import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); this.state = { count: 1 }; } handleClick = () => { this.setState({ count:
深入掌握 react的 setState的工作机制

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

React起源于Facebook的内部项目.React的出现是革命性的创新,React的是一个颠覆式的前端框架.在React官方这样介绍的它:一个声明式.高效.灵活的.创建用户界面的JavaScript库,即使React的主要作用是构建UI,但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案. angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同. React的官方网址:https:
关于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同步异步场景的使用

目录 setState同步异步场景描述原理保证内部数据统一启用并发更新参考 setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI.相比较于在使用Hooks完成组件下所需要的心智负担,setState就是在使用class完成组件下所需要的心智负担,当然所谓的心智负担也许叫做所必须的基础知识更加合适一些.
详细谈谈React中setState是一个宏任务还是微任务

目录前言面试官的问法是否正确?§ React 是如何控制 setState 的 ?§ 未来会有异步的 setState§ 总结前言最近有个朋友面试,面试官问了个奇葩的问题,也就是我写在标题上的这个问题. 能问出这个问题,面试官应该对 React 不是很了解,也是可能是看到面试者简历里面有写过自己熟悉 React,面试官想通过这个问题来判断面试者是不是真的熟悉 React
React 中 setState 的异步操作案例详解

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

进程同步用来实现程序并发执行时候的可再现性. 一．进程同步及异步的概念 1．进程同步:就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.也就是必须一件一件事做,等前一件做完了才能做下一件事.就像早上起床后,先洗涮,然后才能吃饭,不能在洗涮没有完成时,就开始吃饭.按照这个定义,其实绝大多数函数都是同步调用(例如sin,isdigit等).但是一般而言,我们在说同步.异步的时候,特指那些需要其他部件协作或者需要一定时间完成的任务.最常见的例子就是 sendmessage.该函数发送一个消
Python网络爬虫中的同步与异步示例详解

一.同步与异步 #同步编程(同一时间只能做一件事,做完了才能做下一件事情) <-a_url-><-b_url-><-c_url-> #异步编程 (可以近似的理解成同一时间有多个事情在做,但有先后) <-a_url-> <-b_url-> <-c_url-> <-d_url-> <-e_url-> <-f_url-> <-g_url-> <-h_url-> <--i_ur
解析React 中的Virtual DOM

React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. 这是Choerodon的一个前端页面在复杂的前端项目中一个页面可能包含上百个状态,

代码解析React中setState同步和异步问题

相关推荐

随机推荐