web-dev-qa-db-ja.com

ReactフックでshouldComponentUpdateを使用するには？

私はこれらのリンクを読んでいます：
https://reactjs.org/docs/hooks-faq.html#how-do-i-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 ）：

shouldComponentUpdate：React.memoを参照してください

2番目のリンクは、次のようにも述べています。

クラスコンポーネントは、PureComponentまたはshouldComponentUpdateを使用して、入力プロパティが同じである場合、レンダリングから解放されることがあります。これで、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;

Modalをレンダリングするクラスコンポーネント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>
    );
javascriptreactjsfunctional-programmingreact-hooks
16
Matin Sasan

こちらが React.memoのドキュメント です。

比較を制御する関数を渡すことができます：

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

関数がtrueを返す場合、コンポーネントは再レンダリングされません

36
Olivier Boissé