当
hiddenLogo
更改值时,组件将重新渲染。我希望这个组件never重新渲染,即使它的 props 发生了变化。使用类组件,我可以通过像这样实现 sCU 来做到这一点:
shouldComponentUpdate() {
return false;
}
但是有没有办法使用 React hooks/React memo 呢?
这是我的组件的样子:
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;
正如 Aziz.G 所说,React.memo 的功能与纯组件类似。但是,您也可以通过向其传递一个定义相等的函数来调整其行为。基本上,这个函数是 shouldComponentUpdate,除非您希望它不渲染,则返回 true。
const areEqual = (prevProps, nextProps) => true;
const MyComponent = React.memo(props => {
return /*whatever jsx you like */
}, areEqual);
React.memo 与 React.PureComponent
相同当您不想更新您认为是静态的组件时,可以使用它,与
PureCompoment
相同。
对于组件类:
class MyComponents extends React.PureCompoment {}
对于功能组件:
const Mycomponents = React.memo(props => {
return <div> No updates on this component when rendering </div>;
});
所以它只是用
React.memo
创建一个组件
要验证您的组件没有渲染,您可以 在 React
中激活HightlightUpdates
并检查你的extension
components reaction
rendering
我们可以使用 memo 来防止函数组件中的渲染,仅用于优化目标。根据React文档:
该方法仅作为性能优化而存在。不要依赖它来“阻止”渲染,因为这可能会导致错误。
根据反应文档:- [https://reactjs.org/docs/react-api.html][1]
反应。备忘录是一个高阶组件。如果您的组件呈现 给定相同的 props 会得到相同的结果,您可以将其包装在对 React 的调用中。 在某些情况下,通过记住结果来提高性能。 这意味着 React 将跳过渲染组件,并重用 最后渲染的结果。
为了实际理解,我看到了这两个视频,如果您也想清楚概念,它们非常好,最好观看,这样可以节省您的时间。
免责声明:-这不是我的 YouTube 频道。