React的setState批量更新机制详解

class MyComponent extends React.Component {
  state = { count: 0 };
  
  handleClick = () => {
    this.setState({ count: this.state.count + 1 }); // 不会立即更新
    this.setState({ count: this.state.count + 1 }); // 不会立即更新
    // React 会将这两个 setState 合并
  };
  
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

// 不会批处理的例子（React 17及之前）
handleClick = () => {
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    // React 17中会触发两次渲染
  }, 0);
};

// 在React 18中，这会批量处理
fetchData().then(() => {
  setState1();
  setState2();
  // 只会触发一次渲染
});

// 回调函数形式
this.setState({ count: this.state.count + 1 }, () => {
  console.log('更新后的值:', this.state.count);
});

// React 18的flushSync
import { flushSync } from 'react-dom';

flushSync(() => {
  this.setState({ count: this.state.count + 1 });
});
// 这里state已经更新

function MyComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(c => c + 1); // 更新1
    setCount(c => c + 1); // 更新2
    // React会批量处理，最终count增加2
  };
  
  return <button onClick={handleClick}>{count}</button>;
}

// 伪代码简化版
function enqueueUpdate(component, partialState) {
  if (!batchingStrategy.isBatchingUpdates) {
    // 如果不处于批量模式，立即更新
    batchingStrategy.batchedUpdates(enqueueUpdate, component, partialState);
    return;
  }
  // 否则加入队列
  dirtyComponents.push(component);
  component._pendingStateQueue.push(partialState);
}

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