如何将 shouldComponentUpdate 与 React Hooks 一起使用?

Posted

技术标签:

【中文标题】如何将 shouldComponentUpdate 与 React Hooks 一起使用?【英文标题】:How to use shouldComponentUpdate with React Hooks? 【发布时间】:2019-10-11 08:01:38 【问题描述】:

我一直在阅读这些链接:https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdatehttps://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

第二个链接还指出:

当使用 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;

类组件 PizzaMaker jsx 中渲染 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>
    );

【问题讨论】:

React.memo,组件只会在props改变时重新渲染,所以这基本上是你想要的 我只希望它在props.show 为真时重新渲染,而不是props 本身。因为只要它是隐形的,就可以提高它的性能。通过单击“立即订购”按钮可以看到它,该按钮触发 props.show 为真并显示位于 Modal 中的订单摘要可见。 【参考方案1】:

这里是documentation for React.memo

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

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

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

【讨论】:

工作就像一个魅力。感谢 KISS 方法。这正是我想知道的备忘录。 react hooks 中 react.memo 和 useMemo() 有什么不同? React.memo 用于防止渲染功能组件,useMemo 是一个钩子,用于防止重新计算功能组件内的值 这是正确的答案吗?因为显然 React.memo 不能像 shouldComponentUpdate 一样被指望。来自文档:“此方法仅作为性能优化存在。不要依赖它来“阻止”渲染,因为这可能会导致错误。” @JBaczuk 正如你所说,它似乎仅用于性能提升,因此即使函数返回 true,也可能会重新渲染组件,奇怪的行为:(【参考方案2】:

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

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

【讨论】:

不是prevState和nextState,是一个prop(prevProps,nextProps)。

以上是关于如何将 shouldComponentUpdate 与 React Hooks 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

如果没有 shouldComponentUpdate,React 0.14 的无状态组件将如何提供性能改进?

如何测试方法 shouldComponentUpdate?

React Hooks - 我如何实现 shouldComponentUpdate?

react-native-navigation如何在`shouldComponentUpdate`中检测当前屏幕

使用shouldComponentUpdate进行性能优化

virtual-dom 和 shouldComponentUpdate