使用 store 中的数据时如何避免重新渲染功能组件答案

【问题标题】：How to avoid re rendering of functional component when using data from store使用 store 中的数据时如何避免重新渲染功能组件
【发布时间】：2021-07-16 14:57:24
【问题描述】：

想要使用存储中的一些数据并使用选择器获取它，但问题是我不想在数据更改时重新渲染组件

export function App() {
  const userStatus = useSelector(selectUserStatus);
  return userStatus === UserFetchStatus.LoadingFromStorage ||
    userStatus === UserFetchStatus.Loading ? (
    <Spinner /> 
  ): <Content />; }

有没有办法在不进行重新渲染循环的情况下获取这些数据？

【问题讨论】：

Please don't ask the same question multiple times in a brief time period.。如有必要，您可以编辑现有问题以澄清它，而不是打开一个新问题。
在一种情况下，我不想仅在一种特定条件下重新渲染组件，而在另一种情况下，我不想在其值更改时重新渲染组件
另外请写完整的代码，因为在这个例子中你错过了三元语句的第三部分
如果您从不想要在特定数据更改时重新渲染组件，请不要让它导入该数据。

标签： reactjs redux react-redux

【解决方案1】：

你可以试试下面的代码：

import React, { useEffect, useState } from 'react'; 
import { useStore } from 'react-redux';
import { includes } from 'fp';

const isLoading = includes([
  UserFetchStatus.LoadingFromStorage,
  UserFetchStatus.Loading]
);

const App = () => {
  const store = useStore();
  const { userStatus } = store.getState();
  return isLoading(userStatus) ? <Spinner /> : <Content />;
};

这应该有效，因为根据react-redux 文档，useStore 在状态更改时不会更新组件https://react-redux.js.org/api/hooks#usestore

【讨论】：