Reactに入門する | みんたく

最近少しづつReactに触る機会が増えてきたので、改めてReactについて学んだ内容をまとめます。

React
JSX
コンポーネント
React Hooks
state
ライフサイクル
- クリーンアップ

React

ReactはMeta(旧Facebook)が作成したライブラリで、UIを作るためのコンポーネントという概念が特徴的です。

Reactには様々な機能が備わっていますが、そのほとんどがUI部分の構築をサポートする機能であるため、フレームワークではなくライブラリに分類されます。

2013年にオープンソース化された後は、Metaを中心として各種開発コミュニティによって維持管理されています。

JSX

Reactでは、React要素を作成するためにReact APIのReact.createElementを利用していますが、JSXを使うとReact要素をより簡単に生成することができます。

JSXはJavaScriptの拡張言語で、JavaScriptとHTMLを掛け合わせて使えるようにしたものです。JSXは最終的にReact要素を生成します。

JSX→React.createElementの式に変換
React要素を生成

JSXは階層構造で、最上位コンポーネントは並列にできません。不要なdivタグを使いたくない場合などは、HTMLタグとして出力されないReact.Fragmentを使います。

<React.Fragment>

</React.Fragment>

//省略した場合

</>

コンポーネント

Reactのコンポーネントは、見た目と機能を持つUI部品のようなものです。

コンポーネントを使うことで、コードの再利用性が高まります。また、コンポーネントごとにファイルを分けることでコードの見通しがよくなり、コードの修正に対しても変更しやすくなります。

Reactで扱えるコンポーネントは、クラスコンポーネントと関数コンポーネントの2種類です。

クラスコンポーネント

クラスコンポーネントは、React.Componentを継承したクラスによって定義されます。stateやライフサイクルなどを最初から持っている点が特徴です。

import React from 'react';

class Button extends React.Component {

render() {

　 return (

　 <button>テストボタン</button>

　　　 ); 　

　　} 　

export default Button;

関数コンポーネント

2020年にバージョン16.7でReact Hooksが登場したことで、クラスコンポーネントと同様の機能を関数コンポーネントが使えるようになりました。クラスコンポーネントと異なり、記述量を少なく書くことができ、現在こちらが主流となっています。

function Button() {

return (

<button>テストボタン</button>

);

}

export default Button;

default export

推奨されるexport方法で、1ファイル1exportです。アロー関数と名前付き関数のdefault exportがあります。

// アロー関数のdefault export

const Button = (props) => {

return <button>テストボタン</button>

}

export default Button;

// 名前付き関数のdefault export

export default function Button = (props) => {

return <button>テストボタン</button>

}

名前付きexport

1ファイルから複数モジュールをexportしたいときは、Reactではエントリポイントでよく使います。

1 2	export {default as Button} from './Button' export {default as Link} from './Link'

基本的にReactのコンポーネントはdefault exportしており、Button.jsxだとしても中身のコンポーネントはdefault exportされているので、defaultという名前でexportされています。

読み込み時もdefaultという名前でインポートされ、エントリポイントは様々なdefault exportされたコンポーネントをひとまとめにしているため、同じdefaultだと被ってしまうので、asを使って別名をつける必要があります。

React Hooks

クラスコンポーネントでしか使えなかった、コンポーネント内で状態管理する「state」、コンポーネントの時間の流れに基づく「ライフサイクル」がReact Hooksを使うことで関数コンポーネントでも使えるようになりました。

つまり、React Hooksの登場によりクラスコンポーネントでしかできないことがなくなりました。

state

Reactのコンポーネントは、stateというアプリケーションの状態を表すためのデータを持っています。stateによって、コンポーネントをどのようにレンダリングするかを指定することが可能です。

コンポーネント内の要素をDOMで直接書き換えるのは仮想DOMの良さが失われ、パフォーマンスが落ちるため、stateを使って新しい値を使って再レンダリングさせる必要があるためです。

コンポーネントは、stateが変更された時とpropsが変更された時に再レンダリングされます。

useState関数を呼び出すと、各コンポーネントのstateを作ることが可能です。コンポーネントに格納されたstateをsetState関数で変更すると、コンポーネントを自動で更新することが可能です。

ライフサイクル

ライフサイクルとは、コンポーネントが生まれてから削除されるまでの時間の流れです。ライフサイクルメソッドを使うと、その時点に応じた処理を実行できます。

クラスコンポーネント時代ではcomponentDidMount()、componentDidUpdate()、componentWillUnmount()を使っていたが、Hooks時代ではuseEffectを使ってライフサイクルを表現しています。

3種類のライフサイクル

Mouting コンポーネントが生成される期間
Updating コンポーネントが変更される期間
Unmounting コンポーネントが削除される期間

useEffectではレンダリングによって引き起こされる処理をフックにして使います。useEffectに第二引数には配列を渡すことが可能で、配列に指定した値が変更された時に呼び出されます。

useEffect(() => {

console.log(‘test’)

}, [trigger])

クリーンアップ

クリーンアップとはイベントリスナの削除、タイマーのキャンセルなどのことです。クリーンアップ関数をreturnすると、2度目以降のレンダリング時に前回のuseEffectを消すことができます。

クリーンアップは、コンポーネントがUnmountされる時に実行されますが、次のrender前にも実行されます。