Trace-warum Reagieren Komponente re-rendering

Wenn Sie wollen, eine kurze Schnipsel ohne externe Abhängigkeiten finde ich diese nützliche

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

Hier ist ein kleiner Haken ich verwenden, um trace-updates, um die Funktion der Komponenten

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;
  });
}

@jpdelatorre die Antwort ist groß, bei der Hervorhebung der Allgemeinen Gründe, warum ein Reagieren Komponente könnte erneut Rendern.

Ich wollte nur zu Tauchen ein wenig tiefer in eine Instanz: wenn Requisiten ändern. Fehlersuche, was dazu führt, dass ein Reagieren Komponente neu Rendern ist ein häufiges Problem, und in meiner Erfahrung oft aufspüren dieser Ausgabe geht es um die Requisiten verändern.

Reagieren Komponenten neu Rendern, wenn Sie erhalten neue Requisiten. Sie können erhalten neue Requisiten wie:

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

oder wenn MyComponent ist verbunden mit einer redux-Shop:

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

Jederzeit den Wert der prop1, prop2, prop3 oder prop4 änderungen MyComponent wird neu Rendern. Mit 4 props ist es nicht allzu schwer, die Spur, die Requisiten ändern, indem Sie ein console.log(this.props) an, dass Anfang des render block. Jedoch mit komplizierter, Komponenten und mehr und mehr Requisiten dieser Methode ist unhaltbar.

Hier ist ein nützlicher Ansatz (mit lodash für die Bequemlichkeit), um zu bestimmen, welche prop-änderungen verursachen eine Komponente neu Rendern:

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

Hinzufügen dieses snippet um die Komponente kann helfen, enthüllen die Täter verursacht fragwürdigen re-rendert, und viele Male diese können Aufschluss auf unnötige Daten geleitet, in Komponenten.

Den oben genannten Antworten sind sehr hilfreich, nur für den Fall, wenn jemand sucht für eine im folgenden finden Sie genauere Methode zum erkennen der Ursache von rerender dann fand ich diese Bibliothek redux-logger sehr hilfreich.

Was Sie tun können, ist fügen Sie die Bibliothek und aktivieren diff zwischen Staat(es gibt es in den docs) wie:

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

Hinzufügen und die middleware in der Filiale.

Dann legen Sie eine console.log() in der render-Funktion der Komponente, die Sie testen möchten.

Dann starten Sie Ihre app, und überprüfen Sie für console-logs.Überall dort, wo es nur melden, bevor es Ihnen zeigen, den Unterschied zwischen Staat (nextProps and this.props) und Sie können entscheiden, ob die render wirklich notwendig ist es

Wird es Analog zum obigen Bild zusammen mit den diff-Taste.