🙌

React useReducerの内部実装を読んでみました

2022/11/07に公開

JavaScript

React

fibernode

tech

サンプルコード

import { useReducer } from 'react';

const reducer = (state, action) => {
    switch (action.type) {
        case 'plus':
            return {...state, count: state.count + action.value}
        default:
            return state
    }
}

const App = () => {
    const [data, setData] = useReducer(reducer, {
        count: 1
    })

    const handleClick = () => {
        setData({type:"plus", value: 1})
    }

   return (
       <div className='container'>
        <button onClick={handleClick}>click</button>
        <p>count:{data.count}</p>
       </div>
   );
};
export default App

メインステップ

マウント段階

App 関数Componentを実行します
App 関数Componentを実行時にuseReducerを実行します
App 関数ComponentとのFiberNodeのhookを生成します

dispatch functionを生成します

最初stateとdispatch関数を返します

クリック後の挙動

dispatch関数を読んでApp 関数ComponentのFiberNodeのhookにactionを含めたupdateオブジェクトを入れます

再レンダリングを走ります

再レンダリングの挙動

App 関数Componentを実行します
App 関数Componentを実行時にuseReducerを実行します
App 関数コンポねーとのFiberNodeのhookを新しく生成します
reducer関数を実行して、最新のstateオブジェクトを生成します

新しく生成したhookオブジェクトのプロパティを更新します

新しいstateオブジェクトとdispatch関数を返します

useStateとの違い

useStateとの一番大きなちがいはreducerを自分でカスタマイズできることでうｓ

useStateはこのreducerを使っていることです

useReducerは自分で定義できます、サンプルコードでのreducerはいかです

const reducer = (state, action) => {
    switch (action.type) {
        case 'plus':
            return {...state, count: state.count + action.value}
        default:
            return state
    }
}

説明動画

mount stage

update stage

サンプルコード

メインステップ

マウント段階

クリック後の挙動

再レンダリングの挙動

useStateとの違い

説明動画

Discussion