javascript - 如何在使用 useCallback 时内存高阶函数？

Question

使用 React Hooks，当我们想要记住函数的创建时，我们有 useCallback 钩子(Hook)。这样我们就有了:

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

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

我的问题是，我们如何在 useCallback Hook 中记住高阶函数的值，例如:

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>
  );
}

Answer 1

除了在 HoC 中传递“创建者函数”之外，您还可以传递一个接受 id 作为参数的函数，并让 ChildComponent 创建它自己的点击处理程序

在下面的代码示例中，请注意 MyComponent 中的 onClick 不再创建唯一的函数，而是在所有映射元素中重用相同的函数，但是 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>
    );
}