2021/03/28

ReactのSPAを以前開発して寝かせておいた．その後再びReactを学習したところ，ReactHooksというものが推奨されていた．

そのため，今回ReactのクラスコンポーネントをHooksに変換するために備忘録を残す．少しづつ更新する．

（細かい用語は一般と違っている可能性がございます．他のページと併せてご覧ください．）

Reactのクラスコンポーネントは<Index />から<App />を呼び出し，<App />から様々なコンポーネントにpropsという形で変数をおろしていた．

その際に，下部クラスで必要なステートがあれば該当クラスで定義できるが，そのステートが上部クラスで必要になれば，リフトアップという形で，「下部クラスのステートを上部クラスでステートし，そのステートをpropsとして渡す」という形を取ることができる．

その時の私の感想は，「複数に積み重なったクラスの下部から最上部クラスにリフトアップしてpropsでおろしてくるのは面倒」である．

その時勉強した限りでは，Reduxが非常に便利．とあったが，難しくてよく理解できずに断念した．

そして，時間が経過してReactHooksを用いることにした．

Reactクラスコンポーネントに代わり，Reactの機能を用いることができる．

また，「Reactは後方互換性を維持する」とのことだったので，Reactクラスコンポーネントですでに開発が進んでいるアプリケーションについては無理してフックにする必要はないとのこと．

私は，クラスコンポーネントとして定義したクラスの内，下の方から順にフックに書き換えていくことにした．

クラスとして定義したコンポーネントは，フックでは関数として定義する．

また，constructor()もrender()も使わない．

class Hoge extends React.Component {
	constructor(props) {
		super(props);
		...
	}
	render() {
		return (
			<div>
				hoge
			</div>
		);
	}
}

function Hoge (props) {
	return (
		<div>
			hoge
		</div>
	);
}

クラスではthis.props.として使ったが，props.とする．

フックを用いることで，ローカルのステートは簡単に表現する事ができる．これは他のコンポーネントとは共有されず，自身の中でのみ用いることができる

constructor(props) {
	super(props);
	this.state = {
		name: 'myname',
		email: 'myemail'
	};
}

this.setState({name: 'newname'}); // 複雑！

const [name, setName] = useState('myname');
const [email, setEmail] = useState('myemail');

setName('newname'); // 単純になったね！