useStateの動作を考慮する

4762 ワード
React テキストリンク
△この文章は個人の記録を残すためです.
抽象的に実施されるユーザ状態の例は、反応素子の状態を理解するのに役立つ
実際の反応器のユーザ状態から見ると,内部はResolveDispatcher,ReactCurrentDispatcherに依存し,さらに複雑である.
const useState = (() => {
    let _state;

    return (initialState) => {
        if (_state === undefined) _state = initialState;

        const setState = (nextState) => {
            _state = nextState;
 
            // ~ 리액트 리렌더링 트리거
          	// (updateState, updateReducer, basicStateReducer...)
        }

        return [_state, setState];
    }
})();

const MyComponent = () => {
    const [state, setState] = useState(0);    
    setState(100);

    if (state === 100) console.log(state);
    return;
}

MyComponent();    // 컴포넌트 마운트
MyComponent();    // 컴포넌트 리렌더링 -> 100

  • モジュールを使用して、(useState)インスタント実行関数の領域変数stateを自由に変数化

  • 構成部品をマウントするときにusStateを呼び出し、構成部品ステータスを追加および初期化します(現在のstateはundefinedに初期化されているため、初期値として渡される0はstateに割り当てられます).

  • 新しい状態値(100)をパラメータとして渡すことでsetStateを呼び出す

  • 自由変数stateの値は新しい状態値(100)に更新されたが、現在の構成部品の状態値は以前の状態値(0)を指している(構成部品のstateはcontとして宣言された変数にすぎない).

  • レンダー構成部品ツリー(例:構成部品関数の再呼び出しに簡略化)

  • 更新されたフリー変数stateをusStateの戻り値として受信

  • 再レンダリングされた構成部品のステータス値が100に指定されているため、コンソールは出力します.
    • Perlデバッガは、あなたのスーパーパワーでありえます
    404エラーページを作成する方法