<section><div><div><div><a><div><img></div><div>React</div></a><a><div><img></div><div>tech</div></a></div><div><div><h1>
<a aria-hidden="true"></a> はじめに</h1>
<p>これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。<br>
厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。<br>
そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。<br>
もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。</p>
<h1>
<a aria-hidden="true"></a> モチベーション</h1>
<p>僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。<br>
Vueをずっと書いてきたが本当はReactが好きで、ここ一年ほどReactをやらせてもらってる中でVueの用語との違いに戸惑ったので、そのあたりもしっかりまとめたい。<br>
特にuseEffectなどが出てくるとすごく難しいのでこれを機にしっかりと理解する。</p>
<h1>
<a aria-hidden="true"></a> 用語</h1>
<p>公式ドキュメントを見てびっくりしたが、「レンダリング」という言葉が使われていない。<br>
その代わり「レンダー」「マウント」「描画」という言葉が使われている。<br>
Reactの記事を見るとレンダリングという言葉がよく使われているがそれが何を示しているのか結構難しい。<br>
例えば、「render関数が実行されること」がレンダリングの意味としてそれっぽいが、関数コンポーネントの場合「レンダリング」は、stateの初期化など含めた「関数コンポーネントが実行されること」を示しているようなことが多い。（この後の文の追記にて説明しています。）<br>
よってここでは用語の意味をちゃんと定義したい。<br>
曖昧さを回避するため、レンダリングという言葉は避ける。<br>
また、<strong>ここで定義した言葉がこの記事内でこれらの意味以外で使われることはないことを約束する</strong>。<br>
おそらく公式ドキュメントで使われる意味とほぼ同じ意味で定義できたと思うので、例えば僕のようにVueから入った人には公式ドキュメントのお供にも役立つかも？？</p>
<h4>
<a aria-hidden="true"></a> マウント(Mount)</h4>
<p>これが描画と言われる（Vueだと描画とほとんど意味が変わらない）ことがあるが、Reactの用語で「マウント、更新、マウント解除」という言葉があるので描画とは違う意味の用語として扱う。<br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/</a><br>
意味はこのリンクのマウントのこと。つまり、一番最初にコンポーネントが初期化され、DOMが描画され、その後のフック（componentDidMount）が呼び出される一連の流れのこと。</p>
<h4>
<a aria-hidden="true"></a> 更新</h4>
<p>「マウント、更新、マウント解除」の更新。<br>
繰り返しになるが、<strong>この記事の中で更新と言ったらこの意味以外で使うことはない</strong>ので注意してほしい。<br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/</a><br>
意味はこのリンクの更新のこと。つまり、propsやstateが変更された時に、DOMが再描画され、その後のフック（componentDidUpdate）が呼び出される一連の流れのこと。</p>
<h4>
<a aria-hidden="true"></a> レンダー（render）、描画</h4>
<p>renderメソッドが呼ばれ、ブラウザにDOMが描画されること。<br>
関数コンポーネントでは、returnされたJSXがDOMとしてブラウザに描画されること===renderメソッドが呼ばれること。<br>
<strong>stateの初期化、再計算などは含まない。</strong></p>
<h1>
<a aria-hidden="true"></a> クラスコンポーネントのライフサイクル</h1>
<p>クラスだとライフサイクルがとてもよくわかりやすい。<br>
なぜならインスタンスの生き死にとデータがDOMへ反映されるタイミングがそのままライフサイクルと呼べるからである。<br>
つまりインスタンス、DOMの概念がわかっていればライフサイクルがわかる。</p>
<h2>
<a aria-hidden="true"></a> 順番</h2>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/</a><br>
これによると、ライフサイクルは三つの流れがある。<br>
それに沿って見ていこう。</p>
<h3>
<a aria-hidden="true"></a> マウント</h3>
<p>一番最初にコンポーネントが初期化され、DOMが描画され、その後のフック（componentDidMount）が呼び出される一連の流れのこと。</p>
<ol>
<li>
<p>constructor</p>
</li>
<li>
<p>render</p>
</li>
<li>
<p>componentDidMount</p>
</li>
</ol>
<h3>
<a aria-hidden="true"></a> 更新</h3>
<p>propsやstateが変更された時に、DOMが再描画され、その後のフック（componentDidUpdate）が呼び出される一連の流れのこと。</p>
<ol>
<li>
<p>render</p>
</li>
<li>
<p>componentDidUpdate</p>
</li>
</ol>
<h3>
<a aria-hidden="true"></a> アンマウント</h3>
<p>componentWillUnmountが呼ばれた後、マウントが解除（インスタンスが死に、DOMが画面から消える）されるまでの一連の流れのこと。</p>
<ol>
<li>componentWillUnmount</li>
</ol>
<h2>
<a aria-hidden="true"></a> 各ライフサイクルメソッドの説明</h2>
<ol>
<li>
<p>constructor<br>
クラスがインスタンス化される時に呼ばれる。<br>
初期化を行う。　<br>
この時点でブラウザにDOMは描画されない。</p>
</li>
<li>
<p>render<br>
ブラウザにDOMを表示する。<br>
もしくはDOMに描画済みのデータを更新する。</p>
</li>
<li>
<p>componentDidMount<br>
<strong>マウント時に</strong>、DOMが描画された後に実行される。<br>
APIリクエスト、描画されたDOMにアクセスする必要のある処理などをここに書く。<br>
<strong>更新時には実行されない</strong>。</p>
</li>
<li>
<p>componentDidUpdate<br>
state,propsが変化した<strong>更新時に</strong>、DOMが描画された後に実行される。<br>
しばしばcomponentDidMountと全く同じ処理が書かれる。<br>
<strong>マウント時には実行されない</strong>。</p>
</li>
<li>
<p>componentWillUnmount<br>
コンポーネントが破棄される前に呼ばれる。<br>
setIntervalなどの後片付けに使われる。</p>
</li>
</ol>
<h1>
<a aria-hidden="true"></a> 関数コンポーネントのライフサイクル</h1>
<p>ここからが本番。<br>
なんと公式ドキュメントには関数コンポーネントのライフサイクルフックについて、記述がない。<br>
というのもおそらくuseEffectという概念がかなり色々なタイミングで色々なことをするので難しいのではないだろうか。<br>
ここでは先ほどの<a>ReactLifeCycleMethodsDiagram</a>のマウント,更新、アンマウントに沿って可能な限り正確にライフサイクルを解き明かしていく。</p>
<h2>
<a aria-hidden="true"></a> 定義</h2>
<p>名前すらないので各場所に勝手に名前をつけていく。<br>
順番の説明にはこの名前を使う。<br>
もちろんこれらは僕が勝手に作った用語なので他で話しても通用しないので注意！</p>
<div><pre><code>function Example() {
  // 「initialize」

  useEffect(() => {
    // 「effect」

    return () => {
      // 「removeEffect」
    }
  });

  // 「render」
  return <></>;
}
</code></pre></div><h2>
<a aria-hidden="true"></a> 順番</h2>
<h3>
<a aria-hidden="true"></a> マウント</h3>
<ol>
<li>
<p>initialize</p>
</li>
<li>
<p>render</p>
</li>
<li>
<p>effect</p>
</li>
</ol>
<h3>
<a aria-hidden="true"></a> 更新</h3>
<ol>
<li>
<p>initialize</p>
</li>
<li>
<p>render</p>
</li>
<li>
<p>removeEffect</p>
</li>
<li>
<p>effect</p>
</li>
</ol>
<p>ここで驚いた人もいると思うが、なんとuseEffectのクリーンアップ関数はアンマウント時だけではなく、更新時のeffectが呼ばれる前にも呼ばれる。ただし、マウント時には呼ばれない。<br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://ja.reactjs.org/docs/hooks-effect.html#example-using-hooks-1</a></p>
<h3>
<a aria-hidden="true"></a> アンマウント</h3>
<ol>
<li>removeEffect</li>
</ol>
<h3>
<a aria-hidden="true"></a> 各ライフサイクルの説明</h3>
<p>ちなみに関数コンポーネントにそんなのものはないので、ライフサイクルメソッドとは呼ばない。</p>
<ol>
<li>
<p>initialize<br>
setStateやメソッドの定義、つまり初期化を行う。<br>
この時点でDOMは描画されていないと思いきや、更新時は描画されていることがある。<br>
が、それはすでにReactの手を離れた描画済みのものであり、ここでDOMを参照することはできない。（はず）<br>
副作用は必ずuseEffectを使う。</p>
</li>
<li>
<p>render<br>
ブラウザにDOMを表示する。<br>
もしくはDOMに描画済みのデータを更新する。</p>
</li>
<li>
<p>effect<br>
副作用を起こす。<br>
ただし、依存配列が指定されている場合はそれによって実行されるかされないかが変わる。<br>
componentDidMountとcomponentDidUpdateが一緒になった的な位置付けだが厳密には違う。</p>
</li>
<li>
<p>removeEffect<br>
副作用のクリーンアップがされる。<br>
ただし、依存配列が指定されている場合はそれによって実行されるかされないかが変わる。<br>
componentWillUnmount的な位置付けだが厳密には違う。</p>
</li>
</ol>
<h1>
<a aria-hidden="true"></a> 関数コンポーネントとクラスコンポーネントのライフサイクルの違い</h1>
<p>特徴的なのは、</p>
<ul>
<li>constructorはマウント時にしか呼ばれないが、initializeは更新時にも呼ばれる</li>
<li>componentWillUnmountはアンマウント時にしか呼ばれないが、removeEffectは更新時にeffectが実行されるならその前に呼ばれる</li>
</ul>
<blockquote>
<p>constructorはマウント時にしか呼ばれないが、initializeは更新時にも呼ばれる</p>
</blockquote>
<p>これが結構個人的によくわかっていなかった。<br>
例えば、stateやpropsが変わった場合にもinitializeされる。<br>
これちゃんと気をつけて置かないと、最近のライブラリのswrやreactQuery、カスタムフックの初期化がここで行われるのでそこで重い処理をしている、もしくは冪等でない処理が走る場合バグやパフォーマンス低下の原因になりそう。<br>
そのためにメモ化があるのか！と今思った。</p>
<h3>
<a aria-hidden="true"></a> 追記：クラスコンポーネントに対する関数コンポーネントの位置付け</h3>
<p>僕の知らない事実を教えてもらったので共有。<br>
なんと関数コンポーネントはクラスコンポーネントのrender関数そのものらしい。</p>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://www.robinwieruch.de/react-function-component/#:~:text=Note%3A If you are familiar,returns JSX in the end.&amp;text=}-,export default App%3B,function as Child Component now</a><br>
だからマウント、更新の度に関数コンポーネントに書かれた全てが実行されてしまうんだな。<br>
これが巷で関数が実行されることが「レンダリング」と呼ばれていることの理由だったわけだ！<br>
それを避けるためにはメモ化して関数の実行そのものを防ぐ必要がある。</p>
<h1>
<a aria-hidden="true"></a> メモ化</h1>
<p>先ほども書いたようにinitializeは更新時にも実行される。<br>
よってこのような形でuseCallbackやuseMemoを使っての最適化が必要となる。<br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://tyotto-good.com/blog/usecallback</a><br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://tyotto-good.com/blog/usememo</a><br>
本筋とは逸れるので、簡潔にまとまった素晴らしい記事を置いておく。</p>
<h1>
<a aria-hidden="true"></a> まとめ</h1>
<p>クラスコンポーネントのライフサイクルの概念を強引に関数コンポーネントに当てはめるというちょっと無理矢理な企画だったが、個人的にはすごく勉強になった。<br>
他の人にもそうであることを願っている。<br>
あと用語も結構気を遣って書いたので、これで他のReact記事もなんか良い感じに用語の統制が行われてくれると嬉しい。<br>
こうやってみるとやっぱりReactってすこし難しいなぁと思ってしまうが、これは多分Vueが簡単とかではなくて関数に状態を持たせるというパラダイムシフトがもたらしたちょっとした成長痛なのかなと思ったりする。<br>
事実、Vueのcomposition apiとかはパフォーマンスの面倒こそ見てくれるものの、リアクティブの面倒を見てくれなくなったり、なんかリアクティブな値に.valueでアクセスすることを強制したりとなかなかだ。<br>
とはいえ僕はReactが好きで、Vueも今のところ長くやっててキャリア的に有利があるのでやめるつもりもない。<br>
関係ないが関数と言えば最近はHaskellにハマっててヤバい関数型のコードを書いてニヤニヤしている。<br>
もっと理解して、美しく、機能的に書いていこう！</p>
</div></div><span></span><aside><div><a><img alt="よだか" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>よだか</a></div><div><p><span>フリーランスでwebエンジニアやらせてもらってます。
Laravel / TypeScript / Next.js / Vue / Go</span></p><div><span></span><a aria-label="@yodakaengineer" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@engineeryodaka" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="yodaka-star.com" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="リンク"><path fill="currentColor" d="M9.6,23.9c-3.6,0-6.5-3-6.5-6.6c0-1.7,0.7-3.4,1.9-4.6l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5l-2.3,2.3 c-1.7,1.7-1.7,4.4,0,6.1s4.4,1.7,6.1,0l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5L14.3,22C13,23.2,11.4,23.9,9.6,23.9z  M10.6,17.5c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6l-5.8,5.8 C11.2,17.4,10.9,17.5,10.6,17.5z M18.9,16.9c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.4-1.1,0-1.6l2.3-2.3c1.7-1.7,1.7-4.4,0-6.1 c-1.7-1.7-4.4-1.7-6.1,0L12,8.9c-0.5,0.4-1.2,0.4-1.6-0.1c-0.4-0.4-0.4-1,0-1.5L12.7,5c2.6-2.6,6.7-2.6,9.2,0s2.6,6.7,0,9.2 l-2.3,2.4C19.4,16.8,19.1,16.9,18.9,16.9z"></path></svg></a></div></div></div></aside><span></span><span></span></div></div><div><div></div></div></section>