001_探究setState的用法

最新推荐文章于 2024-02-07 23:45:03 发布
最新推荐文章于 2024-02-07 23:45:03 发布
阅读量340 收藏
点赞数
分类专栏： # React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Duckdan/article/details/119805643
版权

一、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>
        )
    }
}
Duckdan
关注
专栏目录
setState()方法使用详解
慕天远的博客
06-26 3956
当需要React Native重新渲染UI时，我们使用最多的应该就是setState函数了。本文对setState的使用做个总结。 1.setState介绍 React Native框架使用setState函数来合并状态机变量，setState函数的原型是： setState(oldState,callback) setState函数会将传入的函数的返回值与当前的状态机做一个合并操作： ...
setState的使用-7
yangsm的博客
11-21 368
我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化； React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 必须通过setState的方法，来告知React数据已经发生了变化； 在组件开发中，并没有实现setState的方法，为什么可以调用呢？ setState方法是从Component中继承过来
10-setState的使用
sunnyboysix的博客
10-17 165
setState使用
react中setState的用法（学习react过程中的笔记）
Afterwade的博客
09-11 581
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 1231
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比较复杂，可
Flutter实现自定义UI组件的方法探究
它使用Dart语言编写，旨在帮助开发者通过一套代码构建高性能、高保真度的移动应用程序。Flutter具有快速开发、灵活性、精美的UI等特点，因此受到了广泛的关注和采用。 ## 1.2 自定义UI组件的意义及应用场景 在移动...
从源码入手探究一个因useImperativeHandle引起的Bug
虚幻私塾
10-28 2366
组件1则是通过props传递了两个父组件的方法，一个是用于间接地访问组件2中的方法，另一个则是可能导致父组件重渲染的方法（当然这种结构的安排明显是不太合理的，但由于项目历史包袱的原因咱就先不考虑这个问题了\doge）。其中的组件2因为要在父组件中调用它的内部方法，所以用。但这两种情况都会返回一个清理副作用的函数，而这个清理函数的任务就是——把我的。更新渲染中的执行时机都是比较熟悉的，唯独这个。），例如对DOM的增删改，以及我们熟知的。内部渲染流程的同学，应该知道，在。的清理函数也是在这时候完成的。
antd picker 使用 如何_React实现滑动选择插件（仿Antd-mobile Picker）
weixin_39946274的博客
12-20 1414
效果图需求由于移动端iOS和安卓原生select样式和效果不同，同一个控件在不同系统上效果不同。所以决定制作一个跟iOS风格类似的，可以滚动，选择器插件。之后看到了antd-mobile里面的picker插件符合我们的要求，使用了一段时间感觉其效果不错，隧查看源码，探究其制作过程。但是antd-mobile是Typescript编写的，跟React类似，但是又不太一样。所以基本是关键问题查看其做参...
python操作autocad_利用python控制Autocad:pyautocad方式
weixin_39625563的博客
12-22 1183
发现pyautocad模块：可以用python控制autocad的包。今天把文档中的重点内容摘录出来，以后绘图、计算大工程量、或者识别施工图的时候时候也许可以用到。一、连接cadpyautocad包可以用任何版本的cad进行操作，实际上接口都是一样的。文档中首先给出连接cad的代码：from pyautocad import Autocad, APointacad = Autocad(create...
python操作cad的模块_利用python控制Autocad:pyautocad方式
weixin_39613188的博客
11-29 1399
发现pyautocad模块：可以用python控制autocad的包。今天把文档中的重点内容摘录出来，以后绘图、计算大工程量、或者识别施工图的时候时候也许可以用到。一、连接cadpyautocad包可以用任何版本的cad进行操作，实际上接口都是一样的。文档中首先给出连接cad的代码：from pyautocad import Autocad, APoint acad = Autocad(creat...
setState用法总结
dongwang的博客
12-21 4156
1. setState传参 setState中，第一个参数可以传入对象，也可以是函数，第二个为可选参数，参数为一个回调函数，那么什么场景下传入对象？什么场景下使用函数，什么场景下需要传入第二个参数呢？ 如果state的更新不依赖于之前的state中的值，使用对象 如果state的更新依赖之前state中的值，则第一个参数传入函数 如果state更新完成后立马需要使用state的值，则需要传入第二个参数 2. setState是同步还是异步 如果在react生命周期函数中使用setState或者直接在re
React-50：setState
臧小川的博客
09-02 301
对象形式 也是最经常用到的 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 230
// 直接传入一个对象，定义要修改的状态属性和值（不会影响其他state） this.setState({ isLike: true }) // 传一个箭头函数 return {} this.setState((preState, props)=>{ // preState 是未改变前的state props当前组件的props return { isLike: !preState.isLike } }) setState 第二个参数 调用setState不管是传入对象还是
组件setState的使用
imkaifan的博客
08-25 146
状态是可变的 语法：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 610
<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 129
函数式的 setState 是 React 的未来
[翻译&摘抄] React 未来之函数式 setState
YuqiRealm.com
01-03 656
原文地址：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 335
本文翻译自：Functional setState is the future of React – freeCodeCamp.org 译者注：昨天自己有遇到一个 setState 的坑，就是【React 踩坑记】setState 这样用可能会出错！这篇文章里记录的，上网 Google 了下看到这一篇，关于 setState，这篇文章讲解的很详细深入
react（57）——对象型setState和函数型setState
木子 旭的博客
03-24 335
1.对象型setState add = () => { let { count } = this.state; count += 1; this.setState({ count },()=>{ console.log(count); }); }; 对象型setState的参数后面可以接上一个回调函数，当setState执行的时候，会调用后面这个回调函数。 2.函数型setState add = () => { this.setState((state
python魔术方法__setstate__和__getstate__的使用
11-10
__setstate__和__getstate__是Python中的两个特殊方法，用于序列化和反序列化对象。当我们需要将一个对象保存到文件或者通过网络传输时，我们需要将其序列化为字节流，然后再反序列化为对象。而__setstate__和__getstate__就是用来实现这个功能的。 __getstate__方法返回一个字典，其中包含了需要序列化的对象的状态信息。这个字典会被pickle模块序列化为字节流。而__setstate__方法则接受一个字典作为参数，用于恢复对象的状态信息。 下面是一个简单的例子，演示了如何使用__getstate__和__setstate__方法来序列化和反序列化一个对象： ```python import pickle class MyClass: def __init__(self, name): self.name = name def __getstate__(self): return {'name': self.name} def __setstate__(self, state): self.name = state['name'] obj = MyClass('test') data = pickle.dumps(obj) new_obj = pickle.loads(data) print(new_obj.name) # 输出：test ``` 在这个例子中，我们定义了一个名为MyClass的类，其中包含了一个属性name。我们实现了__getstate__和__setstate__方法，用于序列化和反序列化对象。在__getstate__方法中，我们返回了一个字典，其中包含了需要序列化的对象的状态信息。在__setstate__方法中，我们接受一个字典作为参数，用于恢复对象的状态信息。 我们创建了一个MyClass的实例，并将其序列化为字节流。然后我们使用pickle.loads方法将字节流反序列化为一个新的对象。最后，我们输出了新对象的name属性，验证了反序列化的正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值