如何在 React Hooks 中使用 shouldComponentUpdate? [英] How to use shouldComponentUpdate with React Hooks?

问题描述

我一直在阅读这些链接:
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

第二个链接还指出:

当类组件的输入 props 相同时，可以使用 PureComponent 或 shouldComponentUpdate 来避免渲染.现在你可以通过将它们包装在 React.memo 中来对函数组件做同样的事情.

<小时>

需要什么:

我希望 Modal 仅在 Modal 可见时呈现(由 this.props.show 管理)

对于类组件:

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

如何在功能组件中使用 memo 代替 - 在这里，在 Modal.jsx 中?

<小时>

相关代码:

功能组件Modal.jsx(不知道props.show怎么查)

<代码>导入 React, { useEffect } from 'react';从'./Modal.module.css'导入样式；从 '../BackDrop/BackDrop' 导入 BackDrop；const Modal = React.memo(props => {useEffect(() => console.log('它确实更新了'));返回 (<React.Fragment><BackDrop show={props.show} clicked={props.modalClosed}/>
</React.Fragment>);});导出默认模态；

渲染Modal的PizzaMaker jsx类组件部分:

<代码>返回 (<React.Fragment><Modal show={this.state.purchasing} modalClosed={this.purchaseCancel}><订单汇总成分={this.state.ingredients}purchaseCancelled={this.purchaseCancel}purchaseContinued={this.purchaseContinue}价格={this.state.totalPrice}/></模态>...</React.Fragment>);

解决方案

这里是 文档用于 React.memo

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

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

当函数返回true时，组件不会被重新渲染

I've been reading these links:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

In the first link it says (https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks):

shouldComponentUpdate: See React.memo

The second link also states that:

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

---

What is desired:

I want Modal to render only when the Modal is visible (managed by this.props.show)

For class component:

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

How can I use memo instead in a functional component - here, in Modal.jsx?

---

The related code:

Functional component Modal.jsx (I don't know how to check for 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;

The part of class component PizzaMaker jsx that renders Modal:

 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>
    );

解决方案

Here is the documentation for React.memo

You can pass a function to control the comparison :

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

when the function returns true, the component will not be re-rendered

这篇关于如何在 React Hooks 中使用 shouldComponentUpdate?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！