React Hooksとは
React Hooksとは
React HooksはReact16.8バージョンから新しく追加された機能で,
関数形コンポーネントでstate管理とLife cycleを使えるようにしてくれます。
class形で複雑に書いてたものが以下のように読みやすくなります。
// class形
constructor(props) {
super(props) {
this.state = {
count:0
}
}
incrementCounter = () => {
this.setState({count: this.state.count + 1});
}
// 関数形
const [count, serCount] = useState(0);
const incrementCounter = () => {
serCount(count + 1)
}
Hookが生まれた理由
. class形のthisのせい(thisは更新が可能なので)
. class componentではstateロジックを再使用するのが難しい
. 可読性が悪い
. 低い性能
😈thisのせいの理由はここにあります。
import React, { Component } from "react";
import "./styles.css";
import FollowButton from "./FollowButton";
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedUser: ""
};
}
handleUserChange = (event) => {
this.setState({ selectedUser: event.target.value });
};
render() {
return (
<div className="App">
<select
onChange={this.handleUserChange}
value={this.state.selectedUser}
>
<option value="Kim">Kim</option>
<option value="Park">Park</option>
</select>
<FollowButton user={this.state.selectedUser} />
</div>
);
}
}
export default App;
import React from 'react';
export default class FollowButton extends React.Component {
handleClick = () => {
setTimeout(() => {
alert(`Followed ${this.props.user}.`);
}, 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
buttonをクリックしたとき3秒後にalertが出るようにしました。
buttonをクリックしたあとKimからParkに変えるとalertには最初クリックしたKimじゃなくParkに表示されます。
これがthisの問題点です。
Hook ルール
React Hooksにルールが何個かあります。これを守るとReat HookのuseState, useEffectが何回呼ばれても状態を正しく維持することができます。
1.
1. 最上位でのみhookを呼び出す必要があります。
if,forまたは入れ子関数(Nested Function)内部ではHookを呼ぶとダメです。
React hookは呼ばれた瞬間依存するため、if,forで実行するとスキップする可能性がありバグになります。
2. React関数内部だけHookを呼ぶことができます。
hookは一般できなjs関数では呼ばれないです。
関数形component、custom hookで呼ぶことができます。
よく使われている React Hook
🧙useState()
useStateはstateを管理してくれる
🧙useEffect()
useEffectはreact componentがレンダリングするとき特定作業(sied effect)を実行できるようにしてくれる
※sied effectとはcomponentがレンタリングされた後非同期で処理されなければならない部分
🧙useRef()
,useMemo()
, useCallback()
Discussion
私は一番最初勉強した時、
useRef
,useMemo
,useCallback
の部分はとくに難しいと感じました...!笑私も、、
useState
,useEffect
以外はあまり使わなくて、よく分かりませんㅠㅠㅠ次勉強します!!
わかったら私におしえてください...!♡
また記事も見れるの楽しみにしてます♡
ちゃんと勉強しなきゃ、、、!あいりさんも勉強して教えてください❤️🔥
감사합니다!!