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
どんなポインタでも役に立ちます。
ありがとう!