reactjs - 阻止 `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 状态下变为真，并且 suggestionArray 将变为等于基于所选行中数据的建议数组。

如果我删除 if 语句和 suggestionArray 变量，组件仍然会重新呈现。意思是，要重现此问题，唯一需要的是有一个未使用的 useSelector 变量 (ifFetching)。

谁能解释一下当该选择器的状态值发生变化时，我如何使用 useSelector 而无需重新渲染组件？

Answer 1

使用 useSelector，您向组件添加依赖项，如果 useSelector 的内容发生变化，它会重新呈现是正常的。

此处的技巧是为您的 useSelector 函数制作变化较少的内容。或者至少只有在组件需要重新渲染时才会发生变化

例如，根据我对您要实现的目标的了解，您的组件应该仅在“props.shouldHighlight && !isFetching”更改值时更改。

如果是这样，那么您要做的是:

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