Heim >Web-Frontend >js-Tutorial >Analyse neuer Funktionen in React 16.3
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' });
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: 'black', color: 'white'}}> <Header /> <Main /> <Footer /> </ThemeContext.Provider> } }
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> }
, 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.
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
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 } }
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.
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 }
严格模式是一个新的方式来确保你的代码是按照最佳实践开发的。它实际是一个在React.StrictMode
下的组件。它可以用在你的组件树的任何一部分上。
import {StrictMode} from 'react' class Application extends React.Component { render() { return ( <StrictMode> <Context.Provider value={{background: 'black', color: 'white'}}> <Header /> <Main /> <Footer /> </Context.Provider> </StrictMode> ); } }
如果一个在StricMode
子树里的组件使用了componentWillMount
方法,那么你会看到一个报错消息。
异步模式在React.unsafe_AsyncMode
下。使用AsncMode
也会打开StrictMode
模式下的警告。
相关推荐:
Das obige ist der detaillierte Inhalt vonAnalyse neuer Funktionen in React 16.3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!