Question

我一直在尝试调试似乎渲染次数比预期多的组件，因此我安装了why-did-you-render。错误different functions with the same name. (more info at some site)使我引向这篇文章解释问题https://medium.com/welldone-software/why-did-you-render-mr-big-pure-react-component-part-2-common-fixing-scenarios-667bfdec2e0f。不幸的是，我不确定应该如何解决这个问题。该组件看起来像这样

const Comp = ({cb}) => <div onClick={cb}>click me</div>

，它将像这样使用：

const Parent = () => {
  const cb = () => console.log('clicked!!!')
  return <div><Comp cb={cb} /></div>
}

编辑：更确切地说，我遇到一个问题，即我有一个更高阶的组件，在该组件中生成了一个通过props传递的函数，并且想知道如何避免此问题：

// the HoC
const HoC = Component => {
  const cb = makeFn();
  return <div><Component cb={cb} />
}

//与上述组件一起使用HoC的组件

const Top = () => {
  return <HoC Component={Comp} />
}

当我尝试使用useCallback时收到错误消息React Hook "useCallback" is called in function Top which is neither a React function or a custom React hook function

Answer 1

您将需要记住回叫。在react docs中阅读有关详细信息的更多信息。

useCallback

const Child = React.memo(function({cb}) {
  <div onClick={cb}>click me</div>
});


const Parent = () => {
  const memoizedCallback = React.useCallback(
      () => console.log('clicked!!!'),
      [/*dependencies here*/],
    );
  return <div><Comp cb={memoizedCallback} /></div>
}

通过使用React备忘录，您正在使组件检查旧的道具和新的道具以查看是否有任何更改。并且由于我们正在记住即将发送的回调，因此它将具有与上一个渲染相同的指针，从而不会产生额外的重新渲染。

如何避免由于通过道具将功能传递给功能组件而导致不必要的重新渲染

1 个答案: