javascript 如何防止我的功能组件使用 React 备忘录或 React 钩子重新渲染？

How can I prevent my functional component from re-rendering with React memo or React hooks?

提问by j.doe

When hiddenLogochanges value, the component is re-rendered. I want this component to neverre-render, even if its props change. With a class component I could do this by implementing sCU like so:

当hiddenLogo更改值时，组件会重新渲染。我希望这个组件永远不会重新渲染，即使它的道具发生了变化。使用类组件，我可以通过像这样实现 sCU 来做到这一点：

shouldComponentUpdate() {
  return false;
}

But is there a way to do with with React hooks/React memo?

但是有没有办法处理 React hooks/React memo？

Here's what my component looks like:

这是我的组件的样子：

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;

回答by Nicholas Tower

As G.aziz said, React.Memo functions similarly to pure component. However, you can also adjust its behavior by passing it a function which defines what counts as equal. Basically, this function is shouldComponentUpdate, except you return true if you want it to notrender.

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

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

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

回答by G.aziz

React.memois same thing as React.PureComponent

React.memo是一回事React.PureComponent

You can use it when you don't want to update a component that you think is static so, Same thing as PureCompoment.

当您不想更新您认为是静态的组件时，您可以使用它，与PureCompoment.

For class Components:

对于类组件：

class MyComponents extends React.PureCompoment {}

For function Components:

对于功能组件：

const Mycomponents = React.memo(props => {
  return <div> No updates on this component when rendering </div>;
});

So it's just creating a component with React.memo

所以它只是创建一个组件 React.memo

To verify that your component doesn't render you can just activate HightlightUpdatesin react extensionand check your components reactionon rendering

要验证您的组件没有呈现，您只需HightlightUpdates在反应中激活extension并检查您components reaction的 rendering

回答by Masih Jahangiri

We can use memofor prevent render in function components for optimization goal only. According React document:

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

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

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