如何在 React Hooks 中使用 shouldComponentUpdate？

IT技术 javascript reactjs functional-programming react-hooks
2021-04-09 06:42:14

我一直在阅读这些链接：
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) {
    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>
    );
2个回答

这是React.memo的文档

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

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

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

像魅力一样工作。感谢 KISS 方法。这正是我想知道的关于备忘录的内容。
2021-05-28 06:42:14
react hooks 中的 react.memo 和 useMemo() 有什么不同？
2021-05-28 06:42:14
@JBaczuk 正如您所说，它似乎仅用于提高性能，因此即使该函数返回真值，该组件也可能会重新呈现，奇怪的行为:(
2021-06-01 06:42:14
React.memo 用于防止功能组件的渲染，useMemo 是一个钩子，用于防止重新计算功能组件内部的值
2021-06-16 06:42:14
这是正确的答案吗？因为显然 React.memo 不能像 shouldComponentUpdate 那样被依赖。来自文档：“此方法仅作为性能优化存在。不要依赖它来“防止”渲染，因为这可能会导致错误。
2021-06-21 06:42:14

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

export default memo(Modal, (prevProps, nextProps) => prevProps.show === nextProps.show) ;
它不是 prevState 和 nextState，而是一个道具（prevProps、nextProps）。
2021-05-25 06:42:14
其它你可能感兴趣的问题
上一篇以编程方式更改 Redux-Form 字段值 下一篇模拟内部 axios.create()