## State Hook
~~~
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量和一个让你更新它的函数 默认是0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
~~~
**`useState`需要哪些参数？** `useState()`方法里面唯一的参数就是初始 state。
**`useState`方法的返回值是什么？** 返回值为：当前 state 以及更新 state 的函数。这就是我们写`const [count, setCount] = useState()`的原因。
### 读取 State
Hook 里 直接使用 变量名 count 就可以获取 state的值(class 中需要使用 this.state.count)
~~~
<p>You clicked {count} times</p>
~~~
### 更新 State
Hook 里，直接调用`setCount` 赋值 (class 里 `this.setState()`来更新`count`值)
~~~
<button onClick={() => setCount(count + 1)}> Click me
</button>
~~~
## Effect Hook
在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。
`useEffect`就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`具有相同的用途，只不过被合并成了一个 API。
~~~
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// useEffect 相当于 componentDidMount 和 componentDidUpdate:
// 组件加载以后执行
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
// 这个是空数组, 只会在组件加载进入 DOM 后执行一次
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
}, []);
// 这个在每次count 变量改变都会触发, 相当于vue 里的 watch 了 count变量
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
~~~
当你调用`useEffect`时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state。默认情况下，React 会在每次渲染后调用副作用函数 ——**包括**第一次渲染的时候。
跟`useState`一样，你可以在组件中多次使用`useEffect`
### 返回值
**effect可以返回一个函数** 这是 effect 可选的清除机制, 每个 effect 都可以返回一个清除函数。React 会在**组件卸载**的时候执行清除操作。这就是为什么 React*会*在执行当前 effect 之前对上一个 effect 进行清除。
## useMemo
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
接收俩个参数, 第一个参数是一个函数, 返回值用于产生保存值, 第二个是一个数组, 是 依赖项, 类似 useEffect 第二个参数
返回一个[memoized](https://en.wikipedia.org/wiki/Memoization)值。
把“创建”函数和依赖项数组作为参数传入`useMemo`，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
记住，传入`useMemo`的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，**诸如副作用这类的操作属于`useEffect`的适用范畴，而不是`useMemo`。**
如果没有提供依赖项数组，`useMemo`在每次渲染时都会计算新的值。
**你可以把`useMemo`作为性能优化的手段，但不要把它当成语义上的保证。**将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。
[官方hook api](https://zh-hans.reactjs.org/docs/hooks-reference.html)
