web-dev-qa-db-fra.com

Comment React.useState déclenche-t-il un nouveau rendu?

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Dans l'exemple ci-dessus chaque fois que setCount(count + 1) est invoquée, un nouveau rendu se produit. Je suis curieux d'apprendre le flux.

J'ai essayé de regarder le code source. Je n'ai trouvé aucune référence de useState ou d'autres crochets à github.com/facebook/react .

J'ai installé react@next Via npm i react@next Et trouvé ce qui suit dans node_modules/react/cjs/react.development.js

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

En remontant pour dispatcher.useState(), je n'ai pu trouver que ce qui suit ...

function resolveDispatcher() {
  var dispatcher = ReactCurrentOwner.currentDispatcher;
  !(dispatcher !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component.') : void 0;
  return dispatcher;
}

var ReactCurrentOwner = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: null,
  currentDispatcher: null
};

Je me demande où puis-je trouver l'implémentation de dispatcher.useState() et apprendre comment elle déclenche un nouveau rendu lorsque setState setCount est invoqué.

Tout pointeur serait utile.

Merci!

javascriptreactjsreact-hooks
10
sarbbottam

J'ai publié ma compréhension sur Comment fonctionne React Hooks restitue un composant de fonction?

1
sarbbottam

setState est une méthode sur le Component/PureComponent class, donc il fera tout ce qui est implémenté dans la classe Component (y compris en appelant la méthode render).

setState décharge la mise à jour de l'état vers enqueueSetState donc le fait qu'il y soit lié n'est vraiment qu'une conséquence de l'utilisation des classes et de l'extension de Component. Une fois, vous réalisez que la mise à jour de l'état n'est pas réellement gérée par le composant lui-même et que le this est juste un moyen pratique d'accéder à la fonctionnalité de mise à jour de l'état, puis useState n'est pas explicitement lié à votre composant est beaucoup plus logique.

3
Sotiris Kiritsis

FunctionComponent est différent. Dans le passé, ils sont purs, simples. Mais maintenant, ils ont leur propre état. Il est facile d'oublier que react use createElement enveloppe tout le nœud JSX, comprend également FunctionComponent.

function FunctionComponent(){
  return <div>123</div>;
}
const a=<FunctionComponent/>
//after babel transform
function FunctionComponent() {
  return React.createElement("div", null, "123");
}

var a = React.createElement(FunctionComponent, null);

Le FunctionComponent a été transmis pour réagir. Lorsque setState est appelé, il est facile de restituer;

0
高学远