001_探究setState的用法

最新推荐文章于 2024-02-07 23:45:03 发布
原创 最新推荐文章于 2024-02-07 23:45:03 发布 · 402 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨React组件中setState方法的使用，包括基本使用、异步调用、同步调用以及连续调用的情况。通过示例代码解析setState在不同场景下的行为，展示了如何根据需求选择合适的调用方式，以及在并发更新时如何合并state更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、setState的基本使用

import React, { Component } from 'react'

export default class index extends Component {
    state = { count: 0 }

    /**
     * 如果不依赖原来的值，建议使用对象方式调用setState
     */
    incrementByObject = () => {
        this.setState({ count: 5 }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByObject', this.state.count)
        })
    }

    /**
     *  如果依赖原来的值，建议使用方法方式调用setState
     */
    incrementByFunction = () => {
        this.setState(state => {
            return { count: state.count + 1 }
        }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByFunction', this.state.count)
        })
    }

    render() {
        const { count } = this.state
        console.log('render', count)
        return (
            <div>
                <h2>当前值是：{this.state.count}</h2>
                <button onClick={this.incrementByObject}>点击我+1==ByObject</button>
                <button onClick={this.incrementByFunction}>点击我+1==ByFunction</button>
            </div>
        )
    }
}

二、setState异步调用的方式

import React, { Component } from 'react'

export default class index extends Component {
    state = { count: 0 }

    /**
     * 1.如果不依赖原来的值，建议使用对象方式调用setState
     * 2.console.log('incrementByObject之前', this.state.count)
     *   和console.log('incrementByObject之后', this.state.count)
     *   两句代码是在render方法和this.setState方法回调之前执行。不是
     *   顺序执行的。所以是异步
     */
    incrementByObject = () => {
        console.log('incrementByObject之前', this.state.count)
        this.setState({ count: 5 }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByObject', this.state.count)
        })
        console.log('incrementByObject之后', this.state.count)
    }

    /**
     *  1.如果依赖原来的值，建议使用方法方式调用setState
     *  2.console.log('incrementByFunction之前', this.state.count)
     *    和console.log('incrementByFunction之后', this.state.count)
     *    两句代码是在render方法和this.setState方法回调之前执行。不是
     *    顺序执行的。所以是异步
     */
    incrementByFunction = () => {
        console.log('incrementByFunction之前', this.state.count)
        this.setState(state => {
            return { count: state.count + 1 }
        }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByFunction', this.state.count)
        })
        console.log('incrementByFunction之后', this.state.count)
    }

    /**
     *  1.console.log('componentDidMount之前', this.state.count)
     *    和console.log('componentDidMount之后', this.state.count)
     *    两句代码是在render方法和this.setState方法回调之前执行。不是
     *    顺序执行的。所以是异步
     */
    componentDidMount() {
        console.log('componentDidMount之前', this.state.count)
        this.setState({ count: 10 }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('componentDidMount', this.state.count)
        })
        console.log('componentDidMount之后', this.state.count)
    }

    render() {
        const { count } = this.state
        console.log('render', count)
        return (
            <div>
                <h2>当前值是：{this.state.count}</h2>
                <button onClick={this.incrementByObject}>点击我+1==ByObject</button>
                <button onClick={this.incrementByFunction}>点击我+1==ByFunction</button>
            </div>
        )
    }
}

三、setState同步调用的方式

import React, { Component } from 'react'

/**
 * setTimeout/Promise/dom绑定事件方式阻碍了react的事务，
 * 所以影响了this.setState方法的异步调用
 */
export default class index extends Component {
    state = { count: 0 }

