Как триггеры React.useState повторно рендерится? - PullRequest
Новая
       6

Как триггеры React.useState повторно рендерится?

0 голосов
/ 27 октября 2018 
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>
  );
}

В приведенном выше примере, когда вызывается setCount(count + 1), происходит повторный рендеринг. Мне любопытно узнать поток.

Я пытался заглянуть в исходный код. Я не смог найти ссылку на useState или другие хуки на github.com / facebook / реаги .

Я установил react@next через npm i react@next и нашел следующее в node_modules/react/cjs/react.development.js

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

Возвращаясь к dispatcher.useState(), я смог найти только следующее ... 

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

Интересно, где найти реализацию dispatcher.useState() и узнать, как она запускает повторный рендеринг при вызове setState setCount.

Любой указатель будет полезен.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 05 июня 2019

FunctionComponent отличается. В прошлом они чисты, просты. Но теперь у них свое государство. Легко забыть, что в реакции на использование createElement используется весь узел JSX, в том числе 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);

FunctionComponent был передан для реакции. Когда вызывается setState, его легко перерисовать;

0 голосов
/ 04 августа 2019
0 голосов
/ 27 октября 2018

setState - это метод класса Component/PureComponent, поэтому он будет делать все, что реализовано в классе Component (включая вызов метода render).

setState выгружает обновление состояния до enqueueSetState, поэтому тот факт, что он связан с этим, на самом деле является лишь следствием использования классов и расширения с Component. Когда вы понимаете, что обновление состояния на самом деле не обрабатывается самим компонентом, а this - это просто удобный способ получить доступ к функциональности обновления состояния, тогда useState не будучи явно привязанным к вашему компоненту, приобретает гораздо больший смысл .

...