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

Question

当

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;

Answer 1

正如 Aziz.G 所说，React.memo 的功能与纯组件类似。但是，您也可以通过向其传递一个定义相等的函数来调整其行为。基本上，这个函数是 shouldComponentUpdate，除非您希望它不渲染，则返回 true。

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

创建一个组件

要验证您的组件没有渲染，您可以 在 React

HightlightUpdates

中激活

extension

并检查你的

components reaction

rendering

Answer 3

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

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

Answer 4

根据反应文档：- [https://reactjs.org/docs/react-api.html][1]

反应。备忘录是一个高阶组件。如果您的组件呈现 给定相同的 props 会得到相同的结果，您可以将其包装在对 React 的调用中。 在某些情况下，通过记住结果来提高性能。 这意味着 React 将跳过渲染组件，并重用 最后渲染的结果。

为了实际理解，我看到了这两个视频，如果您也想清楚概念，它们非常好，最好观看，这样可以节省您的时间。

免责声明：-这不是我的 YouTube 频道。

• https://youtu.be/qySZIzZvZOY [useMemo 挂钩]
• https://youtu.be/7TaBhrnPH78 [基于类的组件]