40 
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)に再レンダリングが発生します。流れを知りたいです。

ソースコードを調べてみました。github.com/facebook/reactuseStateで、または他のフックの参照が見つかりませんでした。

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

どんなポインタでも役に立ちます。

ありがとう！

4

4 に答える 4

4

setStateクラスのメソッドであるため、Component/PureComponentクラスに実装されていることは何でも実行しますComponent(メソッドの呼び出しを含むrender)。

setState状態の更新を にオフロードするenqueueSetStateため、これにバインドされているという事実は、実際にはクラスを使用してから拡張した結果にすぎませんComponent。状態の更新が実際にはコンポーネント自体によって処理されているわけではなくthis、状態の更新機能にアクセスするための便利な方法にすぎuseStateないことに気付いたら、コンポーネントに明示的にバインドされていない方がはるかに理にかなっています。

于 2018-10-27T17:41:41.487 に答える