Redux useSelector 使用小心得

useSelector 一共2个参数

selector

selector 回调函数会把storeState返回给你 你再进行筛选返回自己想要使用的数据

  const { focus, base } = useSelector((state) => {
    const { userMap } = state.userCenter || {};
    return { ...(userMap[userId] || {}) };
  });

疑问 hooks 版本的函数组件是如何触发render的呢

const [, forceRender] = useReducer(s => s + 1, 0)

useReducer实现强制刷新

equalityFn

equalityFn 返回筛选数据前后值 内部Subscription进行数据监听执行checkForUpdates的时候进行比较 默认情况下是简单比较

const refEquality = (a, b) => a === b

！！！注意了如果你useSelector筛选的数据是一个对象的时候 就会有额外的render触发

如何避免呢

• 避免筛选返回对象 可以精确到具体值
• 使用提供的shallowEqual方法或者自己进行判断

  const { skills } = useSelector((state) => {
    const { userMap } = state.userCenter || {};
    return { ...(userMap[userId] || {}) };
  }, shallowEqual);

or

  const { skills } = useSelector((state) => {
    const { userMap } = state.userCenter || {};
    return { ...(userMap[userId] || {}) };
  }, (objA, objB) => {
    // 一吨操作 false 更新 true 不更新
    const keysA = Object.keys(objA);
    const keysB = Object.keys(objB);
    if (keysA.length !== keysB.length) return false;
    return true;
  });