react的setState

setState属性

import React from 'reaact';
import Child1 from './demo4'
class demo extends React.Component {
    
    state = {
        x: 10,
        y: 5,
        z: 0
    }
    handle = () => {
        let { x, y, z } = this.state;
        this.setState({ x: x + 1 });
        console.log(this.state.x) // 10 
        this.setState({ y: y + 1 });
        console.log(this.state.y) // 5 
        this.setState({ z: z + 1 });
        console.log(this.state.z) // 0 
        // 11 6 1 
        // 示例二: 时间相差为0会进行批量处理
        settimeout(() => {
        	this.setState({ x: x + 1 });
        	console.log(this.state.x) // 
        },1000)
        settimeout(() => {
        	this.setState({ y: y + 1 });
            console.log(this.state.y) // 
        },1000)
        settimeout(() => {
        	 this.setState({ z: z + 1 });
        	 console.log(this.state.z) // 
        },1000)
        /**
         * 在一个函数当中对进行多次的setstate，并不会马上进行视图更新，而是会先吧所有的setState操作先后加入到更新队列当中，
         * 

    }

    render(){
        console.log('视图渲染')
        return <div>
            <span>{ x }</span>
            <span>{ y }</span>
            <span>{ z }</span>
        </div>
    }

    componentsDidMount() {
        // 第一次渲染完毕【virtualDom已经变成真是Dom
        console.log(this.child1) // 存储为实例对象
    }

}

关于setState的描述，setState只吃两个参数，this.setState([ 修改的state参数], calback函数),在状态更改/视图发生更新完毕后触发执行。只要执行了了setstate，callback一定会执行，

• 发生在componentDidUpdate周期函数之后，DidUpdate会在任何状态更改后都触发执行，而回调函数方式，可以在指定状态更新后处理一些事情
• 特殊：即便基于shouldComponentUpdate阻止了状态/视图的更新，DidUpdate周期函数肯定不会执行，但我们设置了callback一定会执行
• 类似于Vue的nextick
  在react18中，setState操作都是异步的，不论在哪执行，例如合成时间，周期函数、定时器
• 实现状态的批处理【统一处理】
• 有效减少更新次数，降低性能消耗
• 有效管理代码执行的逻辑顺序
  原理：利用更新队列的【updater】机制来处理
  • 在当前相同的状态内【浏览器此时可以处理的事件中】，遇到setState会立即放入更新队列中
  • 此时状态未更新
  • 当时有的代码操作结束，会刷新队列，【通知更新队列中的任务执行】：把所有放入的setState合并到一起进行执行，只触发一次视图更新【批处理操作】