使用 React.memo() 記憶的組件不斷重新渲染

Question

我有一個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不重新渲染。

Answer 1

如果您使用的是useState 、 useContext或useReducer ，那么組件仍將重新渲染。

這直接來自文檔。