React 的setState 理解

  我们都知道在React中,setState() 方法是用来改变组件状态的,在项目中也一直用,也没有出现什么问题(使用方法太简单了),但今天看了一篇文章,提到了setState 使用时的两个注意点,加深了对setState()的认识。

  setState() 最简单的使用方式,就是给它传递一个对象,对象中的属性就是我们要改变的状态,对象中只写我们要改变的那些状态就可以了,react 会把我们这次所做的改变和原来没有做改变的状态进行合并,形成最新的状态,重新渲染组件。写一个简单的例子,点击按钮显示点击的次数,create-react-app 创建项目,在App.js 中写以下内容

import React from "react";

export default class App extends React.Component {

    state = {
        counter: 0
    }
    handleClick = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return (
            <div>
                <p>点击了{this.state.counter}次</p>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

  再简单不过了,但这时,你想增加一个是否点击的状态hasButtonBeenClicked, 只要counter > 0 就算点击了,相当然的,在setState() 方法中,加了

hasButtonBeenClicked 的更改

this.setState({
      counter: this.state.counter + 1,
      hasButtonBeenClicked: this.state.counter > 0 });

  app.js 更改如下:

export default class App extends React.Component {

    state = {
        counter: 0,
        hasButtonBeenClicked: false // 点击状态,默认是false
    }
    handleClick = () => {
        this.setState({
            counter: this.state.counter + 1,
            hasButtonBeenClicked: this.state.counter > 0  // 更改点击状态
        });
    }
    render() {
        return (
            <div>
                <p>是否点击了{this.state.hasButtonBeenClicked.toString()}, 点击了{this.state.counter}次</p>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

  你点击按钮一次,发现一个问题,是否点击显示false, 但确显示了点击了1次。

  

  这就是setState()的异步操作,一直知道setState()是异步改变状态,但没有这么写过,当调用setState 改变件的状态的时候,它并不会立即生效,React 为了提高效率,可能选择把几个状态的更改作为一组,一起改状态。也就是setState 中,如果我们更改的第二个或以后的状态,如果依赖第一个状态的改变,它有可能不生效。由于异步操作,第二个或以后的状态,不会取到最新的第一个状态的值。第二行中的hasButtonBeenClicked 中的this.state.counter 并不会获取到第一行中设置的最新状态,它仍然获取到的是this.state.counter 的旧值。

  如果,第二个状态依赖第一个状态,它就要用到setState 的第二个参数,回调函数,只有第一个状态set 成功之后,它才会执行这个回调, setState() 更改如下

handleClick = () => {
        this.setState({ counter: this.state.counter + 1 },
            () => this.setState({ hasButtonBeenClicked: this.state.counter > 0 }));
    }

  第二个注意点,就是重复更改一个值。当使用seState()重复地修改一个状态的值的时候(handleClick的for循环),它并不会把所有的装态值都反应出来,而是取一个最近的值就完事了。

handleClick = () => {
        for (let index = 0; index < 5; index++) {
            this.setState({ counter: this.state.counter + 1 });
        }
    }

  当点击按钮的时候,它显示的是1, 而不是5. 每点击一次,只加1. 这时要使用setState的第二种方式,setState的第一个参数,除了对象外,还可以接受一个函数(state, prop) 作为参数,要返回更新状态, 如下,这时你会发现显示5.

handleClick = () => {
    for (let index = 0; index < 5; index++) {
        this.setState(state => ({
            counter: state.counter + 1
        }))
    }
}

原文地址:https://www.cnblogs.com/SamWeb/p/11305180.html

时间: 2024-10-02 21:59:05

React 的setState 理解的相关文章

React的setState分析

前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实现对组件的管理,通过this.state()方法更新state.当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI. 本文针对React的SetState的源码来进行解读,根据陈屹老师的<深入React技术栈>加上自己的理解. 1. setState异

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

React中setState 什么时候是同步的,什么时候是异步的?

class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componentDidMount() { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 1 次 log this.setState({val: this.state.val + 1}); console.lo

react面试题——理解setState(源码object.assign)

setState是异步的方式 this.setState({ counter:this.state.counter+1 }) console.log(this.state.counter) setState是异步,执行最后一个setState 同步执行的方法,传递函数 1,this.setState(nextState=>{ return{ counter: nextState.counter+1 } }) 2,setTimeout(()=>{ this.changeValue() },100

个人关于React的一些理解

##React背景 React是当前前端最火的框架,它的理念思想及构建方法比AngularJS更适合做webApp. 它是由facebook团队研发并开源到社区,所以它有很强大的技术背景,而且它的架构方式也很新颖,有很大的发展前景,极有可能是未来前端框架的领头羊,所以我们可以多关注关注React这个框架. ##React的实现 React是一个组件化的开发方式,任何一个组件都可以被替换或者被更改,每个DOM节点都可以当做是一个组件,这个理念和我们常用的模块化有点类似. 而其功能之所以这么强大是因

[React] Call setState with null to Avoid Triggering an Update in React 16

Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling .setState with null no longer triggers an update in React 16. This means we can decided if the state gets updated within our .setState 

[React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State

In this lesson we'll explore using setState to synchronously update in componentDidMount. This allows for us to use getBoundingClientRect or other synchronous UI calls and make changes to the UI without a transient UI state. componentDidMount() is in

React的setState执行机制

1. setState基本特点 1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新 2. setState在React生命周期和合成事件中批量覆盖执行 在React的生命周期钩子和合成事件中,多次执行setState,会批量执行 具体表现为,多次同步执行的setState只有最后一次起作用,前面的全被覆盖 当遇到多个setState调用时候,会提取单次传递setState的对象,把他们合并在一起形成一个新的单一对象,并用这个单一的对象去做setSt

【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件) 组件性能优化 减轻state 减轻state:只存储跟组件渲染相关的数据(比如:count/ 列表数据 /loading等) 注意:不用做渲染的数据不要放在state中 对于这种需要在多个方法中用到的数据,应该放到this中 避免不必要的重新渲染 组件更新