如何在使用useCallback时记住高阶函数?

爱德华·尼约格

使用React Hooks,当我们想记住一个函数的创建时,我们就拥有了useCallback钩子。这样我们就可以:

const MyComponent = ({ dependancies }) => {
  const memoizedFn = useCallback(() => { 
    /* ... */ 
  }, [dependancies]);

  return <ChildComponent onClick={memoizedFn} />;
}

我的问题是,如何在一个useCallback钩子中记住一个高阶函数的值,例如:

const MyComponent => ({ dependancies, anArray }) => {
  const memoizedFnCreator = useCallback((id) => () => {
    /* ... */
  }, [dependancies]);

  /* 
   * How do we make sure calling "memoizedFnCreator" does not result in
   * the ChildComponent rerendering due to a new function being created?
   */
  return (
    <div>
      {anArray.map(({ id }) => (
         <ChildComponent key={id} onClick={memoizedFnCreator(id)} />
      ))}
    </div>
  );
}
尝试改善

无需在HoC中传递“创建者函数”,您可以传递一个接受idas参数的函数,并让其ChildComponent创建自己的点击处理程序

在下面的代码示例中,请注意,onClick中的MyComponent不再创建唯一函数,而是在所有映射的元素上重用相同的函数,但是ChildComponent创建了唯一函数。

const ChildComponent = ({ itemId, onClick }) => {
    // Create a onClick handler  when calls `onClick` with the item's id
    const handleClick = useCallback(() => {
        onClick(itemId)
    }, [onClick, itemId])

    return <button onClick={handleClick}>Click me</button>
}

const MyComponent = ({ dependancies, anArray }) => {
    // Memoize a function which takes in the id and performs some action
    const handleItemClick = useCallback((id) => {
        /* ... */
    }, [dependancies]);

    return (
        <div>
            {anArray.map(({ id }) => (
                <ChildComponent key={id} itemId={id} onClick={handleItemClick} />
            ))}
        </div>
    );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

使用useCallback挂钩记住API响应

来自分类Dev

如何在Indesign脚本中使用Array.reduce()之类的高阶函数?

来自分类Dev

如何记住递归函数?

来自分类Dev

使用Kotlin中的高阶函数打印素数时出错

来自分类Dev

如何在TypeScript中编写通用的,类型安全的高阶函数?

来自分类Dev

高阶函数(例如.map())如何在JavaScript中内部工作?

来自分类Dev

如何在Clojure中指定高阶函数参数?

来自分类Dev

如何使用高阶函数获得对角线的总和?

来自分类Dev

javascript如何记录高阶函数?

来自分类Dev

如何在React高阶组件(HOC)中使用refs

来自分类Dev

如何在Reactjs中使用高阶组件添加按钮

来自分类Java

如何注销时使我记住?

来自分类Dev

如何在Typed Racket中编写以多态函数作为参数的高阶函数?

来自分类Python

开发NeuralNetwork时如何在python中使用sigmoid函数

来自分类Python

在逐行移动时如何在python中使用Apply函数

来自分类Dev

如何在查询时使用datediff函数查找年龄范围?

来自分类Javascript

如何使用React.usecallback?

来自分类Dev

像.maps()或.filter()这样的高阶函数如何在Swift中工作

来自分类Dev

如何在React中将HTML元素传递给高阶函数(HOC)?

来自分类Javascript

如何用高阶函数解决这个问题?

来自分类Dev

如何让Python记住函数内部创建的列表以供将来使用

来自分类Dev

在高阶函数中使用参数调用lambda

来自分类Dev

使用Elm高阶函数进行键盘事件

来自分类Dev

使用Python高阶函数处理列表

来自分类Dev

使用高阶函数合并相等的对象

来自分类Dev

使用具有高阶函数的GADT

来自分类Dev

kotlin:使用多个lambda调用高阶函数

来自分类Javascript

如何在useCallback挂钩中传递参数?

来自分类Dev

我如何记住方法,以便在服务器重启时可以重新使用?

TOP 榜单

热门标签

归档