Detaillierte Erläuterung der Methoden zur Speicheroptimierung von React-Komponenten

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Store zur Optimierung von React-Komponenten vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beim Schreiben von Komponenten mit React stoßen wir häufig auf Situationen, in denen zwei verschiedene Komponenten ihren Status teilen müssen und der übliche Ansatz darin besteht, den Status auf die übergeordnete Komponente zu übertragen. Dabei gibt es jedoch ein Problem: Obwohl dieser Status nur für zwei Komponenten erforderlich ist, werden die übergeordnete Komponente und alle darunter liegenden Unterkomponenten neu gerendert, da der Status gegenüber der übergeordneten Komponente erwähnt wird. Wenn Ihre übergeordnete Komponente relativ komplex ist und viele andere Unterkomponenten enthält, kann es zu Leistungsproblemen kommen.

Redux legt den Status im globalen Speicher ab, und dann abonnieren die Komponenten den Status, den sie benötigen. Wenn sich der Status ändert, werden nur die Komponenten neu gerendert, deren abonnierter Status sich ändert, wodurch die Nebenwirkungen vermieden werden den oben erwähnten verbesserten Status. Wenn wir jedoch eine React-Komponentenbibliothek schreiben, ist die Kombination aus Redux und React-Redux möglicherweise etwas zu schwer. So können wir selbst einen einfachen Store schreiben, um ein Abonnementmodell ähnlich wie Redux zu implementieren.

Beziehen Sie sich auf die Implementierung von Redux, um eine vereinfachte Version von createStore zu schreiben:

function createStore(initialState) {
 let state = initialState;
 const listeners = [];

 function setState(partial) {
  state = {
   ...state,
   ...partial,
  };
  for (let i = 0; i < listeners.length; i++) {
   listeners[i]();
  }
 }

 function getState() {
  return state;
 }

 function subscribe(listener) {
  listeners.push(listener);

  return function unsubscribe() {
   const index = listeners.indexOf(listener);
   listeners.splice(index, 1);
  };
 }

 return {
  setState,
  getState,
  subscribe,
 };
}

Unser createStore ist sehr einfach, mit nur 33 Zeilen inklusive Leerzeichen Es werden insgesamt 3 Methoden bereitgestellt. In Redux gibt es keinen Dispatch und keinen Reduzierer. Der Status wird direkt über die setState-Methode geändert. Nehmen wir es als Beispiel für einen Zähler.

class Counter extends React.Component {
 constructor(props) {
  super(props);

  // 初始化 store
  this.store = createStore({
   count: 0,
  });
 }

 render() {
  return (
   <p>
    <Buttons store={store} />
    <Result store={store} />
   </p>
  )
 }
}

class Buttons extends React.Component {
 handleClick = (step) => () => {
  const { store } = this.props;
  const { count } = store.getState();
  store.setState({ count: count + step });
 }

 render() {
  return (
   <p>
    <button onClick={this.handleClick(1)}>+</button>
    <button onClick={this.handleClick(1)}>-</button>
   </p>
  );
 }
}

class Result extends React.Component {
 constructor(props) {
  super(props);

  this.state = {
   count: props.store.getState().count,
  };
 }

 componentDidMount() {
  this.props.store.subscribe(() => {
   const { count } = this.props.store.getState();
   if (count !== this.state.count) {
    this.setState({ count });
   }
  });
 }

 render() {
  return (
   <p>{this.state.count}</p>
  );
 };
}

Im Buttons-Beispiel führt die Änderung des Status im Store über store.setState nicht dazu, dass der gesamte Counter neu gerendert wird, sondern weil das Ergebnis so ist hat die Store-Änderungen abonniert, sodass Sie bei einer Änderung der Anzahl ein erneutes Rendern durchführen können, indem Sie den Status in Ihrer eigenen Komponente ändern und so unnötiges Rendern geschickt vermeiden.

Obwohl der obige createStore nur ein paar Dutzend Zeilen Code hat, habe ich ihn dennoch in eine Bibliothek namens Mini-Store geschrieben und auf GitHub gestellt und einen Redux-ähnlichen Anbieter und eine Verbindungsmethode bereitgestellt Insgesamt sind es knapp über 100 Codezeilen. Wenn Sie auch eine React-Komponentenbibliothek schreiben und den Status einer komplexen Komponente verwalten müssen, können Sie diese Optimierungsmethode genauso gut ausprobieren.

Verwandte Empfehlungen:

So verwenden Sie die Props von übergeordneten Komponenten „außerhalb“ React-Komponenten

Der Lebenszyklus von React-Komponenten Was ist eine Funktion?

Ein Beispiel-Tutorial zur Kommunikation zwischen React-Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden zur Speicheroptimierung von React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!