hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

总结React中的setState_WEB前端开发

2019-12-20后端开发ki4网36°c
A+ A-

react中setState要领究竟是异步照样同步,实在这个是分在什么前提下是异步或许同步。

1.先来回忆一下react组件中转变state的几种体式格局:


import React, { Component } from 'react'class Index extends Component {
    state={
        count:1
    }
    test1 = () => {        // 经由过程回调函数的情势
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('test1 setState()以后',this.state.count);
    }
    test2 = () => {        // 经由过程对象的体式格局(注重:此要领屡次设置齐集而且只挪用一次!)
        this.setState({
            count:this.state.count+1
        });
        console.log('test2 setState()以后',this.state.count);
    }
    test3 = () => {        // 不能直接修正state的值,此要领猛烈不发起!!!由于不会触发从新render
        this.state.count += 1;
    }
    test4 = () => {        // 在第二个callback拿到更新后的state
        this.setState({
            count:this.state.count+1
        },()=>{// 在状况更新且页面更新(render)后实行
            console.log('test4 setState()以后',this.state.count);
        });
    }
    render() {
        console.log('render');        
        return (            
        <p>
                <h1>currentState:{this.state.count}</h1>
                <button onClick={this.test1}>测试1</button>
                <button onClick={this.test2}>测试2</button>
                <button onClick={this.test3} style={{color:'red'}}>测试3</button>
                <button onClick={this.test4}>测试4</button>
            </p>        )
    }
}
export default Index;

2.setState()更新状况是异步照样同步:

须要推断实行setState的位置

同步:在react掌握的回调函数中:生命周期钩子/react事宜监听回调


import React, { Component } from 'react'class Index extends Component {
    state={
        count:1
    }    /* 
    react事宜监听回调中,setState()是异步状况    */
    update1 = () => {
        console.log('update1 setState()之前',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setState()以后',this.state.count);
    }    /* 
    react生命周期钩子中,setState()是异步更新状况    */
    componentDidMount() {
        console.log('componentDidMount setState()之前',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('componentDidMount setState()以后',this.state.count);
    }
    
    render() {
        console.log('render');        
        return (            
        <p>
                <h1>currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
            </p>        )
    }
}
export default Index;

异步:非react掌握的异步回调函数中:定时器回调/原生事宜监听回调/Promise


import React, { Component } from 'react'class Index extends Component {
    state={
        count:1
    }    /* 
    定时器回调    */
    update1 = () => {
        setTimeout(()=>{
            console.log('setTimeout setState()之前',this.state.count);//1
            this.setState((state,props)=>({
                count:state.count+1
            }));
            console.log('setTimeout setState()以后',this.state.count);//2        
            });
    }    /* 
    原生事宜回调    */
    update2 = () => {
        const h1 = this.refs.count;
        h1.onclick = () => {
            console.log('onClick setState()之前',this.state.count);//1
            this.setState((state,props)=>({
                count:state.count+1
            }));
            console.log('onClick setState()以后',this.state.count);//2        
            }
    }    /* 
    Promise回调    */
    update3 = () => {
        Promise.resolve().then(value=>{
            console.log('Promise setState()之前',this.state.count);//1
            this.setState((state,props)=>({
                count:state.count+1
            }));
            console.log('Promise setState()以后',this.state.count);//2        
            });
    }
    
    render() {
        console.log('render');        return (            
        <p>
                <h1 ref='count'>currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
                <button onClick={this.update3}>测试3</button>
            </p>        )
    }
}
export default Index;

3.setState()屡次挪用的问题:

异步的setState()

(1)屡次挪用,处置惩罚要领:

setState({}):兼并更新一次状况,只挪用一次render()更新界面,屡次挪用齐集并为一个,背面的值会掩盖前面的值。

setState(fn):更新屡次状况,只挪用一次render()更新界面,屡次挪用不会兼并为一个,背面的值会掩盖前面的值。


import React, { Component } from 'react'class Index extends Component {
    state={
        count:1
    }
    update1 = () => {
        console.log('update1 setState()之前',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setState()以后',this.state.count);
        console.log('update1 setState()之前2',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setState()以后2',this.state.count);
    }
    update2 = () => {
        console.log('update2 setState()之前',this.state.count);        
        this.setState({
            count:this.state.count+1
        });
        console.log('update2 setState()以后',this.state.count);
        console.log('update2 setState()之前2',this.state.count);        
        this.setState({
            count:this.state.count+1
        });
        console.log('update2 setState()以后2',this.state.count);
    }
    update3 = () => {
        console.log('update3 setState()之前',this.state.count);        
        this.setState({
            count:this.state.count+1
        });
        console.log('update3 setState()以后',this.state.count);
        console.log('update3 setState()之前2',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));// 这里须要注重setState传参为函数形式时,state会确保拿到的是最新的值
        console.log('update3 setState()以后2',this.state.count);
    }
    update4 = () => {
        console.log('update4 setState()之前',this.state.count);        
        this.setState((state,props)=>({
            count:state.count+1
        }));
        console.log('update4 setState()以后',this.state.count);
        console.log('update4 setState()之前2',this.state.count);        
        this.setState({
            count:this.state.count+1
        });// 这里须要注重的是假如setState传参为对象且在末了,那末会与之前的setState兼并
        console.log('update4 setState()以后2',this.state.count);
    }
    render() {
        console.log('render');        return (            
        <p>
                <h1>currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
                <button onClick={this.update3}>测试3</button>
                <button onClick={this.update4}>测试4</button>
            </p>        )
    }
}
export default Index;

(2)怎样获得setState异步更新后的状况数据:

在setState()的callback回调函数中

4.react中常见的setState面试题(setState实行递次)


import React, { Component } from 'react'// setState实行递次class Index extends Component {
    state={
        count:0
    }
    componentDidMount() {        this.setState({count:this.state.count+1});        
    this.setState({count:this.state.count+1});
        console.log(this.state.count);// 2 => 0
        this.setState(state=>({count:state.count+1}));        
        this.setState(state=>({count:state.count+1}));
        console.log(this.state.count);// 3 => 0
        setTimeout(() => {            
        this.setState({count:this.state.count+1});
            console.log('setTimeout',this.state.count);// 10 => 6
            this.setState({count:this.state.count+1});
            console.log('setTimeout',this.state.count);// 12 => 7        
            });
        Promise.resolve().then(value=>{            
        this.setState({count:this.state.count+1});
            console.log('Promise',this.state.count);// 6 => 4
            this.setState({count:this.state.count+1});
            console.log('Promise',this.state.count);// 8 => 5        
            });
    }
    render() {
        console.log('render',this.state.count);// 1 => 0  // 4 => 3 // 5 => 4 // 7 => 5 // 9 => 6 // 11 => 7
        return (            <p>
                <h1>currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
                <button onClick={this.update3}>测试3</button>
                <button onClick={this.update4}>测试4</button>
            </p>        )
    }
}
export default Index;

总结:react中setState()更新状况的2种写法

1)setState(updater,[callback])

updater:为返回stateChange对象的函数:(state,props)=>stateChange,吸收的state和props都保证为最新

2)setState(stateChange,[callback])

stateChange为对象,callback是可选的回调函数,在状况更新且界面更新后才实行

注重:

对象是函数体式格局的简写体式格局

假如新状况不依赖于原状况,则运用对象体式格局;

假如新状况依赖于原状况,则运用函数体式格局;

假如须要在setState()后猎取最新的状况数据,在第二个callback函数中猎取

本文来自 js教程 栏目,迎接进修!

以上就是总结React中的setState的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
总结React中的setState_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>