React useCallback 钩子没有按预期工作

Question

如果 props 没有改变但下面的代码没有按预期工作，我一直试图避免重新渲染子组件（InputBox 组件）。 我该如何解决？ 如何避免重新渲染 InputBox 组件，因为名称相同但 memoizedCallbacks 未记忆

val

<InputBox name={"test"} handleCb={memoizedCallback} id="name" />

Answer 1

InputBox 组件接收 2 个 props name（原始类型）和 handleCb（引用类型） 使用的相等比较是

function areEqual(prevProps, nextProps) {
  return prevProps === nextProps;
}

prevProps 将是一个对象，例如 -

prevProps  = {
  name: 'someName',
  handleCb: someFunc
}

nextProps 将是一个对象，例如 -

nextProps  = {
  name: 'someOtherName',
  handleCb: someFunc
}

由于两者是不同的引用，它们永远不会相等，因为 {} === {} 总是假的。 因此，areEqual 将始终返回 false 并且组件将重新呈现。

你需要的是-

function areEqual(prevProps, nextProps) {
  return prevProps.name === nextProps.name;
}