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

Question

当hiddenLogo改变值时，组件被重新渲染。我希望这个组件 永远不会 重新渲染，即使它的道具改变了。使用 class 组件，我可以通过像这样实现 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

React.memo is same thing as React.PureComponent

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

对于 class 组件：

class MyComponents extends React.PureCompoment {}

对于函数组件：

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

所以它只是用 React.memo

创建一个组件

To verify that your component doesn't render you can just activate HightlightUpdates in react extension and check your components reaction on rendering

Answer 2

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

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

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

Answer 3

我们可以使用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.

Answer 4

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

React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

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

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

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

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

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

javascript

ecmascript-6

reactjs

react-hooks