反应备忘录组件并在将函数作为道具传递时重新渲染

Question

假设我有这些 React 组件：

 const Compo1 = ({theName}) => {
  return (
    <Nested foo={() => console.log('Dr. ' + theName)}/>
  );
};

const Compo2 = ({theName}) => {
  function theFoo() {
    console.log('Dr. ' + theName);
  }
  return (
    <Nested foo={theFoo}/>
  );
};

和嵌套组件，包裹在 memo ：

 const Nested = React.memo(({foo}) => {
  return (
    <Button onClick={foo}>Click me</Button>
  );
});

传入的函数 foo 总是 在 Compo1 以及 Compo2 中重新创建，对吗？

如果是这样，因为 foo 每次都会收到一个新函数，这是否意味着 memo 将毫无用处，因此 Nested 将始终重新渲染？

原文由 rodrigocfd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用新的挂钩 Api(React >= 16.8) 来避免重新创建回调函数。

只需为此使用 useCallback 钩子。

例如

父组件

import React, { useCallback} from 'react';

const ParentComponent = ({theName}) => {
  const theFoo = () => {
    console.log('Dr. ' + theName);
  }

  const memoizedCallback = useCallback(theFoo , []);

  return (
     <Nested foo={memoizedCallback}/>
   );
};

useCallback 将返回一个记忆版本的回调，只有当其中一个依赖项发生变化时才会改变（在第二个参数中传递）在这种情况下，我们将 空数组 作为依赖项传递，因此该函数将只创建一次。

和嵌套组件：

 import React, { memo } from 'react';

const Nested = ({foo}) => (
  <Button onClick={foo}>Click me</Button>
);

export default memo(Nested);

有关更多信息 - https://reactjs.org/docs/hooks-reference.html#usecallback

原文由 Artur Khrabrov 发布，翻译遵循 CC BY-SA 4.0 许可协议