问题标签 [react-usememo]

我有两个“昂贵”的功能，我想在我的反应应用程序中记住它们，因为它们需要很长时间才能呈现。昂贵的函数用于数组映射。我想记住数组映射的每个结果，以便如果数组的一个元素发生更改，则只会重新计算该元素的昂贵函数。（并且要独立记忆昂贵的函数，因为有时只需要重新计算一个。）我正在努力解决如何记忆和传递当前数组值。

这是工作演示，没有记忆：

（我没有让它在 SO 的编辑器上运行，所以在codeandbox上查看并运行它。）

这是我使用自定义钩子和 useMemo 钩子的尝试之一。

任何指导将不胜感激！

以及说明如何在 SO 的编辑器中对工作做出反应的奖励积分！

返回像下面这样的 JSX 是否被视为昂贵的计算/计算？我阅读了一些文章，包括 Kent C Dodds 关于何时使用 useMemo 和 useCallback 的文章。他们中的大多数人明确表示在您的应用程序感觉缓慢时使用这些 API。很想知道 React 社区对此有何看法

这是我的代码：

我的应用程序运行虽然有点慢，因为我循环创建按钮并再次循环更改按钮的颜色

它很慢，因为每次我更改按钮中的颜色时，我都必须在useState对象数组中循环

我的问题是，我如何只渲染一个使用 Array 的对象useState？或者..有没有比这样循环更快的方法/更好的方法？

我还尝试将选中状态作为目标，booleanMonth[0].checked=true在不循环的情况下更改状态，但不会更改颜色。

这是数组：

这是我创建按钮的地方，如果数组 ABOVE 中的一个对象由于我按下按钮而发生更改，则该按钮将循环：

这是按下按钮功能，它还循环以确定哪个按钮来更改其颜色，因为它的检查状态为真/假（我认为这也会因为循环而减慢我的速度）

开放任何建议：<请在这里帮助新手

我想我知道这个问题，但我没有解决方案，所以我有这些按钮，这些按钮是通过在 useState 数组上循环创建的

然后渲染按钮：

现在这是 onPress 函数，它将检查状态更改为真或假，因此应该改变这些按钮的颜色

在控制台日志中它返回检查真或假，这意味着我的代码是正确的，但它没有呈现正确的颜色，假=黑色，真=绿色

请在这里帮助新手 reactjs 用户：<

我对反应表有疑问。我需要在表的不同列中使用 subject.subjectName，但我得到一个值为空的错误

我希望有一个人可以帮助我。我试图找到我的问题的答案，但我找不到，所以如果它在那里并且我找不到它，我提前道歉。

所以，我有一个昂贵的操作，它依赖于存储在 redux 存储中的 3 个对象。由于它很昂贵，我只想在这 3 个对象中的任何一个发生更改时才执行它。

为了避免使 useMemo 执行的函数过于复杂，我将其拆分为较小的函数，然后在需要时调用，如下所示：

现在，我不想将 processStoreObject1 列为 useMemo 的依赖项，计算值不依赖于它，计算值仅依赖于 3 存储对象。但是，如果我没有将该函数列为 useMemo 的依赖项，则会收到以下 lint 警告：

“React Hook useMemo 缺少依赖项：'processStoreObject1'。要么包含它，要么删除依赖项数组。eslint(react-hooks/exhaustive-deps)”

由于这个警告，我必须将函数包含在依赖数组中，并且因为函数是在组件内部声明的，类似于：

我必须将它包装在 useCallback 中，否则它会随着每次渲染而变化，并且 useMemo 一直在重新计算（这是错误的）。如果我不使用 useCallback 包装 processStoreObject1，我得到的警告是：

“'processStoreObject1' 函数使 useMemo Hook 的依赖关系（在 NNN 行）在每次渲染时都会发生变化。要解决这个问题，请将 'processStoreObject1' 定义包装到它自己的 useCallback() Hook.eslint(react-hooks/exhaustive-deps) "

我知道一个简单的解决方案是在组件外部定义 processStoreObject1 ，这样它就不会在每个渲染中创建，但我不喜欢这种方式，该函数只在组件内部使用，所以我想在那里定义。

总而言之，问题是，如何在不将依赖项添加到依赖项数组的情况下，在 useMemo 执行的函数中使用函数。我知道这是可行的，我看到了一些没有在依赖项数组中使用的函数示例。

如果有人可以帮助我，我将不胜感激。

谢谢 ！

在这篇关于使用上下文 API 进行状态管理的文章中，作者以这种方式将 useMemo 应用于 useState 返回值：

我不确定是否了解此优化的目标：

• 1/是否防止在任何道具发生变化时重新渲染，
• 2/ 或者setCount本身可以虚假改变吗？

如果是1/，是不是就相当于下面的代码？（因为：除了孩子之外，我们还想将什么道具传递给上下文提供者？如果孩子改变，重新渲染是可取的）

我试图理解 React.memo 但有点困惑。认为用例通过记忆组件来防止重新渲染？我有一个记忆的孩子，每次都在重新渲染。

- 应用程序

----首页【点击按钮更新状态】

------child [memoized 防止重新渲染但每次都重新渲染]

在我看来，流程应该是这样的：

• 用户点击按钮
• Home 更新本地状态，增加数字 +1
• 这会触发组件及其子组件的重新渲染
• 返回 memoized 组件，旧的控制台日志要么出现，要么什么都不出现，因为该组件的 args 没有改变。

实际发生的事情：

• 用户点击按钮
• Home 更新本地状态，增加数字 +1
• 这会触发组件及其子组件的重新渲染
• 返回被记忆的组件，重新注销。

日志每次都出现新的/新鲜的，孩子每次都重新渲染......

我误解了什么吗？

我需要什么：在我的组件中，当 useContext 的值发生变化时，我需要显示一个加载微调器。我找到了一个解决方案，但我不太喜欢它。

如果我这样做，那么每次安装组件时都会调用 useEffect，即使 stateDB 不会改变。所以我的问题是：有没有办法只在 useContext 的值发生变化时才调用这个 useEffect ？由于 useContext 挂钩每次都返回新对象，因此 useEffect 认为它与前一个不同。

在 useDB 里面我有：

我发现的解决方案：

我使用 TypeScript 4 和 React 17

我在自定义钩子中有这段代码：

ESlint 抱怨必须将 myMap.field.[subfieldId] 移动到变量中以进行程序检查。

所以我改成这样：

我不确定让变量在上限范围内，在每次渲染时重新计算是一个好习惯，我什至担心会创建无限循环。

ESLint 建议我这样做，这要简单得多：

myMap.field 是否足以让 React 发现 myMap.field[subfieldId] 发生了变化？我想应该会的。确实，如果我只放 myMap，React 不会知道发生了什么变化，因为对象引用本身并没有改变，但是在比较之前和新的 myMap.field 时，React 会检查所有子字段。可以？