javascript - 如何防止我的功能组件使用 React memo 或 React hooks 重新渲染？

Question

当 hiddenLogo 改变值时，组件被重新渲染。我希望这个组件永不重新渲染，即使它的 Prop 改变了。使用类组件，我可以像这样实现 sCU 来做到这一点:

shouldComponentUpdate() {
  return false;
}

但是有没有办法处理 React hooks/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，除非您希望它不呈现，否则返回 true。

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

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