问题标签 [react-memo]

我有一个自定义挂钩useWindowSize，可以监听窗口大小的变化。一旦窗口大小低于某个阈值，一些文本应该会在Menu. 这是在另一个自定义钩子useSmallWindowWidth中实现的，该钩子接受返回的值useWindowSize并检查它是否小于阈值。

然而，即使只有嵌套状态发生变化，当窗口大小发生变化时，我的组件也会不断地重新呈现。重新渲染菜单平均需要大约 50 毫秒，如果我想让其他组件也响应的话，这会加起来。

那么我怎样才能防止组件重新渲染呢？我尝试React.memo通过return prev.smallWindow === next.smallWindow;在函数内部传递，但它没有用。

到目前为止我的尝试：

我有如下组件

QuestionAnsPage.component(parent)：

我的 QuestionAnswer.componet(child):

我正在使用它React.memo来提高性能。我想在"props.data.values"（此字段的类型为Array<string | number>）更改时呈现我的子组件。为此，我创建了comparisonForRerender函数。

我正在尝试比较props.data.value功能，例如：(prevValArr.includes(nextValArr[0]))

但是这个函数会导致一些奇怪的行为，我的父组件状态会以某种方式重置为旧值（在这种情况下是数据）。

我不确定，但这个比较函数以某种方式改变了我的父组件状态。如果我删除此功能，那么它工作正常。

我有两个组件。

我的问题是当 stateA 在某处更改时，单击Child将记录以前的 stateA。我无法访问最新的 stateA。

你可以看到，我不想Child在 stateA 改变时重新渲染，它应该只在 stateB 改变时重新渲染。但是我想在Parent点击时访问最新的 stateA Child。

有什么方法可以解决这个问题吗？

我收到以下错误

当我更改此组件时它们会发生

要成为这个组件，唯一的区别就是使用了 React.memo

包装在 React.memo 中的那些组件肯定只是看起来像的功能组件

为什么会发生这种情况？我能做些什么来阻止它？

我正在开发一个将图像添加到项目的组件。您可以上传自己的图片或选择一张图片，根据项目名称从 API 加载。

这是根组件：

这是<ImagePicker />：

我正在努力解决的问题是让组件在searchTerm未更改的情况下不再获取结果。例如，当组件在选项卡 0（上传图像）上加载时，您切换到选项卡 1（选择图像）并获取结果searchTerm，然后切换到 0 并再次切换到 1 并再次获取它们，尽管searchTerm没有改变。如您所见，我尝试使用React.memo但无济于事。另外，我添加了currentTab === 1以阻止它在根组件呈现时获取照片，并且仅在活动选项卡为 1 时才获取它们。

我的主要功能组件在子组件上执行大量的 useQueries 和 useMutations，因此我将其设置为 React.memo，以免在每次更新时重新渲染。Basically, when new products are selected I still see the old products because of memo.

mainFunction.js

ChildComponent.js

我的 bestSellerDummy 数据没有改变，所以我想防止在父级重新渲染时重新渲染相同的 Product 子级。我尝试在父级中使用 useMemo 并在子级中使用 React.memo 但没有运气，每次父级重新渲染时它仍然显示日志“渲染产品组件..”。我在这里想念什么？请指教。

注意：每次我在 Product 组件中调用 addToCart 函数（属于 CartContext）时，都会重新渲染父级。

我正在使用 CartContext，可能与此有关，我不确定。这是沙箱：https ://codesandbox.io/s/dazzling-moore-po1c6?file=/src/App.js

主页.tsx

产品.tsx

=== 编辑：我的答案版本 ===

最后！在玩过useCallback, useMemo, fast-memoizeplugin .. 最适合我的是useReducer在 Context 中使用并用React.memo. 我认为这是优化子组件最干净优雅的方式。工作沙箱在这里：https ://codesandbox.io/s/eloquent-albattani-8x7h9?file=/src/App.js

我正在尝试使用 React 备忘录组件作为行从头开始创建一个 Table 组件，以防止不必要的重新渲染。行单元格是从子函数创建的 React 组件数组，其中包含行数据、行 ID、行索引和 commitChange 函数作为参数。commitChange 函数用于从一行设置 Table 状态。这是代码：

表组件.jsx

当一个元素被添加到 Table 组件上的数据道具时，表格会重新渲染并仅渲染添加的行，这可以正常工作。

但是，当从第二个单元格中的文本框编辑行元素时，父表组件上的数据已正确更新，但行不会重新呈现。当我使用 React.memo areEqual 函数（此处的文档）检查传递给组件的上一个和下一个属性时，数据属性是相同的。当 TableData 按行更新并且执行了 renderRows 函数但没有重新渲染更新的行时，表格组件会重新渲染。

问题是什么？感谢帮助

PS 不，我不希望外部库来制作自定义表格元素

我正在开发一个反应原生应用程序。我目前正在使用 Item 组件在 flatlist 中显示数据。但是编辑器给了我一个 React.memo 的第二个参数的错误，如下所示。

输入'布尔| undefined' 不能分配给类型 'boolean'。

类型“未定义”不可分配给类型“布尔”。

我正在使用 react、react-redux 和 socket.io 构建一个聊天应用程序。现在，为了提高应用程序的性能，我添加React.memo()到我的<Message ... />组件中以防止重新渲染。但是，根据 React Profiler，我的所有消息组件都会在我获取更多消息时继续重新渲染。我的代码：

room.jsx（消息容器）

消息.jsx

roomReducer.js

探查器