    /**
     * 1.如果不依赖原来的值，建议使用对象方式调用setState
     * 2.console.log('incrementByObject之前', this.state.count)
     *   和console.log('incrementByObject之后', this.state.count)
     *   两句代码是在render方法和this.setState方法回调之前执行。不是
     *   顺序执行的。所以是异步
     */
    incrementByObject = () => {
        console.log('incrementByObject之前', this.state.count)
        this.setState({ count: 5 }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByObject', this.state.count)
        })
        console.log('incrementByObject之后', this.state.count)
    }

    /**
     * 通过setTimeout实现this.setState方法的同步
     * 执行顺序是
     * 1.console.log('incrementByObject之前', this.state.count)
     * 2.render
     * 3.this.setState方法回调执行
     * 4.console.log('incrementByObject之后', this.state.count)
     */
    incrementByObjectAndSetTimeoutSync = () => {
        setTimeout(() => {
            this.incrementByObject()
        })
    }

    /**
     * 通过Promise实现this.setState方法的同步
     * 执行顺序是
     * 1.console.log('incrementByObject之前', this.state.count)
     * 2.render
     * 3.this.setState方法回调执行
     * 4.console.log('incrementByObject之后', this.state.count)
     */
    incrementByObjectAndPromiseSync = () => {
        Promise.resolve().then(() => {
            this.incrementByObject()
        })
    }

    /**
     * 通过dom事件实现this.setState方法的同步
     * 执行顺序是
     * 1.console.log('incrementByObject之前', this.state.count)
     * 2.render
     * 3.this.setState方法回调执行
     * 4.console.log('incrementByObject之后', this.state.count)
     */
    incrementByObjectAndClickSync = () => {
        console.log('incrementByObjectAndClickSync',this.refs.bindClick)
        this.refs.bindClick.onclick = () => {
            this.incrementByObject()
        }
    }

    /**
     *  1.如果依赖原来的值，建议使用方法方式调用setState
     *  2.console.log('incrementByFunction之前', this.state.count)
     *    和console.log('incrementByFunction之后', this.state.count)
     *    两句代码是在render方法和this.setState方法回调之前执行。不是
     *    顺序执行的。所以是异步
     */
    incrementByFunction = () => {
        console.log('incrementByFunction之前', this.state.count)
        this.setState(state => {
            return { count: state.count + 1 }
        }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('incrementByFunction', this.state.count)
        })
        console.log('incrementByFunction之后', this.state.count)
    }

    /**
     *  1.console.log('componentDidMount之前', this.state.count)
     *    和console.log('componentDidMount之后', this.state.count)
     *    两句代码是在render方法和this.setState方法回调之前执行。不是
     *    顺序执行的。所以是异步
     */
    componentDidMount() {
        console.log('componentDidMount之前', this.state.count)
        this.setState({ count: 10 }, () => {
            /**
            * 这个方法没有参数，但是可以在这里获取更新之后state的值。
            * callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
            */
            console.log('componentDidMount', this.state.count)
        })
        console.log('componentDidMount之后', this.state.count)
    }

    render() {
        const { count } = this.state
        console.log('render', count)
        return (
            <div>
                <h2>当前值是：{this.state.count}</h2>
                <button onClick={this.incrementByObject}>点击我+1==ByObject</button>
                <button onClick={this.incrementByFunction}>点击我+1==ByFunction</button>
                <hr />
                <button onClick={this.incrementByObjectAndSetTimeoutSync}>通过setTimeout回调实现同步</button>
                <button onClick={this.incrementByObjectAndPromiseSync}>通过Promise回调实现同步</button>
                <button onClick={this.incrementByObjectAndClickSync}>通过dom事件回调实现同步</button>
                <button ref="bindClick">setState===Sync</button>
            </div>
        )
    }
}

四、setState连续调用

import React, { Component } from 'react'

/**
 * setState连续调用的时候，会出现合并的情况
 */
export default class index extends Component {
    state = { count: 0 }

