React - Hook
Introducing Hooks
Hook とは
Hook とは、React 16.8 でリリースされた、ステートやライフサイクルメソッドを持つコンポーネントをファンクションで作成するための仕組み。
また、React の state やライフサイクルメソッドにhook into
(接続する)ための関数のこと。
いままで(クラス)
class Example extends React.Component {
constructor(props) {
this.state = { count: 0 };
}
render() {
return (
<div>
<p>You clicked {count} times</p>
<button
onClick={() => this.setState((state) => ({ count: state.count + 1 }))}
>
Click me
</button>
</div>
);
}
}
これから(Hook)
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}