在了解React Hooks之前，我们先沿着“why-what-how”的思路来进行梳理。
why we need hooks?
React 一直到16.8的版本以来才真正被推而广之，它是 React 团队在真刀真枪的 React 组件开发实践中，逐渐认知到的一个改进点，这背后其实涉及对类组件和函数组件两种组件形式的思考和侧重。因此，你首先得知道，什么是类组件、什么是函数组件，并完成对这两种组件形式的辨析
什么是类组件（Class Component）
所谓类组件，就是基于 ES6 Class 这种写法，通过继承 React.Component 得来的 React 组件。以下是一个典型的类组件：
class DemoClass extends React.Component {
// 初始化类组件的 state
state = {
text: ""
};
// 编写生命周期方法 didMount
componentDidMount() {
// 省略业务逻辑
}
// 编写自定义的实例方法
changeText = (newText) => {
// 更新 state
this.setState({
text: newText
});
};
// 编写生命周期方法 render
render() {
return (
<div className="demoClass">
<p>{this.state.text}</p>
<button onClick={this.changeText}>点我修改</button>
</div>
);
}
}
什么是函数组件/无状态组件（Function Component/Stateless Component） 以函数的形态存在的 React 组件。早期并没有 React-Hooks 的加持，函数组件内部无法定义和维护 state，因此它还有一个别名叫“无状态组件”。以下是一个典型的函数组件：
function DemoFunction(props) {
const { text } = props
return (
<div className="demoFunction">
<p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
</div>
);
}
两者对比：
1.类组件需要继承 class，函数组件不需要；
2.类组件可以访问生命周期方法，函数组件不能；
3.类组件中可以获取到实例化后的 this，并基于这个 this 做各种各样的事情，而函数组件不可以；
4.类组件中可以定义并维护 state（状态），而函数组件不可以；
当然，以上两者对比仅仅表现两者差异，并不代表两者的优劣性。
重新理解类组件：包裹在面向对象思想下的“重装战舰”
深入理解函数组件：呼应 React 设计思想的“轻巧快艇”
上面是比较直观的看到：类组件和函数组件的差异，但是还有一个很重要的差异点：
函数组件会捕获 render 内部的状态，这是两类组件最大的不同。
React 作者Dan有一篇文章，讲解了函数式组件会捕获 render 内部的状态的具体含义和场景：how-are-function-components-different-from-classes
Hooks 的本质：一套能够使函数组件更强大、更灵活的“钩子”
React-Hooks 的出现，就是为了帮助函数组件补齐生命周期、state等缺失的能力。
