Как я могу предотвратить повторный рендеринг моего функционального компонента с помощью React memo или React hooks? - PullRequest
Новая
       16

Как я могу предотвратить повторный рендеринг моего функционального компонента с помощью React memo или React hooks?

0 голосов
/ 01 марта 2019

Когда hiddenLogo меняет значение, компонент перерисовывается.Я хочу, чтобы этот компонент никогда не рендерился, даже если его реквизиты меняются.С компонентом класса я мог бы сделать это, реализовав 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;

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Как сказал Г. Азиз, React.Memo функционирует аналогично чистому компоненту.Однако вы также можете настроить его поведение, передав ему функцию, которая определяет, что считается равным.По сути, эта функция - shouldComponentUpdate, за исключением того, что вы возвращаете true, если хотите, чтобы не отображало. 

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

const MyComponent = React.memo(props => {
  return /*whatever jsx you like */
}, areEqual);
0 голосов
/ 01 марта 2019

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 в реакции extension и проверить components reaction на rendering

...