如何防止我的功能组件通过React备忘录或React钩子重新呈现？

Question

当hiddenLogo改变值时，组件被重新呈现。我希望此组件永远不会重新渲染，即使其道具发生了变化。使用类组件，我可以这样实现sCU：

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;

Answer 1

正如G.aziz所说，React.Memo的功能类似于纯组件。但是，您还可以通过向其传递一个定义为相等的函数来调整其行为。基本上，这个功能shouldComponentUpdate，如果你想让它，除非你还真不渲染。

const areEqual = (prevProps, nextProps) => true;

const MyComponent = React.memo(props => {
  return /*whatever jsx you like */
}, areEqual);

Answer 2

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

要验证您的组件没有渲染，您可以HightlightUpdates在react中激活extension并检查您components reaction的 rendering

Answer 3

我们可以使用memo来防止函数组件中的渲染仅用于优化目标。根据 React 文档：

此方法仅作为性能优化存在。不要依赖它来“阻止”渲染，因为这可能会导致错误。