* 跳出class的组织方式，函数式组件更好复用
* 有了钩子，你可以在组件中按照代码块的相关性组织副作用，而不是基于生命周期方法强制进行切分，相关联的逻辑也不会被强行拆分开
* 不要在循环、条件、或者嵌套函数中调用hooks，并且最好在函数顶层使用。确保
* 不要在常规的函数中调用hooks，应该在react函数组件中调用
* 如果想要加条件，可以将if条件放到hook内部
### useState
```
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
return () => {
document.title = `default title`;
}
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
* 接受一个初始值，返回一个数组包含2个元素，一个是当前的状态，一个是设置状态的函数。初始值只有第一次有用
* hooks只能在函数最顶层使用，必须use开头，可声明多个
### useEffect
* 用来替代class用法中的声明周期，更好的组织和复用代码。React将运行useEffect的时机放到了浏览器绘制之后
* 第一次render完成后会调用一次，类似componentDidMount。并且每次render后都会再调用一次，类似componentDidUpdate
* 接受一个函数作为参数，调用完成之后会将其销毁（如果有销毁函数的话），每次调用内部都会新传递一个函数，包含了最新的状态值，避免存储了错误的状态
* 可以return一个函数出去，这个函数会在组件unmount的时候调用（如上），类似componentWillUnmount可以用于清除一些状态，每次render之后调用effect，然后执行完成之后调用return的销毁函数
* useEffect接受第二个参数，是一个数组的形式。它会去判断传进来的这个参数，之前的值和现在的值有没有什么变化，如果没有变化，将不会去重新应用和销毁。如果传递的数组有多个项目，当中只要有一个不同的，那么都会重新应用。（类似于componentDidUpdate的优化）
* 你也可以传递一个空数组，这样你的效果只会运行及清理一次
### useContext
### useReducer
### useCallback
```
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
```
只要有一个方式变化，都会调用回调
### useMemo
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
传递一个计算函数，和一个数组，当数组中的值发生变化时，会调用这个计算函数
### useRef
### 参考文档
https://zhuanlan.zhihu.com/p/50597236
