Verfolgen Sie, warum eine React-Komponente neu gerendert wird

Gibt es einen systematischen Ansatz zum Debuggen, was dazu führt, dass eine Komponente in React neu gerendert wird? Ich habe ein einfaches console.log () eingefügt, um zu sehen, wie oft es gerendert wird, aber ich habe Probleme herauszufinden, warum die Komponente in meinem Fall mehrmals, dh (viermal) gerendert wird. Gibt es ein Tool, das eine Zeitleiste und / oder das Rendern und die Reihenfolge aller Komponentenbäume anzeigt?

Wenn Sie ein kurzes Snippet ohne externe Abhängigkeiten möchten, finde ich dies nützlich

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
  if (this.state) {
    Object.entries(this.state).forEach(([key, val]) =>
      prevState[key] !== val && console.log(`State '${key}' changed`)
    );
  }
}

Hier ist ein kleiner Hook, mit dem ich Aktualisierungen von Funktionskomponenten nachverfolge

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Usage
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

In den folgenden Fällen wird eine React-Komponente erneut gerendert.

• Rendern der übergeordneten Komponente
• Aufruf this.setState()innerhalb der Komponente. Dadurch werden die folgenden Komponenten Lifecycle Methoden auslösen shouldComponentUpdate> componentWillUpdate> render>componentDidUpdate
• Änderungen an Komponenten props. Dies wird Trigger componentWillReceiveProps> shouldComponentUpdate> componentWillUpdate> render> componentDidUpdate( connectMethode der react-reduxTrigger dies , wenn es anwendbar Änderungen in dem Redux - Shop)
• Aufruf, this.forceUpdateder ähnlich ist wiethis.setState

Sie können das Rendern Ihrer Komponente minimieren, indem Sie eine Prüfung in Ihrer Komponente implementieren shouldComponentUpdateund diese zurückgeben, falsewenn dies nicht erforderlich ist.

Eine andere Möglichkeit ist die Verwendung von React.PureComponent oder zustandslosen Komponenten. Reine und zustandslose Komponenten werden nur dann neu gerendert, wenn Änderungen an den Requisiten vorgenommen wurden.

Die Antwort von @ jpdelatorre ist großartig, um allgemeine Gründe hervorzuheben, warum eine React-Komponente möglicherweise neu gerendert wird.

Ich wollte nur etwas tiefer in eine Instanz eintauchen: Wenn sich die Requisiten ändern . Die Fehlerbehebung, die dazu führt, dass eine React-Komponente erneut gerendert wird, ist ein häufiges Problem. Nach meiner Erfahrung müssen Sie häufig feststellen, welche Requisiten geändert werden, um dieses Problem aufzuspüren .

Reagieren Sie darauf, dass Komponenten neu gerendert werden, wenn sie neue Requisiten erhalten. Sie können neue Requisiten erhalten wie:

<MyComponent prop1={currentPosition} prop2={myVariable} />

oder wenn MyComponentmit einem Redux-Speicher verbunden ist:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

Immer wenn der Wert prop1, prop2, prop3, oder prop4Änderungen MyComponentwerden wieder machen. Mit 4 Requisiten ist es nicht allzu schwierig herauszufinden, welche Requisiten sich ändern, indem Sie console.log(this.props)an diesem Anfang des renderBlocks ein setzen. Bei immer komplizierteren Komponenten und immer mehr Requisiten ist diese Methode jedoch unhaltbar.

Hier ist ein nützlicher Ansatz ( zur Vereinfachung die Verwendung von lodash ), um zu bestimmen, welche Requisitenänderungen dazu führen, dass eine Komponente erneut gerendert wird:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

Das Hinzufügen dieses Snippets zu Ihrer Komponente kann dazu beitragen, den Schuldigen aufzudecken, der fragwürdige Wiederholungen verursacht, und dies hilft häufig dabei, unnötige Daten zu ermitteln, die in Komponenten geleitet werden.

Seltsamerweise hat niemand diese Antwort gegeben, aber ich finde sie sehr nützlich, zumal die Änderungen der Requisiten fast immer tief verschachtelt sind.

Haken Fanboys:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

"Old" -Schule-Fanboys:

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

PS Ich bevorzuge immer noch die Verwendung von HOC (Komponente höherer Ordnung), da Sie manchmal Ihre Requisiten oben zerstört haben und Jacobs Lösung nicht gut passt

Haftungsausschluss: Keine Zugehörigkeit zum Paketinhaber. Nur zehnmal herumzuklicken, um den Unterschied in tief verschachtelten Objekten zu erkennen, ist ein Problem.

Es gibt jetzt einen Haken dafür auf npm:

https://www.npmjs.com/package/use-trace-update

(Offenlegung, ich habe es veröffentlicht) Update: Entwickelt basierend auf Jacob Rask's Code

Bei Verwendung von Haken und Funktionskomponenten kann nicht nur der Propellerwechsel zu einem erneuten Rendern führen. Was ich zu verwenden begann, ist ein eher manuelles Protokoll. Ich habe mir sehr geholfen. Vielleicht finden Sie es auch nützlich.

Ich füge diesen Teil in die Datei der Komponente ein:

const keys = {};
const checkDep = (map, key, ref, extra) => {
  if (keys[key] === undefined) {
    keys[key] = {key: key};
    return;
  }
  const stored = map.current.get(keys[key]);

  if (stored === undefined) {
    map.current.set(keys[key], ref);
  } else if (ref !== stored) {
    console.log(
      'Ref ' + keys[key].key + ' changed',
      extra ?? '',
      JSON.stringify({stored}).substring(0, 45),
      JSON.stringify({now: ref}).substring(0, 45),
    );
    map.current.set(keys[key], ref);
  }
};

Zu Beginn der Methode behalte ich eine WeakMap-Referenz:

const refs = useRef(new WeakMap());

Dann schreibe ich nach jedem "verdächtigen" Anruf (Requisiten, Haken):

const example = useExampleHook();
checkDep(refs, 'example ', example);

Die obigen Antworten sind sehr hilfreich, nur für den Fall, dass jemand nach einer spezifischen Methode sucht, um die Ursache für das erneute Rendern zu erkennen, fand ich diesen Bibliotheksredux-Logger sehr hilfreich.

Was Sie tun können, ist die Bibliothek hinzuzufügen und die Unterscheidung zwischen den Status (sie befindet sich in den Dokumenten) wie folgt zu aktivieren:

const logger = createLogger({
    diff: true,
});

Und fügen Sie die Middleware im Laden hinzu.

Fügen Sie dann eine console.log()in die Renderfunktion der Komponente ein, die Sie testen möchten.

Dann können Sie Ihre App ausführen und nach Konsolenprotokollen suchen. Wo immer es ein Protokoll gibt, kurz bevor es Ihnen den Unterschied zwischen dem Status anzeigt (nextProps and this.props), können Sie entscheiden, ob dort wirklich Rendering benötigt wird

Es ähnelt dem obigen Bild zusammen mit der Diff-Taste.