class MyComponent extends React.Component {
  state = { count: 0 };
  
  handleClick = () => {
    this.setState({ count: this.state.count + 1 }); // 不會(huì)立即更新
    this.setState({ count: this.state.count + 1 }); // 不會(huì)立即更新
    // React 會(huì)將這兩個(gè) setState 合并
  };
  
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

// 不會(huì)批處理的例子（React 17及之前）
handleClick = () => {
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    // React 17中會(huì)觸發(fā)兩次渲染
  }, 0);
};

// 在React 18中，這會(huì)批量處理
fetchData().then(() => {
  setState1();
  setState2();
  // 只會(huì)觸發(fā)一次渲染
});

// 回調(diào)函數(shù)形式
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已經(jīng)更新

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

// 偽代碼簡(jiǎn)化版
function enqueueUpdate(component, partialState) {
  if (!batchingStrategy.isBatchingUpdates) {
    // 如果不處于批量模式，立即更新
    batchingStrategy.batchedUpdates(enqueueUpdate, component, partialState);
    return;
  }
  // 否則加入隊(duì)列
  dirtyComponents.push(component);
  component._pendingStateQueue.push(partialState);
}

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