如何在使用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] 删除。