web-dev-qa-db-fra.com

Comment puis-je empêcher mon composant fonctionnel de restituer avec React memo ou React hooks?)

Lorsque hiddenLogo change de valeur, le composant est restitué. Je veux que ce composant jamais soit rendu de nouveau, même si ses accessoires changent. Avec un composant de classe, je pourrais le faire en implémentant sCU comme ceci:

shouldComponentUpdate() {
  return false;
}

Mais existe-t-il un moyen de faire avec React hooks/React memo?

Voici à quoi ressemble mon composant:

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;
javascriptreactjsecmascript-6react-hooks
17
j.doe

Comme l'a dit G.aziz, React.Memo fonctionne de manière similaire au composant pur. Cependant, vous pouvez également ajuster son comportement en lui passant une fonction qui définit ce qui compte comme égal. Fondamentalement, cette fonction est shouldComponentUpdate, sauf que vous retournez true si vous le souhaitez not render.

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

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

React.memo est la même chose que React.PureComponent

Vous pouvez l'utiliser lorsque vous ne voulez pas mettre à jour un composant que vous pensez être statique donc, Même chose que PureCompoment.

Pour les composants de classe: 

class MyComponents extends React.PureCompoment {}

Pour les composants de fonction: 

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

Il s'agit donc simplement de créer un composant avec React.memo

Pour vérifier que votre composant ne s'affiche pas, vous pouvez simplement activer HightlightUpdates dans react extension et vérifier votre components reaction sur rendering

8
G.aziz

Nous pouvons utiliser mémo pour empêcher le rendu dans les composants de fonction à des fins d'optimisation uniquement. Selon React document:

Cette méthode n'existe que comme une optimisation des performances. Ne vous y fiez pas pour "empêcher" un rendu, car cela peut entraîner des bugs.

2
Masih Jahangiri