时间戳

首页 > 解决方案 > 防止`useSelector`重新渲染组件？

reactjs - 防止`useSelector`重新渲染组件？

问题描述

我有一张有数千行的表。

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变为真。

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

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

谁能解释如何useSelector在选择器的状态值更改时如何使用不重新渲染组件的情况下如何使用？

标签： reactjsreduxreact-redux

解决方案

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

这里的诀窍是为您的 useSelector 函数制作变化较小的内容。或者至少只有在组件需要重新渲染时才会改变

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

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

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

推荐阅读