问题标签 [react-usememo]

我已经创建了一个登录组件，并且有一个带有 redux的状态Auth

那和reducer来更新Auth状态（最初它被设置为FALSE）

但是在初始渲染调度被调用 4 次并且状态更新为 TRUE

我试过useMemo，但不确定如何使用它。

https://codesandbox.io/s/react-reducer-ijhj5?file=/src/Components/LoginComponent.js

我试图在条件语句中使用反应钩子，不幸的是，反应给你几乎所有钩子的错误，它的意图是按照钩子哲学。

然后我在 else 语句中尝试了 useMemo 钩子，它没有任何错误。我用谷歌搜索了这种差异，但没有发现任何有希望的东西。

我的问题， useMemo 是一个例外，您可以在条件语句中使用 useMemo 。

从 useMemo 返回或包装在 React.memo() 中的子组件是否也被记忆？（抱歉，这可能是一个愚蠢的问题）

例如：

这里的 Parent 被记住了，Child 是不是太记住了？

除了在许多 YouTube 教程视频中看到的反例之外，和的实际/现实用例是什么？useMemouseCallback

另外，我只看到了钩子的输入焦点示例。useRef

请分享您为这些钩子找到的其他用例。

我们什么时候应该担心函数组件重新定义变量和函数？

我认为第一种情况显然是不必要的，创建函数并不昂贵（并且反应开发工具配置文件测试没有检测到 useCallback 的性能变化）

另一方面，在另一个示例中，使用 react 开发工具，我们可以检测到 useMemo 将渲染时间缩短了一半：

但是当我们谈论前端时，仍然不到一毫秒的增益和数组映射和 JSX 数组也不是什么真正昂贵的东西。然而，在每次渲染中运行一个数组映射方法是非常不舒服的。那么，这些事情我们应该怎么做呢？（让我们忘记什么时候我们有 useEffect 依赖于一些使 useMemo 成为必要的变量）

• 所有不需要在每次渲染中重新定义的函数和变量中的 useCallback 和 useMemo。
• useCallback 和 useMemo 仅用于我们可以清楚地看到性能提升的事情（即使大多数时间都不能算作对 UX 的改进）。所以在第二个例子中我们需要 useMemo。
• 仅当在特定情况下不使用 useCallback 和 useMemo 时，我们会得到很大的用户体验下降。所以只有真正昂贵的函数才会使用回调

我为我的数据使用了两个不同的 api，并使用 React 备忘录将它们作为变量传递给 react-table useTable 函数。当我在没有 useTable 的情况下运行所有​​代码时，reactMemo 似乎可以工作，我可以控制我传递给使用表的两个变量，headerColumns & colArrayData但是当我使用 useTable 时，headerColumns 变量是一个空数组，破坏了 useTable。

我认为这一定是因为一些重新渲染或副作用的反应导致数组在使用表时为空。我该如何解决这个问题。

这是有问题的代码

更新：我尝试将 useTable 移动到它自己的组件并将值作为道具传递并检查这些值是否首先存在。这仍然导致map is undefined错误，但是没有未定义的console.logs

表格组件

更新：这是我最近一次无济于事的尝试，并且没有未定义的控制台日志，所以不确定为什么 useTable 会出现这个问题

更新：最后我尝试在 React.useMemo 中移动地图函数，但仍然得到同样的错误。

我在使用 .react-table 时遇到了一些问题useSortBy。没有useSortBy桌子工作正常。收到此错误：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

在 JSX 上：

有人可以帮忙吗？

使用 React 备忘录的等效代码是什么？

我正在使用带有钩子的 React。我有一个昂贵的功能，我想记住它。

我知道 React 带有useMemo()，但我需要记忆的值在第一次渲染时计算一次。因此，在第一次渲染中进行记忆是没有意义的，但在未来的渲染中记忆将是有益的。

我已经阅读了 useMemo() 文档，但它没有提供明确的答案所以：存储在 useMemo() 中的值是否会在调用 useMemo 的组件的重新渲染中持续存在？

如何在 React 组件的不同渲染中持续记忆？

我有一个表格，里面有会议预订。其中一部分是日历组件，它具有相当复杂的 UI。

这工作正常。

正如 React 用户所知道的，当任何输入发生变化时，react 会重新渲染表单。由于日历仅依赖于某些输入（和），而不依赖于其他输入fullName，并且绘制速度很慢，我想用它来停止日历重新渲染：emailonEventScheduleduseMemo()

（根据@dmitryguzeev 评论更新为使用 JSX）

然后后来

但是切换到 MemoizedCalendar 会出现以下错误：

（我碰巧在使用 Formik，但是该组件可以正常工作Calendar，只是MemoizedCalendar失败了）

编辑：阅读这篇关于 UseMemo() 的文章useCallback()后，我也尝试过

值得一提的是，如果组件接收到一个函数作为 props，则需要使用 useCallback 钩子，以便它只在必要时再次声明该函数。否则每次渲染时 props 都会不同，因为函数 prop 总是有一个新的引用。

email这修复了错误，但在,fullName和之外的项目onEventScheduled被修改时仍会不必要地重新渲染。

我怎样才能记住这个钩子组件？