Hook

• Hook是什么？是一个特殊的函数，可以在函数组件中让你“钩入”React的特性（如React state和生命周期等特性）。比如useState是允许你在React函数组件中添加state的Hook。
• 什么时候用Hook？如果在编写函数组件时意识到需要给它加一些state，以前的做法是必须转化为class，现在可以在现有的函数组件中使用Hook。

useState

• useState与class里面的this.state提供的功能完全相同，一般在函数退出后变量就会消失，而state中的变量会被React保留。
• useState里面唯一的参数就是初始state
  const [count , setCount] = useState(0)。可以用数字或字符串来对其进行赋值。如果我们想要在 state 中存储两个不同的变量，只需调用 useState() 两次即可。
• useState的返回值是当前state以及更新state的函数。与class中的this.state和this.setState类似。
• 读取state:在class中可能需要用this.state.count，而在函数中，可以直接使用count.

useEffect

• useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力（最常见的就是向服务器请求数据）。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
• useEffect可以通过返回一个函数来指定如何“清楚”副作用。

Hook的使用规则

• 只能在函数最外层调用Hook，不要在循环、条件判断或者子函数中调用；
• 只能在React的函数组件中调用Hook，不要在JS函数中调用。

自定义Hook

• 如果函数的名字是以use开头并调用其他Hook，我们就说这是一个自定义Hook。如表单处理、动画、订阅声明、计时器。

其他Hook

• useContext让你不用组件嵌套就能订阅React的Context。
• useReducer可以通过reducer来管理本地的复杂state。

为什么要用函数组件？React团队希望，组件不要变成复杂的容器，最好只是数据流的管道，开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。函数组件最好是纯函数，如果需要外部功能和副作用，就用钩子把外部代码钩进来。