1

我试图理解 React.memo 但有点困惑。认为用例通过记忆组件来防止重新渲染？我有一个记忆的孩子，每次都在重新渲染。

- 应用程序

----首页【点击按钮更新状态】

------child [memoized 防止重新渲染但每次都重新渲染]

在我看来，流程应该是这样的：

  • 用户点击按钮
  • Home 更新本地状态，增加数字 +1
  • 这会触发组件及其子组件的重新渲染
  • 返回 memoized 组件，旧的控制台日志要么出现，要么什么都不出现，因为该组件的 args 没有改变。

实际发生的事情：

  • 用户点击按钮
  • Home 更新本地状态，增加数字 +1
  • 这会触发组件及其子组件的重新渲染
  • 返回被记忆的组件，重新注销。
const MemoizedChild = React.memo(ShoppingBasket);

function Home() {

    const [ myNum, updateMyNum ] = useState(0);

  return (
    <div className="home__container">
        I am the home page
        <p>myNum {myNum}</p>
        <button onClick={() => updateMyNum(myNum + 1)}>Add Number</button>
        <MemoizedChild items={[1, 2, 3, 4]} total={900} />
    </div>
  );
}

日志每次都出现新的/新鲜的，孩子每次都重新渲染......

function ShoppingBasket({ total, items }) {
    console.log("Re Rendered Shopping Basket" + Date.now());
    return (
        <div className="basket__container">
            <h4 className="basket__heading">Shopping Basket</h4>
            <p className="basket__info">Total: ${total}</p>
            <p className="basket__info">No. of Items: {items.length}</p>
        </div>
    )
}

我误解了什么吗？

4

0 回答 0