Reactの関数コンポーネントについて

概要

関数コンポーネント

Reactの関数コンポーネントとは、関数をコンポーネント化することである。
柔軟な描画処理を提供する。
React 16.8以降では、関数コンポーネントを使用することが一般的になり、多くの新しいプロジェクトでは関数コンポーネントが推奨されている。

以下にコード例を示す。

import React from 'react'; 
 
interface Props {
	message: string; 
} 
 
const MyFunctionalComponent: React.FC<Props> = (props) => { 
	return <div>{props.message}</div>; 
};
 
export default MyFunctionalComponent;

クラスコンポーネント

import React from 'react';
 
interface Props {
	message: string;
}
 
interface State {
	message: string;
}
 
class MyClassComponent extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);
		this.state = { message: "Hello, React!" };
	}
 
	render() {
		return <div>{this.state.message}</div>;
	}
}
 
export default MyClassComponent;
 

上記の例では、関数コンポーネントは関数として定義され、Props型が渡され、それを受け取ってレンダリングしている。
このクラスコンポーネントはクラスとして定義され、PropsとStateの型を指定し、コンストラクターとrenderメソッドを使用している。