ReactとVue.js(3x)はレンダリングのタイミングや制御、状態の管理においていくつかの違いがあるなぁと思ったので以下の表で、ReactとVue.jsの主なレンダリングの違いについてまとめたいと思います。
| 機能 | Vue.js | React | 説明 |
|---|---|---|---|
| データ変更時の再レンダリング | ◯ | ◯ | データが変更されるとコンポーネントが再レンダリングされます。 |
| 親コンポーネントの再レンダリング影響 | △(props等の値が変わらない限り再レンダリングされない) | ◯(デフォルトで子コンポーネントも再レンダリングされるが、制御可能) | 親の再レンダリングが子コンポーネントに影響を与えるかどうか。 |
| 再レンダリング制御 | watch, key, v-if | React.memo, shouldComponentUpdate | 再レンダリングの条件を制御する方法。 |
| 派生状態 | computed | useMemo | 既存の状態から計算される新しい状態。 |
| 副作用管理 | watchEffect, watch | useEffect | 外部のシステムや非同期操作とのやり取りを管理する方法。 |
| レンダリングのタイミング | setup関数は一度だけ実行 | フックはコンポーネント関数内で再レンダリングのたびに実行 | レンダリングプロセス中の関数の実行タイミング。 |
Vue.jsとReactの間には、特にレンダリングのタイミングとステート管理の方法においていくつかの重要な違いがありました。
Vue.jsのComposition APIは、setup関数がコンポーネントの作成時に一度だけ実行されるのに対し、React Hooksはレンダリングプロセス中に複数回実行することが可能です。
また、Vue.js3xはrefおよびreactiveを、ReactはuseStateおよびuseEffectを提供して、それぞれが独自の方法でステート管理と副作用の制御を行います。
Vue.jsではコンポーネントの変更があっても監視対象の値が監視対象から外れてしまい再レンダリングが実行されない、ということがよくあります。
逆にReactは親コンポーネントとstateが更新された際に子コンポーネントも含めて、再レンダリングが実行されるため不要なレンダリングが実行されてしまうということが起きます。
Vue.jsとReactのレンダリングの違いを意識的にわかっていれば実装面でハマることも少なくなると思うのでしっかり認識していきたいなぁと思います。
関連記事
