如何将 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 的无状态组件将如何提供性能改进?
React Hooks - 我如何实现 shouldComponentUpdate?