在react最新的一个大版本中，正式的给我们带来了hook：React v16.8: The One With Hooks就是让我们不再只能使用 class 来实现有状态的组件。
熟悉react的朋友应该都了解，当我们需要具有状态的组件，或者需要使用生命周期函数来完成一些操作的时候，就不可避免的需要这样：
class Component extend React.Component {
...
}
如果这个组件内部足够复杂那倒还行，但如果只是涉及简单的数据改变，而让我们每次实现它都需要实现一个class这也是一个让人很恼火的事情，同时也增加了我们日?？⒌拇肓?。但有了hook之后，我们就可以愉快的使用hook来实现由状态的函数组件了。
在hook里面主要有以下两个比较常用的API：
- useState
- useEffect
useState
useState所要解决的问题就是在函数中使用状态。比如我们需要实现一个可以加减的计数器：
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
};
在这里我们就是使用useState来在Counter函数内部创建状态，并管理状态。
useState 接受一个参数，也就是 state 的初始值，它的返回值是一个只有两个元素的数组，其中第一个元素是 state 的值，第二个元素是用于更新 state 的函数。上面那段代码就是使用了ES6中的解构赋值来把两个元素分别赋值给 count 和 setCount。当然，count和setCount 这两个名字并不是固定的，我们可以给这两个元素随意的设置名字。
useState在处理简单的数据流时相较之使用class要简明方便的多，下面是在结合antd的代码可以感受一下代码量上的差距：
class Modal extends React.Component {
state = { visible: false }
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>this is a modal</p>
</Modal>
</div>
);
}
}
这是antd所提供的一个关于model的组件，其内部就是通过维护visible的状态来控制这个model是否显示。我们可以看到，虽然只是简单的两种状态，但我们在创建visible这一state的同时，还需要使用三个函数去控制改变它。而当我们使用useState后就很简单了：
const Modal = () => {
const [visible , changeVisible] = useState(false)
return (
<div>
<Button type="primary" onClick={()=>changeVisible(true)}>open</Button>
<Modal
title="Basic Modal"
visible={visible}
onOk={()=>changeVisible(false)}
onCancel={()=>changeVisible(false)}
>
<p>this is a modal</p>
</Modal>
</div>
)
}
useEffect
上面提到，在需要使用状态和生命周期函数的时候我们需要使用class，上面的useState是为我们解决状态问题的，而这个userEffect则是为我们解决在函数组件中生命周期的问题的。
在 Counter 组件中，如果我们想要在用户点击“+”或者“-”按钮之后把计数值体现在网页标题上，这就是一个修改 DOM 的副作用操作，所以我们需要使用componentDidMount或者componentDidUpdate，因此我们得把 Counter 写成 class 组件，但在在使用useEffect后我们可以这么写：
import { useState, useEffect } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
useEffect(() => {
document.title = `Count: ${count}`
})
return (
<div>
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
)
}
在这里userEffect就接受一个函数作为参数，每次Counter组件发生渲染的时候，都会调用这个函数，也就做到了上面所说的那两个生命周期函数的作用。
但需要注意的是，如果我们只传入一个参数的话，useEffect会在每次渲染过后都调用这个函数，而在我们日?？⑹褂胏omponentDidMount的时候，往往可能只需要当mount后才调用，比如当我们需要在挂载组件后去请求某个数据，但当update的时候则不需要去请求它。在useEffect中同样也有方法可以实现这种操作，useEffect 其实还有第二个可选参数，只有当同一 useEffect 的两次调用的第二个参数不同时，第一个参数才会被调用，所以相实现上面这种功能，我们只需要这样写：
useEffect(() => {
console.log("在这里只有第一次mount的时候才会被执行")
}, [666]);
还有一点需要注意的是，所有的 Hooks API 都只能在函数类型组件中使用，而class 类型的组件是不能使用的。（不过也对hook本身诞生的目的就是为函数式组件服务的）
