之前在论坛上看到过这样一段话，用来描述 react hooks 感觉还挺贴切。
代码语言：txt复制你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。
你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？
——拥有了Hooks，生命周期钩子函数可以先丢一边了。
你在还在为组件中的this指向而晕头转向吗？
——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。这两张React生命周期图，想必大部分初学React的小伙伴，都有见到过。大量的生命周期函数及作用，把我们搞的晕头转向，肯定有因为复杂的生命周期函数放弃React的伙伴。
但自从有了 React Hooks 新特性，用React开发项目是一件让人开心愉快的事。
说了半天，用无状态组件（Function）和状态组件（Class）怎么开发页面呢？
那我们一起写个简单的例子吧---"计数器"。
1、状态组件（Class）
代码语言：javascript复制import React from 'react';
import { Card, Button } from 'antd';
class Counter extends React.Component {
state = {
count: 0,
}
render() {
const { count } = this.state;
return (
<Card>
<p>您点击 {count} 次</p>
<Button onClick={() => this.setState({ count: count 1 })}>
Click me
</Button>
</Card>
);
}
}
export default Counter;2、无状态组件（Function）
代码语言：javascript复制import React, { useState } from 'react';
import { Card, Button } from 'antd';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<Card>
<p>您点击 {count} 次</p>
<Button onClick={() => setCount(count 1)}>
Click me
</Button>
</Card>
);
}
export default Counter;同样实现“计数器”，后者明显更简洁。如果涉及异步请求、状态共享等等，React Hooks 无疑是最好的选择。 Function 本应该是无状态组件的，但是由于引入了useState，这个函数有了自己的状态（count）,同时它也可以更新自己的状态（setState）,就是这个hook--useState让普通的函数变成了有状态的函数。
当然了，除了有useState,它还有其他hook，比如：useEffect、useCallback、useRef、useMemo等等， 后续我们也会形象化的讲到，快速掌握它们的用法及应用场景。
