Explication détaillée des méthodes d'optimisation du magasin des composants React

Cet article présente principalement la méthode d'utilisation du store pour optimiser les composants React. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Lors de l'écriture de composants à l'aide de React, nous rencontrons souvent des situations où deux composants différents doivent partager l'état, et l'approche habituelle consiste à promouvoir l'état auprès du composant parent. Mais il y a un problème avec cela, c'est-à-dire que même si seuls deux composants ont besoin de cet état, parce que l'état est mentionné au composant parent, lorsque l'état change, le composant parent et tous les sous-composants en dessous seront restitués. Si votre composant parent est relativement complexe et peut entraîner des problèmes de performances s'il contient de nombreux autres sous-composants.

Redux place l'état dans le magasin global, puis les composants s'abonnent à l'état dont ils ont besoin. Lorsque l'état change, seuls les composants dont l'état souscrit change seront restitués, évitant ainsi les effets secondaires de. le statut amélioré mentionné ci-dessus. Cependant, lorsque nous écrivons une bibliothèque de composants React, la combinaison de redux et de react-redux peut être un peu trop lourde. Nous pouvons donc écrire nous-mêmes une boutique simple pour implémenter un modèle d'abonnement similaire à Redux.

Référez-vous à l'implémentation de Redux pour écrire une version simplifiée de createStore :

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

Notre createStore est très simple, avec seulement 33 lignes dont le blanc Lignes. Un total de 3 méthodes sont exposées. Il n'y a pas de dispatch ni de réducteur dans Redux. L'état est modifié directement via la méthode setState. Utilisons-le comme exemple de compteur.

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

Dans l'exemple des boutons, la modification de l'état dans le magasin via store.setState n'entraînera pas le nouveau rendu de l'intégralité du compteur, mais parce que le résultat est les abonnés au magasin changent, donc lorsque le nombre change, vous pouvez effectuer un nouveau rendu en modifiant l'état dans votre propre composant, évitant ainsi intelligemment le rendu inutile.

Enfin, bien que le createStore ci-dessus ne contienne que quelques dizaines de lignes de code, je l'ai quand même écrit dans une bibliothèque appelée mini-store et je l'ai mis sur GitHub, et j'ai fourni un fournisseur et une méthode de connexion de type Redux, qui Cela représente un peu plus de 100 lignes de code. Si vous écrivez également une bibliothèque de composants React et devez gérer l'état d'un composant complexe, vous pouvez aussi bien essayer cette méthode d'optimisation.

Recommandations associées :

Comment utiliser les Props du composant parent "en dehors" du composant React

La vie cycle du composant React Qu'est-ce qu'une fonction

Un exemple de tutoriel sur la communication entre les composants React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!