web-dev-qa-db-ja.com

ReactメモまたはReactフックを使用して、機能コンポーネントが再レンダリングされないようにするにはどうすればよいですか？

hiddenLogoが値を変更すると、コンポーネントが再レンダリングされます。小道具が変更されても、このコンポーネントにnever再レンダリングしてもらいたい。クラスコンポーネントを使用すると、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;
javascriptreactjsecmascript-6react-hooks
17
j.doe

G.azizが言ったように、React.Memoは純粋なコンポーネントと同様に機能します。ただし、等しいと見なされるものを定義する関数をそれに渡すことによって、その動作を調整することもできます。基本的に、この関数はshouldComponentUpdateですが、notでレンダリングしたい場合にtrueを返します。

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

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

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をactivate extensionでアクティブ化し、components reactionを確認してくださいrendering

8
G.aziz

memo を使用すると、最適化の目的でのみ関数コンポーネントのレンダリングを防止できます。 Reactドキュメント：

このメソッドは、パフォーマンスの最適化としてのみ存在します。これはバグの原因となる可能性があるため、レンダリングの「防止」に依存しないでください。

2
Masih Jahangiri