本文主要记录一下学习hooks时候的一点心得.

什么是Hooks？

在我的理解中，Hooks可以让我们在函数组件中优雅的使用React的特性，比如生命周期函数以及state。它的存在让函数组件更加的强大。

常用Hooks

State Hooks

我们通过从React中导入 useState 来使用State Hooks，这使得我们在函数组件中可以使用本地state。示例如下。

import { useState } from 'react'

export default function Example() {

	const [count, setCount] = useState(10)

	return (
		<div>
			{count}
			<button onClick={() => setCount(count + 1)}>++</button>
		</div>
	)
}

useState作为一个方法接收一个参数initialState，initialState可以是一个有返回值的方法或者一个值。返回一个长度为2的数组，其中分别为state和setState。类型定义如下

type BasicStateAction<S> = (S => S) | S;
type Dispatch<A> = A => void;
type useState<S> = (initialState: (() => S) | S) => [S, Dispatch<BasicStateAction<S>>];