问题标签 [react-usememo]

简短的问题是：我们如何冻结组件的内容，可能是通过使用useMemo()并告诉它冻结内容？

那是因为useMemo(fn, [])需要数组做一个值的差异来决定是否使用记忆值。它不需要一个标志true来告诉它使用记忆值。

我想到了一种方法，就是

所以如果flag为真，它不会评估第二部分，当第二次为真时，内容被冻结。第二个选项是使用uuid()而不是第二部分，它每次都应该是唯一的。第三种选择是收集所有导致输出相同的参数放入数组中，可能很难全部收集，而且容易出现bug。

但是这种方法有点hacky......它可能需要比较${Date.now()} ${Math.random()vs的性能，uuid()因为如果它是CPU密集型的，它只会让情况变得更糟。

细节：

这是因为想要将面板滑出而不更新它，因为面板非常忙于更新，而主窗口正忙于不断更新。为此，当用户单击“更新主窗口”按钮时，我们调度一个动作来设置 redux 状态，我们可以滑出面板，完成后，我们调度另一个动作，这样一个 redux 状态会告诉面板不更新，只是return <div></div>. 另一种方法是只调度第一个动作，并能够“冻结”组件。在这种情况下，我们不需要调度第二个动作。

但useMemo()不采用“冻结”标志，而是采用一系列依赖项。有没有办法使用标志使其冻结？

我正在尝试渲染必须通过的数据useMemo。我从 api 调用中获取数据，所以我调用useEffect. 初始渲染工作返回一个空数组，但是一旦我调用 api，数据就不会更新。

那么这可以在单个组件中工作吗？还是必须创建自定义挂钩？

寻找一些 React 渲染/useMemo 指导。

我有一个包含 2,000 多个项目的列表，每个项目都是一个 React 组件。有一个“当前选定”项目的突出显示，该项目独立于列表呈现。这允许我只渲染一次列表。

现在我添加了“扩展”其中的列表项的功能，它只添加新的 DOM 元素，而不修改处于非扩展状态的列表项。

你可以想象每个Item都是两个部分：

问题：有没有一种方法可以支持这一点，而不必在每次展开/折叠新项目时重新渲染整个列表？

不幸的是，扩展的 DOM 元素是“流动的”，因此扩展会在其后推送列表项（不仅仅是悬停/覆盖）。

我正在听 redux 存储更改，useSelector问题是在每个数组更改上，整个平面列表都会完全重新呈现。例如，如果我删除一个项目，整个平面列表会再次完全呈现。我想防止这种情况发生。

我有一个呈现通知列表的 flatList：

这是渲染项功能：

这是Notification用 包裹起来的组件useMemo：

问题是：

1. 没有触发相等功能（我没有看到console.log）
2. 每次我从列表中删除一个项目时，都会再次呈现所有通知组件。想用 useMemo 来防止这种情况，但它没有效果。我在这里想念什么？

我无法从自定义挂钩中获得更新的状态。这个例子很简单。这是一个自定义钩子，允许在自定义钩子内从深色主题切换到浅色主题，我使用 useMemo 返回一个记忆值，但这似乎不会在我每次更新状态时更新switchOn。

我不想在这个例子中使用上下文

1. 我的自定义钩子：useTheme.js
2. 下面，我想从自定义钩子访问逻辑的组件：App.js

我使用 App.css 来应用主题样式：深色和浅色

下面是一个演示。我们可以看到值没有改变

订阅状态更改的有效方法是如何在组件之间共享全局状态？

我正在使用react-table库进行过滤和分页。我正在使用来自自定义 API 的请求数据Node并使用useTable来自react-table. 的文档react-table说应该记住表数据，所以我使用了useMemo钩子。代码如图所示：

但是，我收到以下错误：

谁能帮我解决这个问题？提前致谢！

在我的功能组件中，我想记住一些取决于Id对象属性的值：

我想做这样的事情，但问题是，innerProperty可以undefined。所以我需要为innerProperty添加一个检查，但是我不能在外面添加它，useMemo因为它给了我错误，即不应该有条件地调用钩子，甚至不能在内部调用，因为我将不得不添加obj我不想要的依赖项，因为其他属性可能会改变。

需要知道我怎样才能做到这一点。任何帮助表示赞赏。

提前致谢！

首先对糟糕的代码感到抱歉。我是 React 的新手，所以请原谅：P。在这里，我创建了 2 个按钮，“添加”和“更改假”。当我点击“添加”时，它不会重新渲染子组件，当我点击“更改假”时，它会重新渲染组件，因为我的依赖在 useMemo 中发生了变化，它会创建一个新的对象道具并将其发送给孩子. 但是我收到 useMemo 的警告，说它是不必要的依赖，尽管我需要依赖。我怎么能去那个警告消失。有一个更好的方法吗？

注意：我的子组件是一个虚拟组件。它对这些道具没有任何作用。

输出链接：https: //i.stack.imgur.com/5spw1.png CodeSandbox 链接：https ://codesandbox.io/s/silly-pine-fzjw9?file=/src/

也许是一个愚蠢的问题。但我会感谢社区的一些反馈：）

防止原始值的重新渲染工作正常（React.memo）但是当我尝试将对象传递给子组件时问题就开始了。我尝试使用 useMemo 和 useCallback 但没有成功。只有使用 JSON.srtingify() 来传递数据，然后在子组件中使用 JSON.parse() 的解决方案 - 但这个解决方案看起来很笨拙。

日志：

我正在创建一个 HTML 元素网格，每个元素对应一个“节点”反应组件，并保存在父“可视化器”反应组件中。代码如下所示。

在 Visualiser 父组件中使用 useState 创建一个包含每个节点数据的 2D 对象数组。当使用作为道具提供给子节点的回调函数单击节点子组件时，此列表中有关特定节点的数据会一次更新一个。如果用户当前按住鼠标并将鼠标悬停在节点上，节点数据也可能发生变化，这是使用简单的 mousePressed useState 实现的。这用于在网格上创建类似绘画的效果，但变得非常滞后。

我知道每当 gridData 更新时，React 都会重新渲染每个 Node 组件，因为即使 gridData 中只有一个对象发生了变化，React 也会将其视为整个 gridData 发生变化。

我尝试将 Node 子组件更改为 React.memo HOC，然后在我的三个鼠标单击方法上使用 useCallback 挂钩，以确保 React 将记住它提供的数据道具和函数回调。我还尝试手动将 React.memo isEquals 比较更改为仅对给定的 nodeData 进行浅比较。

这两种方法都只导致我单击更新的节点（有点），但我不能再一次在多个节点中拖动到“绘制”，并且还有奇怪的行为，鼠标单击回调不再正确更改gridData 或 mousePressed 的状态，这让我觉得有更合适的方法来做到这一点。

我知道我需要在某处使用 react 的 memoization 来提高性能，我只是不知道如何或在哪里。任何帮助将非常感激！！

可视化组件代码：

创建二维节点数据数组：