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在还原状态下变为true，并且suggestionArray将等于基于所选行中数据的一组建议。

如果我删除了if语句和suggestionArray变量，该组件仍会重新渲染。意思是，要重现此问题，唯一要做的就是拥有一个未使用的useSelector变量（ifFetching）。

任何人都可以解释如何可以使用useSelector，而不重新呈现组件时的该选择器的状态改变值？

Answer 1

使用useSelector，向您的Component添加一个依赖项，如果useSelector的内容发生更改，它通常会重新渲染。

这里的技巧是为useSelector函数提供较少变化的内容。或至少在组件需要重新渲染时才发生改变

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

如果是这种情况，那么您要做的就是：

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

阻止“ useSelector”重新渲染组件？

1 个答案: