// 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);

import React, { useLayoutEffect, useState, useEffect } from 'react';
import './styles.css';

export default () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random() * 200;

      const now = performance.now();

      while (performance.now() - now < 100) {
        console.log(1);
      }

      setCount(randomNum);
    }
  }, [count]);

  return <div onClick={() => setCount(0)}>{count}</div>;
};

useImperativeHandle(ref, createHandle, [deps]);

import React, { useEffect, useState, useRef } from 'react';

const Parent = () => {
  const whiteLinkRef = useRef(null);

  const handleRemoveLink = () => {
    console.log('whiteLinkRef.current: ', whiteLinkRef.current);
    // 调用子组件暴露的方法
    whiteLinkRef.current.handleSetChecked(false);
    whiteLinkRef.current.handleSetHref('');
  };

  return <WhiteLink ref={whiteLinkRef} visible={showWhiteLink} />;
};
export default Parent;

import React, { useEffect, useState, useImperativeHandle } from 'react';

const Child = (props, ref) => {
  // 自定义暴露组件内部的方法
  // 需要配合forwardRef使用
  useImperativeHandle(ref, () => ({
    handleSetChecked,
    handleSetHref,
  }));

  return <div>...</div>;
};

export default React.forwardRef(Child);

const [state, dispatch] = useReducer(reducer, initialArg, init);

function reducer(state, action) {
  switch (action.type) {
    case 'setAssetsType':
      return {
        assetsType: action.payload.map((x) => ({
          label: x.fundTypeName,
          value: x.id,
        })),
      };
    default:
      throw new Error();
  }
}

const Edit = (props) => {
  const [state, dispatch] = useReducer(reducer, {});

  // 获取资产类型
  getAssetsType().then((res) =>
    dispatch({ type: 'setAssetsType', payload: res }),
  );
};

import { createAction, handleActions } from 'redux-actions';

const SET_ASSETS_TYPE = 'SET_ASSETS_TYPE';

export const setAssetsType = createAction(SET_ASSETS_TYPE);

export default handleActions(
  {
    [SET_ASSETS_TYPE]: (state, action) => {
      const { payload } = action;

      return {
        ...state,
        assetsType: payload,
      };
    },
  },
  {
    assetsType: [],
  },
);

import { combineReducers } from 'redux';
import assets from './assets';

export default combineReducers({
  assets,
});

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { setAssetsType } from 'ROOT/reducer/assets';

const mapState = ({ assets }) => ({
  assetsType: assets.assetsType,
});
const mapActions = (dispatch) => ({
  actions: bindActionCreators(
    {
      setAssetsType,
    },
    dispatch,
  ),
});

const List = ({ actions, assetsType }) => {
  // 获取资产类型
  getAssetsType().then((res) => {
    const options = res.map((x) => ({ label: x.fundTypeName, value: x.id }));
    actions.setAssetsType(options);
  });
};

export default connect(mapState, mapActions)(List);

useEffect(() => {}, []);

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);
  function clear() {
    ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
  }
  return clear;
});

div.style.left = '20px';

useLayoutEffect(() => {
  div.style.left = '30px';
}, []);

import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';
import { Button } from '../components';

export default function UseEvent() {
  const [count4, setCount4] = useState(0);
  const [count5, setCount5] = useState(0);

  // 为了保持函数引用不变，依赖项为空
  const stableClickFn = useCallback(() => {
    // 访问到的总是初始值
    setCount4(count4 + 1);
  }, []);

  // 使用useEvent,保持函数引用不变的同时状态实时更新
  const stableClickFn2 = useEvent(() => {
    setCount5(count5 + 1);
  });

  return (
    <div>
      <h1>useCallback + []</h1>
      <Button onClickButton={stableClickFn}>stable button4</Button>

      <div>count 只会更新一次</div>
      <div>count4: {count4}</div>

      <h1>useEvent</h1>
      <Button onClickButton={stableClickFn2}>stable button4</Button>

      <div>count 只会更新一次</div>
      <div>count5: {count5}</div>
    </div>
  );
}

// 模仿useEvent
function useEvent(handler) {
  const handlerRef = useRef(null);

  // In a real implementation, this would run before layout effects
  useLayoutEffect(() => {
    handlerRef.current = handler;
  });

  return useCallback((...args) => {
    // In a real implementation, this would throw if called during render
    const fn = handlerRef.current;
    return fn(...args);
  }, []);
}

function summation(target) {
  let sum = 0;
  for (let i = 1; i <= target; i++) {
    sum += i;
  }
  console.log('sum: ', sum);
  return sum;
}

