window.document.getElementById();

export function batchedUpdates(fn, a) {
  var prevExecutionContext = executionContext;
  executionContext |= BatchedContext;

  try {
    return fn(a);
  } finally {
    executionContext = prevExecutionContext;

    if (executionContext === NoContext) {
      resetRenderTimer();
      flushSyncCallbackQueue();
    }
  }
}

import { PureComponent } from 'react';

export default class MyClassCmp extends PureComponent {
  constructor() {
    super();
    this.state = {
      count: 0,
    };

    this.onAdd = this.onAdd.bind(this);
  }

  onAdd() {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    console.log('after', this.state.count); // 输入 0
  }

  componentDidUpdate() {
    console.log('componentDidMount', this.state.count); // 输出 1
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        count: {count}
        <button onClick={this.onAdd}>add</button>
      </div>
    );
  }
}

// react V < 18
function scheduleUpdateOnFiber(fiber, lane, eventTime) {
  if (lane === SyncLane) {
    // 省略其他代码...

    if (executionContext === noContext) {
      flushSyncCallbackQueue();
    }
  }
}

// 这里不用关心，只是单纯了解下18版本源码
// react V18
// flushSyncCallbacksOnlyInLegacyMode 命名更语义化了
function scheduleUpdateOnFiber(fiber, lane, eventTime) {
  if (
    lane === SyncLane &&
    executionContext === NoContext &&
    (fiber.mode & ConcurrentMode) === NoMode && // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
    !ReactCurrentActQueue$1.isBatchingLegacy
  ) {
    // Flush the synchronous work now, unless we're already working or inside
    // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
    // scheduleCallbackForFiber to preserve the ability to schedule a callback
    // without immediately flushing it. We only do this for user-initiated
    // updates, to preserve historical behavior of legacy mode.
    resetRenderTimer();
    flushSyncCallbacksOnlyInLegacyMode();
  }
}

onAdd () {
  // this.setState({ count: this.state.count+1 })
  // this.setState({ count: this.state.count+1 })
  // console.log('after', this.state.count); // 输入 0

  setTimeout(() => {
    this.setState({ count: this.state.count+1 })
    this.setState({ count: this.state.count+1 })
    console.log('after', this.state.count); // 输入 2
  })
}

componentDidUpdate() {
  console.log('componentDidMount', this.state.count); // 输出两次： 1 2
}

performSyncWorkOnRoot.bind(null, root); // 同步的回调函数
performConcurrentWorkOnRoot.bind(null, root); // 异步的回调函数

// store/index.ts

import { configureStore } from '@reduxjs/toolkit';

import userSliceReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userSliceReducer,
  },
});

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;
// 推断出类型: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export default store;

// store/hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './index';

// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

import { createSlice } from '@reduxjs/toolkit';
import { RootState, AppDispatch } from './index';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    value: 123,
  },
  reducers: {
    incremented: (state) => {
      // Redux Toolkit 允许在 reducers 中编写 "mutating" 逻辑。
      // 它实际上并没有改变 state，因为使用的是 Immer 库，检测到“草稿 state”的变化并产生一个全新的
      // 基于这些更改的不可变的 state。
      state.value += 1;
    },
    decremented: (state) => {
      state.value -= 1;
    },
  },
});

export const { incremented, decremented } = userSlice.actions;

export const selectCount = (state: RootState) => state.user.value;

export default userSlice.reducer;

import { useAppSelector, useAppDispatch } from '@/store/hooks';

const count = useAppSelector((state) => state.user.value);
console.log('count: ', count);