作为一个用惯了Class、用惯了生命周期开发的前端老鸟，接触到React Hook的心情是这样的
真的有趣又神奇！
而且，它还很简单。有了它，我们可以省略很多的代码，简化很多的逻辑，给我的感觉，它就是一个带有状态和生命周期的加强版的公共方法。当然这是个人感觉，我们还需要知道官方给它的定义，即
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
一、组件类的缺陷
关于组件类的缺陷，官网已明确给出3个，即
- 组件之间复用状态逻辑很难
- 复杂组件变得难以理解
- 难以理解的class
当然，这样太抽象，我们看一个具体的例子，来直观地感受一下它的好。
如果我们需要写一个计数器的组件类，原先我们会这样写
import React from 'react'
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default Example
而现在我们只需要这样写
import React, { useState } from 'react';
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
哇哦，如此简单。这还只是一个极其简单的组件，如果是一个比较复杂的组件，可想而知，我们会精简多少代码，就好像一个负重前行的人，扔掉了一堆无用的东西，开始轻装简行，走得更快，更潇洒了。
so,这么好的东西，就让我们见识一下它的具体用法吧。
二、常用钩子
- useState()
- useEffect()
以上，是我们最常用的钩子，下面我们来一一介绍
三、 useState() 状态钩子
还是计数器的例子
import React, { useState } from 'react';
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
做了什么: 可以看到，useState为我们定义了一个叫做count的'state变量'。
参数： useState的唯一参数，就是初始state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。
返回值: 当前 state 以及更新 state 的函数。
如果，你想定义多个state，那就多次使用useState就可以了，就像这样
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
四、 useEffect() 副作用钩子
ok，现在我们可以使用state,然后，不可避免地，我们还需要做一些其他操作，比如更改dom,发送网络请求等，这样我们该如何做呢？
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
像这样，我们将dom操作放进useEffect钩子里，就可以了。我们仍然从三个方面来剖析一下
做了什么:通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。
为什么在组件内部调用 useEffect？:将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。
useEffect 会在每次渲染后都执行吗？: 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
ok,学习到这里，希望大家应该对React Hook有了初步的印象，你可以把他拆分成两部分 状态 + 副作用(代码逻辑) 去理解。
既然是初识，就求个简单明了。有机会再给大家带来Hook的更多玩法啦~~~
