React-redux 中useSelector使用

在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ===，并且仅在返回值改变时触发重渲染。但是，不同于 connect()，useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为，即使组件的 props 没有发生改变。

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);
结论
1.写法一，不可取。因为reducer 源码中，会缓存上一次返回的oldSelectdState，和新获取的selectdState 进行全等判断。如果直接返回一个模块，一旦这个模块中任意值发生变化，整个模块值都会改变，即使我们使用到的project 和 pages 数据没有发生改变，也会让该组件执行重新更新。
2.写法二，可取。因为每一个useSelector 的 seletor注册函数返回值都是模块内最小粒度。如果这个值没有发生改变，就不会执行更新。多个useSelector 如果其中有多处需要更新的话，react中会进行批量更新，也只会强制更新一次，对性能不会有影响。
3.写法三，如果想要返回一个对象，可以传递一个equalityFn 进行深度比较，不采用 === 比较方式。缺点是，如果数据量很大或者嵌套很深，深度比较会有性能问题。