2025-05-12 日报 Day184

今日的鸡汤

生活是活给自己看的，你有多大成色，世界才会给你多大脸色。

今日学习内容

1、https://www.youtube.com/watch?v=EVFZazcxAbo&t=4112s

今日笔记

setState

import React from 'react';
import './style.css';

export default class App extends React.Component {
    state = {
        count: 0,
    };

    increment = () => {
        console.log('Incrementing count', this.state.count);
        this.setState({
            count: this.state.count + 1
        })
        console.log('Count after increment', this.state.count);
    }

    triple = () => {
        console.log('Tripling count', this.state.count);
        this.setState((prevState) => ({
            count: prevState.count + 1
        }));

        this.setState((prevState) => ({
            count: prevState.count + 1
        }));

        this.setState((prevState) => ({
            count: prevState.count + 1
        }));
        console.log('Count after tripling', this.state.count);
    }

    reduce = () => {
        setTimeout(() => {
            console.log('Reducing count', this.state.count);
            this.setState({
                count: this.state.count - 1
            });
            console.log('Count after reducing', this.state.count);
        }, 0);
    }

    render() {
        return (
            <div className="App">
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.triple}>Triple</button>
                <button onClick={this.reduce}>Reduce</button>
            </div>
        );
    }
}

批量更新:
每来一个setState，就把它塞进一个队列里存起来等时机成熟，在把state结果做合并，最后针对最新的state值更新
参考vue的nextTick、浏览器的Event Loop

setState工作流：

ReactComponent.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(
    this,
    partialState,
  );
  if(callback) {
    this.updater.enqueueCallback(
      this,
      callback,
      'setState'
    );
  }
};

enqueueSetState: function(publicInstance, partialState){
    // 获取内部实例
    var internalInstance = getInternalInstanceReadyForUpdate(
        publicInstance,
        'setState'
    );

    // 这个queue对应的就是一个组件实例的state数组
    var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
    queue.push(partialState);

    // enqueueUpdate用来处理当前的组件实例
    enqueueUpdate(internalInstance);
}