React Hooks：有条件地渲染一个组件，但可以访问整个 state

Question

假设我的 state 由 object 表示，如下所示：

state = {
    array: [1, 2, 3, 4, 5]
}

我知道我是否使用：

const state = useSelector(state => state.array)

每次数组的元素之一发生更改时，我的组件都会重新渲染，但我不想要它。 因此，解决方案可以是：

state = {
    render: false,
    array: [1, 2, 3, 4, 5]
}

现在我可以：

const state = useSelector(state => state.render)

并通过有条件地调度一些动作来处理渲染。 但是这样我就无法再访问数组了。 这里的问题是，在我的项目中，每次数组更新时都需要重新渲染的组件，以及仅在特定情况下需要重新渲染的组件。 另一种解决方案是只为很少需要重新渲染的组件创建另一个商店，但这对我来说似乎太有线了。

Answer 1

useSelector接受第二个参数equlityFn ：

const result: any = useSelector(selector: Function, equalityFn?: Function)

如果equlityFn返回true ，订阅更新将不准确，因此渲染不会来自选择器。

const state = useSelector(
  (state) => state.array,
  (prevState, currState) => {
    return isRender(currState);
  }
);