问题标签 [react-usememo]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
387 浏览

javascript - 何时使用 useMemo 和 useCallback 进行性能优化?

考虑我有这样的例子:

基本上我有一个名为的组件Hello,它接收两个道具firstNamelastName然后我需要fullName根据这两个道具进行计算,并有一个函数sayHello()用来fullName做某事

所以我的问题是:这里有必要使用useMemo()useCallback()进行性能优化吗?这似乎是一种过度使用,useMemo()只是useCallback()为了一点好处,我不确定这是否会导致潜在的副作用?

0 投票
1 回答
48 浏览

javascript - 使用 React.memo 防止重新渲染

我已经构建了一个网络应用程序,用户在其中拥有不同页面的个人资料。在所有页面中都有个人资料图片和横幅,我希望它们只呈现一次。

现在,每次用户更改页面时,都会刷新个人资料图片和横幅。我想阻止这一切。

现在如何运作:

现在如何运作

我想要的是:

我想要的是

我一直在玩 React.memo,但我无法让它工作。

每个父页面(预设、商店和课程)获取所有数据(个人资料图片、横幅......)。

然后我将数据传递给子组件 Banner 和 ProfilePicture。

这是我的Banner 组件代码(banner prop 是 url 类型的字符串):

父组件(所有页面)中,我获取数据并将其传递给横幅组件,如下所示:

我认为横幅首先是未定义的,然后是获取的 url,因此道具每次都从未定义变为字符串,这就是 React 备忘录不起作用的原因。

我不知道如何解决这个问题。

0 投票
3 回答
1808 浏览

javascript - 如何避免在父组件状态更新时重新渲染循环中的所有子组件

我有一个子组件,它位于父组件的循环内。当其中一个子组件正在更新父组件的状态时,它会重新渲染所有子组件,因为它是循环的。我怎样才能避免每次迭代的重新渲染。

当前行为: 在上面的代码中,当我单击其中一个子组件中的复选框时,它正在更新父组件状态(selectedChild)。所以循环正在执行,所有子项(所有表行)都在重新渲染。

预期行为: 只有该特定行必须重新渲染

演示: https ://codesandbox.io/s/newpro-0pezc

0 投票
1 回答
174 浏览

javascript - 使用 ReactMemo 渲染异步值

我目前正在做一个小项目,涉及我使用带有外部包(react-tables)的反应备忘录。轻微的打嗝是一些用于表数据的数据是从 API 获取的,并且在第一次加载时会引发错误。纠正此错误的理想方法是什么?

在第一次加载时,它会抛出一个错误,无法读取 undefined 的属性“名称”,这肯定是导致项目未定义的原因。但是,如果在呈现表之前定义了所述数据,则它可以正常工作。所以问题实际上是找到一种方法来延迟第一次渲染时数据函数的调用。

这个问题有可接受的解决方法吗?

PS:到目前为止,如果它们没有被记忆,它会从反应表代码本身引发内部错误,无法读取forEach未定义的属性

0 投票
1 回答
36 浏览

javascript - 如何使用未在 React-Table 中连续显示的数据?

例如,我想id用作将通过 row.values 在位于 Actions 组件中的 Actions 标头中传递的东西。虽然我可以获取名字和姓氏的值,但我不能获取 id

0 投票
1 回答
239 浏览

javascript - [react]:useMemo 在传递数组时返回第一个元素

这是示例代码

单击按钮时,我会在控制台中关注

我的问题:因为它返回第一个元素,所以我无法映射links数组。它甚至是我应该使用的方式useMemo吗?请注意,我传递的数组是例如,元素可能会变得比简单的字符串更大。

0 投票
0 回答
448 浏览

reactjs - 等效的useMemo异步功能?

我只需要在我的应用程序中进行一次 HEAVY(需要 .then() 语法)API 调用。我所拥有的工作,使用 useState 和 useEffect,但是当上下文重新加载时,它会再次调用 API。

有没有办法使用 useMemo 重写它以使其工作,所以如果上下文重新呈现,它可以使用保存的响应而不是再次调用 API?

我分别尝试了这些无济于事...

0 投票
0 回答
56 浏览

reactjs - React:useEffect 总是正确的方法吗?

我目前在问自己,useEffect 是否总是正确的方法。我正在考虑这个,因为我目前的项目。

想象一下,您必须遵循:

  • 一个query只是后端查询的状态。一个查询也知道一个sorting. 这将由一个方法填充,该方法从后端loadQuery获取配置。query但是初始状态是空的query并且不是未定义的。

  • 一种loadData从类型后端加载数据的方法Entity[]。此方法消耗状态query。这可以直接触发,因为空query的查询是有效的。

  • 一种loadView从 type 的后端加载视图的方法View。Aview只是一个 JSON,它描述了表格的单元格并具有sorting属性。

  • 一个 useEffect,它调用loadDataloadView。作为依赖,我们有query.

  • 一个 useEffect 函数,它监听加载的view. 如果加载的视图有一个sorting属性,那么它将操纵query状态。这将导致从上面的一点再次触发 useEffect。

这是当前的情况(当然缩短了)。我们还有

  • view切换按钮,再次变为query。这将导致加载数据的useEffect被触发。
  • 表中的无限加载(也将loadData使用偏移量调用),
  • 可以更改,query如果用户更改查询FilterDialog

有时候加载数据的useEffect,会连续触发3次。

当然,一个解决方案是记住一个布尔值是否已经加载了一些数据......但是由于我们有不止一个 useEffect,所以很难做到这一点。为此也很难记住布尔值,因为如果发生componentDidUpdate循环,那么您必须重置这些布尔值,因为一切都应该像以前一样执行。但这可能会导致问题,因为一切都是异步的。

也许其他人也有同样的问题,有太多的 useEffects 这会导致不必要的事情,可以和我分享他的经验:)

0 投票
1 回答
147 浏览

reactjs - 使用反应钩子跨组件携带页面上下文/状态

我是反应钩子的新手。我们正在开发一个没有 redux 的基于反应的应用程序。我们只有一个页面,其中有不同的组件,如搜索、过滤器、网格、分页等。

每当我们在 page 上执行任何操作时,Grid 都应该使用该操作道具刷新。

例如,当我在页面上进行搜索时,网格应该使用搜索道具刷新。我在页面上应用任何过滤器,网格也应该使用过滤器道具和搜索道具刷新。

因此,所有单个组件中的所有操作状态都应该可用,以使用适当的道具来调用网格刷新 api。

您能否帮助我了解我们如何在每个组件级别维护整个页面的状态。

0 投票
1 回答
752 浏览

react-native - 即使使用 React.memo 也会重新渲染 FlatList 项目

我正在尝试使用 FlatList 组件呈现 React Native 中的项目列表,但每次我获取新数据时,它都会重新呈现项目列表,即使使用 React.memo。

这是我的代码的样子:

组件.js

每次onEndReached触发该函数并调用 loadMore 函数时,所有 FlatList 项目都会重新渲染,它每次都会 console.log '我正在渲染'并导致错误virtualizedlist you have a large list that is slow to update

感谢任何可以帮助我的人!