如何使用React Hooks使用shoreSponentuppate

Question

我一直在阅读以下链接：
https://reactjs.org/docs/hooks-faq.html#how-do-do-implement-shouldcomponentupdate
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

在第一个链接中，它说(https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks(：

showscomponentupdate：请参阅react.memo

第二个链接还指出：

类组件可以使用Purecomponent或showerComponentUpdate释放效率。现在，您可以通过将它们包装在react.memo中来使用功能组件来完成。

---

所需的内容：

我只想在可见模态(由this.props.show管理(

时才能渲染。

类组件：

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

如何在功能组件中使用memo - 在此处，在modal.jsx？

中

---

相关代码：

功能组件modal.jsx(我不知道如何检查props.show(

import React, { useEffect } from 'react';
import styles from './Modal.module.css';
import BackDrop from '../BackDrop/BackDrop';
const Modal = React.memo(props => {
  useEffect(() => console.log('it did update'));
  return (
    <React.Fragment>
      <BackDrop show={props.show} clicked={props.modalClosed} />
      <div
        className={styles.Modal}
        style={{
          transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
          opacity: props.show ? '1' : '0'
        }}>
        {props.children}
      </div>
    </React.Fragment>
  );
});
export default Modal;

类组件披萨制造商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>
    );

Answer 1

这是react.memo

的文档

您可以通过功能来控制比较：

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

当功能返回true时，组件将不会重新渲染

Answer 2

您也可以在导出语句中使用：

export default memo(Modal, (prevProps, nextProps) => prevProps.show === nextProps.show) ;