javascript - react 备忘录组件并在将函数作为 Prop 传递时重新渲染

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的函数是always recreated在 Compo1 和 Compo2 中，正确吗？

如果是这样，因为foo每次都会接收到一个新的函数，是不是意味着memo就没有用了，所以Nested会一直re -渲染？

Answer 1

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

只需为此使用 useCallback 钩子(Hook)。

例如

父组件

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