Javascript 如何使用shouldComponentUpdate和React挂钩？

我一直在阅读这些链接：

在第一个链接中，它说（）：

shouldComponentUpdate：参见React.memo

第二个链接还指出：

当使用PureComponent或shouldComponentUpdate时，类组件可以退出呈现。现在，通过将函数组件包装在React.memo中，您可以对其执行相同的操作

---

需要什么：

我希望模态仅在模态可见时渲染（由this.props.show管理）

对于类组件：

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.show !== this.props.show;
}

如何在功能组件中使用

memo

——这里是Modal.jsx

---

相关代码：

功能组件Modal.jsx（我不知道如何检查props.show）

从“React”导入React，{useffect}；
从“./Modal.module.css”导入样式；
从“../background/background”导入背景；
const Modal=React.memo（props=>{
useffect（（）=>console.log（'it did update'））；
返回(
{props.children}
);
});
导出默认模式；

类组件PizzaMaker jsx中呈现模态的部分：

 return (
      <React.Fragment>
        <Modal show={this.state.purchasing} modalClosed={this.purchaseCancel}>
          <OrderSummary
            ingredients={this.state.ingredients}
            purchaseCancelled={this.purchaseCancel}
            purchaseContinued={this.purchaseContinue}
            price={this.state.totalPrice}
          />
        </Modal>
        ...
      </React.Fragment>
    );

返回(
...
);

以下是

您可以传递一个函数来控制比较：

const Modal = React.memo(
  props => {...},
  (prevProps, nextProps) => prevProps.show === nextProps.show
);

---

当函数返回

true

时，组件将不会被重新渲染

您也可以在export语句中使用，如：

export default memo(Modal, (prevState, nextState) => prevState.show === nextState.show) ;

---

使用

React.memo

，组件只会在道具更改时重新播放，因此这基本上就是您想要的。我只希望它在

props.show

为真时重新播放，而不是

props

本身。因为只要它是隐形的，就可以提高它的性能。点击“立即订购”按钮，触发props.show为true，并调出Modal中的订单摘要，使其可见。效果非常好。谢谢你的接吻方式。这正是我想知道的备忘录。

export default memo(Modal, (prevState, nextState) => prevState.show === nextState.show) ;