javascript 如何在 React Hooks 中使用 shouldComponentUpdate？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56297351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use shouldComponentUpdate with React Hooks?
提问by Matin Sasan
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
我一直在阅读这些链接：
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):
在第一个链接中它说（https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks）：
shouldComponentUpdate: See React.memo
shouldComponentUpdate：参见 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.
当类组件的输入 props 相同时，可以使用 PureComponent 或 shouldComponentUpdate 来避免渲染。现在你可以通过将它们包装在 React.memo 中来对函数组件做同样的事情。
What is desired:
想要什么：
I want Modal to render only when the Modal is visible (managed by this.props.show)
我希望 Modal 仅在 Modal 可见时渲染（由 this.props.show 管理）
For class component:
对于类组件：
shouldComponentUpdate(nextProps, nextState) {
return nextProps.show !== this.props.show;
}
How can I use memoinstead in a functional component - here, in Modal.jsx?
我如何才能memo在功能组件中使用 - 在这里，在 Modal.jsx 中？
The related code:
相关代码：
Functional component Modal.jsx (I don't know how to check for props.show)
功能组件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;
The part of class component PizzaMaker jsx that renders 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>
);
回答by Olivier Boissé
Here is the documentation for React.memo
这是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
当函数返回时true，组件不会被重新渲染
回答by Charitha Goonewardena
Also you can use in export statement like:
您也可以在导出语句中使用，例如：
export default memo(Modal, (prevState, nextState) => prevState.show === nextState.show) ;
