React-redux 中useSelector使用源码分析

import { useContext, useEffect, useReducer, useRef, } from 'react';
import StoreContext from './context'; type EqualityFn = (a: T, b: T) => boolean;
export default function useSelector<T, Selected extends unknown>( selector: (state: T) => Selected, equalityFn?: EqualityFn, ): Selected {
const store = useContext(StoreContext);
// 注：react-redux@8-beta 中使用 React18提供的useSyncExternalStoreapi 来做强制更新。
// 17版本之前采用下面的方式进行强制render
const [, forceRender] = useReducer((s) => s + 1, 0);
// 保存最近一次从store中获取的state
const latestStoreState = useRef(store.getState());
// 保存最近一次通过selector函数返回的值 - 也就是useSelector 返回的值
const latestSelectedState = useRef(selector(latestStoreState.current));
useEffect(() => {
// checkUpdate - 判断是否强制更新；
function checkUpdate() {
const newState = store.getState();
// state 没有改变，直接返回；发生在 reducer 中default的情况；
// 其他情况使用immer，都会返回一个新的state对象（本质还是浅拷贝）
if (newState === latestStoreState) return;
const newSelectedState = selector(newState);
// 默认的 equalityFn 进行的是 === 判断；
// 所以默认的equalityFn函数的 === 决定了，
// 1 我们不能通过selector函数去返回创建一个新的对象进行返回
// 2 利用浅拷贝的特性，尽量返回state上最小的粒度，保证当前selector返回的值没有改变时不会执行强制更新
if (!equalityFn) equalityFn = (a, b) => a === b;
// 对比新旧SelectedState 数据 是否全等，如果不等 则进行强制更新
if (!equalityFn(newSelectedState, latestSelectedState.current)) {
latestSelectedState.current = newSelectedState;
latestStoreState.current = newState;
forceRender();
}
}
// 执行dispatch({type:XXX}) ,会调用 store.subscribe进行监听
// 执行checkUpdate函数
const unsubscribe = store.subscribe(checkUpdate);
return () => unsubscribe();
}, [store]);
// useSelector 返回最新的seletor函数返回值
return latestSelectedState.current;
}
不同引用的探究
// 写法一
const { project,pages } = useSelector((state: IRootState) => state.prototype);
// 写法二
const project = useSelector((state: IRootState) => state.prototype.project);
const project = useSelector((state: IRootState) => state.prototype.project);
// 写法三 (传递一个equalityFn 函数进行判断 )
const { project,pages } = useSelector((state: IRootState) => state.prototype,equalityFn);