reactjs 使用React.memo()存储的组件保持重新渲染

3bygqnnd  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(130)

我有一个ParentComponent看起来像这样:

const ParentComponent = () => {
  [product, setProduct] = useState({
    name: "Test",
    description: "Information goes here..."
  })

  return(
    <ChildComponent product={product} updateProduct={setProduct}/>
  );
}

字符串
ChildComponent如下:

const ChildComponent = ({product, updateProduct}) => {
  // some code here

  return(
    <RichTextEditor content={product.description} update={updateProduct}/>
  )
}

const isEqual = () => {
  return true; // I want to force the component to never re-render
}

export default React.memo(ChildComponent, isEqual)


这里发生的事情是,我有一个product对象,其描述由ChildComponent更新。每当RichTextEditor组件中的输入发生变化时,该描述的值通过updateProduct进行设置。我知道,由于product的状态改变,ChildComponent每次都会重新渲染,这是不幸的,因为这可能会导致不必要的效果,例如使RichTextEditor内的输入字段失去焦点。因此,我尝试使用始终返回true的isEqual函数强制ChildComponent永远不重新渲染。它不断地重新渲染,为什么呢?
我意识到还有其他的设计可以完全避免这个问题,我可能无论如何都会这样做,但在我这样做之前,我想了解为什么我不能强制ChildComponent不重新渲染。

snz8szmq

snz8szmq1#

如果您使用的是useStateuseContextuseReducer,则组件仍将重新渲染。
这是直接从医生那里得到的。

yrefmtwq

yrefmtwq2#

子组件是否使用任何上下文?
即使组件被记忆化,当它使用的上下文发生变化时,它仍然会重新呈现。Memoization只与从其父组件传递给组件的props有关。
要解决这个问题,请通过props将上下文值传递到组件中,而不是直接在子组件中使用上下文。

相关问题