时间戳

首页 > 解决方案 > 使用 useCallback 时如何记忆高阶函数？

javascript - 使用 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>
  );
}

标签： javascriptreactjsreact-hooks

解决方案

除了在 HoC 中传递“创建者函数”之外，您还可以传递一个以 aid作为参数的函数并让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>
    );
}

推荐阅读