- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在学习 Advanced React Patterns with Hooks 在线类(class),在这个早期示例中,他们使用以下 API 创建了一个可扩展组件(比如经典的 Accordion 或可折叠面板):
<Expandable>
<Expandable.Header>This is the header</Expandable.Header>
<Expandable.Body>This is the content</Expandable.Body>
</Expandable>
并且他们使用 Context 将状态 expanded
传递给 Expandable 的子级。到目前为止一切顺利:
import React, { createContext, useState } from 'react'
const ExpandableContext = createContext()
const { Provider } = ExpandableContext
const Expandable = ({children}) => {
const [expanded, setExpanded] = useState(false)
const toggle = setExpanded(prevExpanded => !prevExpanded)
return <Provider>{children}</Provider>
}
export default Expandable
然后他们说:
toggle
acts as a callback function and it’ll eventually be invoked byExpandable.Header
. Let’s prevent any future performance issues by memoizing the callback
const toggle = useCallback(
() => setExpanded(prevExpanded => !prevExpanded),
[]
)
这让我感到困惑,因为根据 docs useCallback
将返回一个内存版本的回调,只有当其中一个依赖项发生变化时才会改变。但是 toggle 没有任何依赖项,它仍然会产生不同的结果(每次都将 expanded
状态设置为 true
或 false
)。
那么,这有什么意义呢?我错过了什么?
最佳答案
当 Expandable
组件中的状态更新时,Expandable
组件将重新渲染。这将导致重新创建 toggle
函数。
为防止这种情况,它被包裹在 useCallback
钩子(Hook)中,这样 toggle
函数就不会在重新渲染时不必要地重新创建。
useCallback
钩子(Hook)用于内存作为 props 传递给子组件的回调。这有助于避免不必要地执行 useEffect
Hook 或任何其他依赖于从父组件作为 prop 传递的回调函数的引用标识的代码。
关于reactjs - 使用 useCallback 记住切换函数是否有意义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63728408/
我观察到很少有逆向工程师,他们将十进制转换为十六进制的速度如此之快。这简直太神奇了。我一直没有机会问他们。就我个人而言,我真的很讨厌这个转换,而且我总是使用计算器进行转换。 我想知道这种转换是否有某种
我有一个程序使用三个 JTextField 字段作为主要数据输入字段。我想要它,以便当用户终止程序然后再次打开它时,他们的最后一个条目仍将在字段中。 我怎样才能做到这一点?我需要某种数据库还是有更简单
我有以下脚本将 jquery 生成的对象的颜色更改为蓝色: $(".objects_list").live('click', function(event) { $(this).css("co
这个问题在这里已经有了答案: Is it a good idea to memoize all of my react components? (2 个答案) 关闭去年。 我知道使用 React.m
我在 R 中编写了一个递归函数并使用 memoise 来加速它。我试图通过在 Rcpp 中编写它然后记住 Rcpp 函数来进一步加快它的速度,但 R 函数更快。为什么会这样,有什么方法可以加快我的使用
我的应用程序包含几个 View ,我想在应用程序启动且用户尚未完成向导时显示一个小设置。我知道我可以使用 NSUserDefaults 实现此目的,但我不确定如何使其根据 NSUserDefaults
我正在从一台机器(相同版本的Delphi)开发应用程序。该应用程序的原始版本使用了TMS包中的TMoneyEdit组件。在移动项目时,我想删除对该产品的依赖。因此,在源代码中,我删除了TMoneyEd
我有一个触发器,希望将相同的随机值插入两个表中。我该怎么做呢? 在TableAB上插入后创建触发器insertTrigger 开始 插入TableA(id,num)VALUES(RANDOM(),1)
我有以下代码,通过 .swf 解决方案将服务器 IP 复制到客户端的剪贴板。正如您所看到的,它用成功的“已复制”消息替换了“复制 IP”按钮。我该如何让“复制 IP”按钮在显示成功消息 5 秒后返回,
我正在使用 GPS 定位功能,问题是权限弹出窗口一遍又一遍地出现(每次新的网址刷新/按 F5 键)。 我如何记住用户在浏览器中选择的状态(已批准或已拒绝)。 if (navigator.geoloca
有一个按钮(实际上有很多),它有一个事件处理程序: el.onclick = function(){ if(this.className.indexOf("minimized") != -1)
我正在制作一个纯 html+JavaScript 幻灯片。幻灯片位于网站的侧边栏中,该网站为每个具有幻灯片侧边栏的页面加载了 php。唯一没有侧边栏的页面是主页。 幻灯片放映工作正常。然而,可以理解的
我想制作一个 Chrome 扩展程序,它将存储来自用户的潜在大型代码片段(以及代码片段的名称)并使用它们。 我希望用户能够上传包含这些片段的文件(或者更好的是,将这些片段复制并粘贴到扩展程序选项页面的
我有一个方法是 pure function并需要一段时间才能运行。我想记住这个方法,以便后续调用更快。我可以在 Groovy 的文档中看到,您可以通过以下方式内存闭包: foo = {…}.memoi
[jQuery][1] 始终记住您的鼠标触发器,无论是单击还是悬停。因此,如果您鼠标输入和鼠标退出四次,它将执行该事件四次。 如何让它“忘记”触发器,以便当我用鼠标输入和退出触发器时它只执行一次? 编
对于我的开发人员工作,我几乎整天都在 *nix shell 环境中工作,但似乎仍然无法记住我每天不使用的程序的名称和参数细节。我想知道其他“临时健忘症患者”是如何处理这个问题的。你有一个大的备忘单吗?
我有一个表格,在客户填写各种表格后,我希望能够浏览网站,并返回表格并保持填写状态。 我考虑过在浏览器的客户端中保留 cookie,您可能会推荐其他方法吗? 关于代码,这里是 o 想到的 javascr
好的,我已经实现了 Facebook 登录按钮: loginButton.readPermissions = ["public_profile", "email", "user_friends"] l
我在移动应用程序中使用 AngularJS。用户能够将产品添加到订单中。但是我使用了不同的选项卡,以便用户可以在类别之间切换,并且对于每个类别,都会显示属于该类别的产品。这些产品可以添加到他/她的订单
我有一个使用自定义适配器、布局和模型类的 ListView (包含文本和复选框)。我想将选定的复选框保存在 sqlite 数据库中,以便当我导航到另一个 Activity 然后返回时,选定的复选框保持
我是一名优秀的程序员,十分优秀!