コンポーネントとレンダー

Transcript

1. 関数内の コンポーネントとレンダー
2. 関数内の ・「コンポーネントとして呼び出す」 ・「関数として実行して要素を返す」
3. 1 2 3 4 5 6 7 InnerComponent (() { <InnerLog name="InnerComponent" />; }, [count]); innerRender (() { <InnerLog name="InnerRender" />; }, [count]); const return const return = => = => useCallback useCallback 1 2 3 4 5 6 7 8 9 10 11 12 13 ( < > < > { } <InnerComponent /> </ > < > { } { ()} </ > </ > ); return div section section section section div /* コンポーネントとして呼び出す */ /* 関数を実行して呼び出す */ innerRender 同じコンポーネント内
4. 1 2 3 4 5 6 7 InnerComponent (() { <InnerLog name="InnerComponent" />; }, [count]); innerRender (() { <InnerLog name="InnerRender" />; }, [count]); const return const return = => = => useCallback useCallback 1 2 3 4 5 6 7 8 9 10 11 12 13 ( < > < > { } <InnerComponent /> </ > < > { } { ()} </ > </ > ); return div section section section section div /* コンポーネントとして呼び出す */ /* 関数を実行して呼び出す */ innerRender 同じコンポーネント内 1 2 3 4 5 6 InnerLog (({ name } { name }) { (() { . ( ${name} ); }, []); < >{name}</ >; }); const return div div = : : string => => console memo useEffect log ` rendered`
5. 1 2 3 4 5 6 7 8 9 10 11 12 13 ( < > < > { } <InnerComponent /> </ > < > { } { ()} </ > </ > ); return div section section section section div /* コンポーネントとして呼び出す */ /* 関数を実行して呼び出す */ innerRender 状態を更新すると ・<InnerComponent /> は新しいコンポーネントとして解釈 →再レンダリングと再マウントを行う ・innerRender() は要素を返す関数として解釈 →返された要素の再評価は発生せずメモ化された結果を再利用 1 2 3 4 5 6 7 InnerComponent (() { <InnerLog name="InnerComponent" />; }, [count]); innerRender (() { <InnerLog name="InnerRender" />; }, [count]); const return const return = => = => useCallback useCallback
6. なぜ再レンダリングの挙動が異なるのか？
7. ・レンダリングごとに新しい関数として生成 ・Reactはこの変更を「異なるコンポーネント」と判断 ・古い関数は破棄（アンマウント） InnerComponent innerRender ・ただの関数 ・結果として返されるのはJSX要素 ・メモ化されていれば、再利用される
8. JSXでの評価の違い InnerComponent 1 <InnerComponent /> 1 React. (InnerComponent, ) createElement null
9. JSXでの評価の違い InnerComponent 1 <InnerComponent /> 1 React. (InnerComponent, ) createElement null innerRender 1 { ()} innerRender 1 React. (InnerLog, { name }) createElement : "InnerRender"