是否阻止"useSelector"重新呈现组件

Question

我有一个包含数千行的表。

import React from "react"
import { useSelector } from "react-redux";
import { useEffect } from "react";
import Source from "../components/TranslationTable/Source";
const SourceContainer = React.memo((props) => {
const suggestionArray = useSelector((state) => state.suggestions.suggestionArray );
const isFetching = useSelector((state) => state.suggestions.isFetching);
let source = props.source;
if (props.shouldHighlight && !isFetching) {
//I will have code here to highlight text at some point
}

return (
<Source source={source}>{console.log("rendered")}</Source>
)
}, (prevProps, nextProps) => {
return true;
});
export default SourceContainer;

上述组件位于每行的第一列内部。当选择该行时，props.shouldHighlight变为true。

我遇到的问题是，每次聚焦一行时，每个SourceContainer组件都会重新渲染。当一行被聚焦时，isFetching在redux状态下变为true，并且suggestionArray将变为等于基于所选行中的数据的建议数组。

如果删除if语句和suggestionArray变量，则组件将重新呈现。也就是说，重新生成这个问题所需要的唯一一件事就是拥有一个未使用的useSelector变量(ifFetching(。

有人能解释一下，当选择器的状态值发生变化时，我如何在不重新渲染组件的情况下使用useSelector吗？

Answer 1

使用useSelector，您可以向组件添加一个依赖项，如果useSelector的内容发生变化，它会重新渲染，这是正常的。

这里的技巧是为useSelector函数制作变化较小的内容。或者至少只有在组件需要重新呈现时才会发生变化

例如，根据我对您试图实现的目标的理解，只有当"props.shouldHighlight&&！isFetching"更改值时，您的组件才应该更改。

如果是这样的话，那么你想做的是：

const isFetching = useSelector((state) => (!state.suggestions.isFetching && props.shouldHighlight));