React-redux 中useSelector使用源码分析
作者：长安城下翩翩少年
在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ===，并且仅在返回值改变时触发重渲染，，这篇文章主要介绍了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 进行深度比较，不采用 === 比较方式。
缺点是，如果数据量很大或者嵌套很深，深度比较会有性能问题。
到此这篇关于React-redux 中useSelector使用的文章就介绍到这了,更多相关React-redux useSelector使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！