在一个 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 进行深度比较，不采用 === 比较方式。缺点是，如果数据量很大或者嵌套很深，深度比较会有性能问题。