当hiddenLogo改变值时,组件被重新呈现。我希望此组件 永远不会 重新渲染,即使其道具发生了变化。使用类组件,我可以通过实现sCU来做到这一点,如下所示:
hiddenLogo
shouldComponentUpdate() { return false; }
但是,有没有办法处理React挂钩/ React备忘录?
这是我的组件的外观:
import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import ConnectedSpringLogo from '../../containers/ConnectedSpringLogo'; import { Wrapper, InnerWrapper } from './styles'; import TitleBar from '../../components/TitleBar'; const propTypes = { showLogo: PropTypes.func.isRequired, hideLogo: PropTypes.func.isRequired, hiddenLogo: PropTypes.bool.isRequired }; const Splash = ({ showLogo, hideLogo, hiddenLogo }) => { useEffect(() => { if (hiddenLogo) { console.log('Logo has been hidden'); } else { showLogo(); setTimeout(() => { hideLogo(); }, 5000); } }, [hiddenLogo]); return ( <Wrapper> <TitleBar /> <InnerWrapper> <ConnectedSpringLogo size="100" /> </InnerWrapper> </Wrapper> ); }; Splash.propTypes = propTypes; export default Splash;
正如G.aziz所说,React.Memo的功能类似于纯组件。但是,您还可以通过向其传递一个定义为相等的函数来调整其行为。基本上,这个功能shouldComponentUpdate,如果你想让它,除非你还真 不 渲染。
const areEqual = (prevProps, nextProps) => true; const MyComponent = React.memo(props => { return /*whatever jsx you like */ }, areEqual);