为何非依赖Redux状态变更会触发useEffect？附代码求助

核心问题：genesSelector的非记忆化返回值 #

你的代码里，genesSelector每次执行都会返回一个新数组实例：

const genesSelector = state => state.genes ? [state.genes] : [];

不管state.genes有没有变化，只要这个选择器被调用（比如修改backgroundColor时，createSelector会遍历所有输入选择器），就会生成新的数组引用。

连锁反应导致两个useEffect触发 #

1. 当修改backgroundColor、radiusScale或depthWrite时，Reselect的createSelector会检测到输入选择器的返回值变化（因为genesSelector返回了新数组），于是重新执行结果函数，生成一个全新的selectedOptions对象。
2. 第一个useEffect的依赖项包含selectedOptions.genes，而这个属性现在是新的数组引用，React会认为依赖项发生了变化，因此触发第一个useEffect。
3. 第二个useEffect的依赖项确实是修改后的状态值，所以也会正常触发。

而当修改regions、subTypes等状态时，只有第一个useEffect的依赖项变化，第二个的依赖项未变更，因此只有第一个useEffect执行，这是符合预期的行为。

方案1：记忆化genesSelector的返回值 #

用Reselect的createSelector包装genesSelector，让它只在state.genes变化时才生成新数组：

const genesSelector = createSelector(
  state => state.genes,
  (genes) => genes ? [genes] : []
);

这样，只有当state.genes实际变化时，才会返回新数组；其他情况下会复用之前的数组引用，避免createSelector不必要地重新计算整个selectedOptions对象。

方案2：拆分选择器（更优解） #

把选项类状态和设置类状态拆分成两个独立的记忆化选择器，彻底避免互相干扰：

// 选项类选择器：仅包含regions、cellTypes等
const selectedOptionsSelector = createSelector(
  regionsSelector,
  cellTypeSelector,
  subTypeSelector,
  genesSelector,
  (regions, cellTypes, subTypes, genes) => ({
    regions,
    cellTypes,
    subTypes,
    genes
  })
);

// 设置类选择器：仅包含backgroundColor、radiusScale等
const settingsSelector = createSelector(
  backgroundColorSelector,
  depthWriteSelector,
  radiusScaleSelector,
  geneExpressionLevelScaleSelector,
  (backgroundColor, depthWrite, radiusScale, geneExpressionLevelScale) => ({
    backgroundColor,
    depthWrite,
    radiusScale,
    geneExpressionLevelScale
  })
);

然后在组件中分别使用这两个选择器：

export default function TestComponent() {
  console.log("Test Component");

  const selectedOptions = useSelector(selectedOptionsSelector, shallowEqual);
  const settings = useSelector(settingsSelector, shallowEqual);

  useEffect(() => {
    console.log('Selected Options:', selectedOptions.regions, selectedOptions.subTypes, selectedOptions.cellTypes, selectedOptions.genes);
  }, [selectedOptions.regions, selectedOptions.subTypes, selectedOptions.cellTypes, selectedOptions.genes]);

  useEffect(() => {
    console.log('Settings:', settings.backgroundColor, settings.radiusScale, settings.depthWrite);
  }, [settings.backgroundColor, settings.radiusScale, settings.depthWrite]);

  return <div><h1>testComponent</h1></div>;
}

这种拆分不仅能解决当前问题，还能让代码逻辑更清晰，减少不必要的状态计算。

额外优化（可选） #

如果业务允许，直接让genesSelector返回state.genes或空数组，避免包装新数组：

const genesSelector = state => state.genes || [];

这是最简单的解决方案，但前提是state.genes本身就是数组类型，符合业务需求。

内容的提问来源于stack exchange，提问作者Javid Rezai