    /**
     * 调用顺序
     * 1.console.log('incrementByObject之前', this.state.count) 0
     * 2.console.log('incrementByObject之后', this.state.count) 0
     * 3.render 1
     * 4.console.log('incrementByObject1', this.state.count) 1
     * 5.console.log('incrementByObject2', this.state.count) 1
     */
    incrementByObject = () => {
        console.log('incrementByObject之前', this.state.count)
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('incrementByObject1', this.state.count)
        })
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('incrementByObject2', this.state.count)
        })
        console.log('incrementByObject之后', this.state.count)
    }

    /**
     * 调用顺序
     * 1.console.log('incrementByFunction之前', this.state.count) 0
     * 2.console.log('incrementByFunction之后', this.state.count) 0
     * 3.render 2
     * 4.console.log('incrementByFunction1', this.state.count) 2
     * 5.console.log('incrementByFunction2', this.state.count) 2
     */
    incrementByFunction = () => {
        console.log('incrementByFunction之前', this.state.count)
        this.setState(state => {
            return { count: state.count + 1 }
        }, () => {
            console.log('incrementByFunction1', this.state.count)
        })
        this.setState(state => {
            return { count: state.count + 1 }
        }, () => {
            console.log('incrementByFunction2', this.state.count)
        })
        console.log('incrementByFunction之后', this.state.count)
    }

    componentDidMount() {
        console.log('componentDidMount之后', this.state.count)
    }

    render() {
        const { count } = this.state
        console.log('render', count)
        return (
            <div>
                <h2>当前值是：{this.state.count}</h2>
                <button onClick={this.incrementByObject}>点击我+1==ByObject</button>
                <button onClick={this.incrementByFunction}>点击我+1==ByFunction</button>
            </div>
        )
    }
}
React学习（三）（setState的使用，state的简写）
qq_52551375的博客
01-24 676
1.箭头函数： ES6 中声明函数的一种方式，更简短的函数并且不绑定 this。4.复习类中添加属性（不必写在构造器中，可直接添加）至此，已经实现了点击切换状态。2.复习类中的this指向。3.setState的使用。5.state总结【简写】
setState()方法使用详解
慕天远的博客
06-26 4062
当需要React Native重新渲染UI时，我们使用最多的应该就是setState函数了。本文对setState的使用做个总结。 1.setState介绍 React Native框架使用setState函数来合并状态机变量，setState函数的原型是： setState(oldState,callback) setState函数会将传入的函数的返回值与当前的状态机做一个合并操作： ...
10-setState的使用
sunnyboysix的博客
10-17 197
setState使用
react中setState的用法（学习react过程中的笔记）
Afterwade的博客
09-11 627
react中setState的用法 setState()更新状态的2种写法 1). setState(updater, [callback]), ​ updater为返回stateChange对象的函数: (state, props) => stateChange ​ 接收的state和props被保证为最新的 2). setState(stateChange, [callback]) ​ stateChange为对象, ​ callback是可选的回调函数, 在状态更新且界面
函数式的setState
lixiaonaaa的博客
02-20 1273
1，通常我们使用setState，会传入一个对象，这是对象式的setState。 const {count} = this.state this.setState({count:count+1}) 2，然而setState还有另外一种写法，就是函数式的setState。 this.setState( state => ({count:state.count+1})) 实际上，对象式的setState是函数式的setState的简写方式(语法糖)。 所以如果你的setState比较复杂，可
深入探究React状态管理及其高级用法
- 类组件使用"this.state"来管理状态，而函数组件在早期版本的React中无法直接拥有状态，只能通过"setState"方法更新状态。 - 随着React Hooks的引入，函数组件也可以拥有和管理状态，通过"useState"钩子可以实现...
深入探究JavaScript中的Lyfecycles测试方法
3. **更新阶段**：当组件接收新的props或调用setState方法时，会触发更新过程。涉及的方法有componentDidUpdate（组件已更新）和shouldComponentUpdate（决定组件是否更新）。shouldComponentUpdate帮助提高组件性能...
Flutter实现自定义UI组件的方法探究
它使用Dart语言编写，旨在帮助开发者通过一套代码构建高性能、高保真度的移动应用程序。Flutter具有快速开发、灵活性、精美的UI等特点，因此受到了广泛的关注和采用。 ## 1.2 自定义UI组件的意义及应用场景 在移动...
从源码入手探究一个因useImperativeHandle引起的Bug
虚幻私塾
10-28 2433
组件1则是通过props传递了两个父组件的方法，一个是用于间接地访问组件2中的方法，另一个则是可能导致父组件重渲染的方法（当然这种结构的安排明显是不太合理的，但由于项目历史包袱的原因咱就先不考虑这个问题了\doge）。其中的组件2因为要在父组件中调用它的内部方法，所以用。但这两种情况都会返回一个清理副作用的函数，而这个清理函数的任务就是——把我的。更新渲染中的执行时机都是比较熟悉的，唯独这个。），例如对DOM的增删改，以及我们熟知的。内部渲染流程的同学，应该知道，在。的清理函数也是在这时候完成的。
深入探究React状态：组件工作原理揭秘
要更新状态，我们不应该直接修改状态对象，而是应该使用`setState`方法。`setState`方法是异步的，它会合并现有的状态和提供的新状态，并且触发组件的重新渲染。正确使用`setState`不仅可以保证状态的正确更新，还能...
setState的使用-7
yangsm的博客
11-21 414
我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化； React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 必须通过setState的方法，来告知React数据已经发生了变化； 在组件开发中，并没有实现setState的方法，为什么可以调用呢？ setState方法是从Component中继承过来
setState用法总结
dongwang的博客
12-21 4249
1. setState传参 setState中，第一个参数可以传入对象，也可以是函数，第二个为可选参数，参数为一个回调函数，那么什么场景下传入对象？什么场景下使用函数，什么场景下需要传入第二个参数呢？ 如果state的更新不依赖于之前的state中的值，使用对象 如果state的更新依赖之前state中的值，则第一个参数传入函数 如果state更新完成后立马需要使用state的值，则需要传入第二个参数 2. setState是同步还是异步 如果在react生命周期函数中使用setState或者直接在re
React-50：setState
臧小川的博客
09-02 343
对象形式 也是最经常用到的 import React, { Component } from 'react'; export default class Demo extends Component { state = { count: 0 }; add = () => { //对象式的setState //1.获取原来的count值 const { count } = this.state; //2.更新状态 this.setState({ c.
setState怎么用?
Xiang_Gong_Ya_的博客
12-29 265
// 直接传入一个对象，定义要修改的状态属性和值（不会影响其他state） this.setState({ isLike: true }) // 传一个箭头函数 return {} this.setState((preState, props)=>{ // preState 是未改变前的state props当前组件的props return { isLike: !preState.isLike } }) setState 第二个参数 调用setState不管是传入对象还是
组件setState的使用
imkaifan的博客
08-25 181
状态是可变的 语法：this.setState({ 要修改的数据}) 注意：不要直接修改state 中的值，这是错误的！！！ setState() 作用：1. 修改 state 2. 更新UI 思想：数据驱动视图 setState() 方法接受的是一个对象参数（直接键值对去写就行，内部react自己会进行一个处理）。 export class Shijian extends React.Component { constructor() { super(); //es6里面规定的.
react 【二】 setState/react性能优化/dom操作
最新发布
weixin_46738453的博客
02-07 703
<h1 ref={this.titleRef}>你好啊</h1><h1 ref={(el) => (this.titleEl = el)}>第三种方式</h1><button onClick={(e) => this.getDom()}>获取DOM</button>
函数式的 setState 是 React 的未来
Galaxy_0的博客
01-31 173
函数式的 setState 是 React 的未来
[翻译&摘抄] React 未来之函数式 setState
YuqiRealm.com
01-03 705
原文地址：Functional setState is the future of React 原文作者：Justice Mba 译文出自：掘金翻译计划 原文链接：https://juejin.im/post/58cfcf6e44d9040068478fc6/ 译者：reid3290 校对者：sunui，imink温故知新1、React 是一个基于组件的 UI 库，组件基本上可以看作是一个
【译】函数式的 setState 是 React 的未来
weixin_34392435的博客
10-25 369
本文翻译自：Functional setState is the future of React – freeCodeCamp.org 译者注：昨天自己有遇到一个 setState 的坑，就是【React 踩坑记】setState 这样用可能会出错！这篇文章里记录的，上网 Google 了下看到这一篇，关于 setState，这篇文章讲解的很详细深入
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值