summation(10);
summation(100);
summation(100);
summation(100);
summation(100);

// memoFn.jsx
// 初始化一个非正常数字
let preTarget = -1;
let memoSum = 0;

export function memoSummation(target) {
  // 传入参数与上次一样，直接返回缓存结果
  if (prevTarget > 0 && prevTarget === target) {
    return memoSum;
  }

  // 缓存本次传入的参数
  prevTarget = target;
  let sum = 0;
  console.log('我出现，表示又重新计算了一次');
  for (let i = 1; i <= target; i++) {
    sum += i;
  }
  // 缓存本次计算结果
  memoSum = sum;
  return sum;
}

import { memoSummation } from './memoFn';

memoSummation(10);
memoSummation(50);
memoSummation(100);
memoSummation(50);
memoSummation(100);
memoSummation(100);
memoSummation(100);
memoSummation(100);
memoSummation(100);

const memoFn = (function () {
  let prevTarget = -1;
  let memoSum = 0;
  return function memoFn(target) {
    // 传入参数与上次一样，直接返回缓存结果
    if (prevTarget > 0 && prevTarget === target) {
      return memoSum;
    }

    // 缓存本次传入的参数
    prevTarget = target;
    let sum = 0;
    console.log('我出现，表示又重新计算了一次');
    for (let i = 1; i <= target; i++) {
      sum += i;
    }
    // 缓存本次计算结果
    memoSum = sum;
    return sum;
  };
})();

const memoSummation = memoFn;

/**
 * useCallback 简易实现（不考虑多个useCallbacks的情况）
 */
let memoizedState = [];
let hookIndex = 0;
function useCallbacks(callback, nextDeps) {
  // debugger
  const prevState = memoizedState[hookIndex];

  if (prevState) {
    // 更新
    let [prevCallback, prevDeps] = prevState;

    // 对比依赖项
    let same = nextDeps.every((item, index) => item === prevDeps[index]);

    // 依赖项相同
    if (same) {
      console.log('返回旧函数');
      return prevCallback;
    }
  }

  // 首次挂载时 或者 更新时但依赖项不同，都返回新函数
  memoizedState[hookIndex] = [callback, nextDeps];
  console.log('返回新函数');
  return callback;
}

export default useCallbacks;

const memoAdd = useCallback(() => {
  setCount(count++);
}, [count]);

import React, { useState, useCallback, useMemo } from 'react';
import Button from './Button';

export default function UseCallback() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  // 未使用useCallback的情况下，handleClickButton1 函数引用每次都会变化
  // 这会破坏子组件 memo 效果
  const handleClickButton1 = () => {
    setCount1(count1 + 1);
  };

  // 缓存函数：只有在依赖项发生改变时，才返回新的函数，否则返回缓存函数
  // 子组件发现onClickButton属性没发生改变，就不会重新渲染，从而达到优化效果

  // 使用useCallback，如果 count2 不变，handleClickButton2 引用不变
  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <div>
      <h1>未使用useCallback</h1>
      <div>
        <Button onClickButton={handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
        <p>Button2 上的on函数使用了useCallback</p>
      </div>
      <div>
        <Button
          onClickButton={() => {
            setCount3(count3 + 1);
          }}
        >
          Button3
        </Button>
      </div>
    </div>
  );
}

// Button.jsx
import React from 'react';

// 假设这个组件非常复杂
const Button = ({ onClickButton, children, count }) => {
  return (
    <>
      <button onClick={onClickButton}>{children}</button>
      <span>{Math.random()}</span>
      {count && <span>count: {count}</span>}
    </>
  );
};

// 注意，useCallback一定要配合React.memo一起使用，否则就是反向优化
export default React.memo(Button);

<input type="text" onChange={inputChange} />;

const inputChange = useCallback((e) => {
  setValue(e.target.value);
}, []);

import React, { useState, useCallback, useMemo } from 'react';
import Button from './Button';

export default function UseCallback() {
  const [count4, setCount4] = useState(0);

  // 缓存函数引用保持稳定时状态不更新问题
  const stableClickFn = useCallback(() => {
    console.log(count4);
    // 访问到的总是初始值
    setCount4(count4 + 1);
  }, []);

  return (
    <div>
      <h1>缓存函数引用保持稳定时状态不更新问题</h1>
      <Button onClickButton={stableClickFn}>stable button4</Button>
      <div>count 只会更新一次</div>
      <div>count4: {count4}</div>
    </div>
  );
}