Analyse neuer Funktionen in React 16.3-js-Tutorial-php.cn

Analyse neuer Funktionen in React 16.3

小云云

Freigeben： 2018-02-09 15:36:45

Original

4307 Leute haben es durchsucht

Kontext-API ist immer verwirrend. Diese API ist offiziell, aber der Beamte möchte nicht, dass Entwickler diese API verwenden, und sagt, dass sich diese API in Zukunft ändern wird. Jetzt ist die Zeit für diese Veränderung. Die neue API wurde zusammengeführt. Und es sieht „benutzerfreundlicher“ aus. Insbesondere wenn Sie Redux oder Mobx verwenden müssen, können Sie die neue Kontext-API wählen, um eine einfachere Statusverwaltung zu erreichen.

Die neue API ist sehr einfach zu verwenden: React.createContext(), wodurch zwei Komponenten erstellt werden:

import {createContext} from 'react';

const ThemeContext = createContext({
  background: 'yellow',
  color: 'white'
});

Nach dem Login kopieren

Der Aufruf der createContext-Methode gibt zwei Objekte zurück, eines ist Provider, einer ist Consumer.

Das Provider ist eine besondere Komponente. Es kann verwendet werden, um Daten für Komponenten in einem Teilbaum bereitzustellen. Ein Beispiel:

class Application extends React.Component {
  render() {
    <ThemeContext.Provider value={{background: &#39;black&#39;, color: &#39;white&#39;}}>
      <Header />
      <Main />
      <Footer />
    </ThemeContext.Provider>
  }
}

Nach dem Login kopieren

Das obige Beispiel zeigt, wie der „Theme“-Kontext übergeben wird. Natürlich können diese Werte dynamisch sein (z. B. basierend auf this.state).

Der nächste Schritt ist die Verwendung von Consumer.

const Header = () => {
  <ThemeContext.Consumer>
    {(context) => {
      return (
        <p style={{background: context.background, color: context.color}}>
          Welcome!
        </p>
      );
    }}
  </ThemeContext.Consumer>
}

Nach dem Login kopieren

, wenn es beim Rendern von Consumer nicht in einem Provider verschachtelt ist. Dann wird der beim Aufruf der Methode createContext festgelegte Standardwert verwendet.

Hinweis:

Verbraucher muss Zugriff auf dieselbe Kontext-Komponente haben. Wenn Sie einen neuen Kontext erstellen und dieselben Eingabeparameter verwenden möchten, sind die Daten dieses neuen Kontexts nicht zugänglich. Daher kann Kontext als Komponente betrachtet werden. Er kann einmal erstellt und dann exportiert und importiert werden.
Diese neue Syntax verwendet die Funktion als untergeordneten Modus (manchmal auch Render-Prop-Modus genannt). Wenn Sie mit diesem Modell nicht sehr vertraut sind, empfehle ich Ihnen, diese Artikel zu lesen.
Die neue API erfordert nicht mehr die Deklaration von contextProps. Die von

Context übergebenen Daten sind dieselben wie das Context.Provider-Attribut der value-Komponente. Änderungen an Provider-Daten führen dazu, dass alle Verbraucher neu zeichnen.

Neue Lebenszyklusmethode

Siehe diesen RFC. Neue Lebenszyklusmethoden werden eingeführt und alte werden veraltet sein.

Diese Änderung dient in erster Linie der Durchsetzung von Best Practices. In diesem Artikel erfahren Sie, warum diese Lebenszyklusmethoden seltsam sein können. Diese besten Modi sind im asynchronen Zeichenmodus (Async-Modus) von React 16 sehr wichtig.

Veraltete Methoden:

componentWillMount--Verwenden Sie componentDidMount anstelle von
componentWillUpdate- -Verwenden Sie componentDidUpdate anstelle von
componentWillReceiveProps--Verwenden Sie eine neue Methode: static getDerivedStateFromProps stattdessen.

Aber das wird nicht sofort passieren, sie können React 16.4 verwenden. Es wird in React 17 vollständig entfernt. Wenn Sie StrictMode oder AsyncMode aktivieren, können Sie es auf diese Weise verwenden, erhalten jedoch eine Warnung:

UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

statisches getDerivedStateFromProps

WanncomponentWillReceiveProps wir brauchen eine andere Art zu aktualisieren Zustand entsprechend den Änderungen in den Requisiten. Die Community hat beschlossen, eine neue statische Methode einzuführen, um dieses Problem zu lösen.

Was ist eine statische Methode? Eine statische Methode ist eine Methode, die innerhalb der Klasse existiert, nicht innerhalb einer Instanz der Klasse. Statische Methoden können nicht auf this zugreifen und werden bei der Deklaration mit dem Schlüsselwort static versehen.

Aber hier kommt das Problem. Da diese Methode keine Möglichkeit hat, auf this zuzugreifen, wie ruft man this.setState auf? Die Antwort lautet: ruft nicht auf. Diese Methode gibt direkt die Statusdaten zurück, die aktualisiert werden müssen, oder gibt null zurück, wenn nichts zu aktualisieren ist.

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.currentRow === prevState.lastRow) {
    return null;
  }

  return {
    lastRow: nextProps.currentRow,
    isCrollingDown: nextProps.curentRow > prevState.lastRow
  }
}

Nach dem Login kopieren

Der Aufruf dieser Methode hat den gleichen Effekt wie der vorherige Aufruf von this.setState. Nur diese zurückgegebenen Werte werden geändert. Wenn sie null sind, wird der Status nicht geändert. Alle anderen Zustandswerte bleiben erhalten.

Wichtige Dinge

Sie müssen den Wert des Anfangszustands definieren. Ob in constructor oder einem Klassenattribut. Andernfalls wird eine Warnung gemeldet.

Diese Methode getDerivedStateFromProps() wird beim ersten Mounten und Neuzeichnen aufgerufen, Sie müssen also im Grunde nicht setState basierend auf den eingehenden Requisiten im Konstruktor vorgehen.

Wenn getDerivedStateFromProps definiert ist, dann ist componentWillReceiveProps definiert. Dann wird nur ersteres aufgerufen und Sie erhalten eine Warnung.

Im Allgemeinen verwenden Sie einen Rückruf, um sicherzustellen, dass bestimmter Code nicht aufgerufen wird, bis der Status aktualisiert wird. Dann verschieben Sie bitte alle diese Codes nach componentDidUpdate.

Wenn Sie das Schlüsselwort static nicht verwenden möchten, können Sie Folgendes tun:

ComponentName.getDerivedStateFromProps = (nextProps, prevState) => {
  // Your code here
}

Nach dem Login kopieren

Static Mode

严格模式是一个新的方式来确保你的代码是按照最佳实践开发的。它实际是一个在React.StrictMode下的组件。它可以用在你的组件树的任何一部分上。

import {StrictMode} from 'react'

class Application extends React.Component {
  render() {
    return (
      <StrictMode>
        <Context.Provider value={{background: &#39;black&#39;, color: &#39;white&#39;}}>
          <Header />
          <Main />
          <Footer />
        </Context.Provider>
      </StrictMode>
    );
  }
}

Nach dem Login kopieren

如果一个在StricMode子树里的组件使用了componentWillMount方法，那么你会看到一个报错消息。