# 一、组件类的缺点
React的核心是组件。v16.8版本之前，组件的标准写法是类（class）。下面是一个简单的组件类
import React, { Component } from "react";
export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}
render() {
const { buttonText } = this.state;
return <button onClick={this.handleClick}>{buttonText}</button>;
}
}
@前端进阶之旅: 代码已经复制到剪贴板
这个组件类仅仅是一个按钮，但可以看到，它的代码已经很"重"了。真实的 React App 由多个类按照层级，一层层构成，复杂度成倍增长。再加入 Redux，就变得更复杂
# 二、Hook 的含义
React Hooks的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React Hooks就是那些钩子。- 你需要什么功能，就使用什么钩子。
React默认提供了一些常用钩子，你也可以封装自己的钩子。 - 所有的钩子都是为函数引入外部功能，所以
React约定，钩子一律使用use前缀命名，便于识别。你要使用xxx功能，钩子就命名为usexxx
React 默认提供的四个最常用的钩子
useState()useContext()useReducer()useEffect()
# 三、useState()：状态钩子
useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。
用户点击按钮，会导致按钮的文字改变，文字取决于用户是否点击，这就是状态。使用useState()重写如下
import React, { useState } from "react";
export default function Button() {
const [buttonText, setButtonText] = useState("Click me, please");
function handleClick() {
return setButtonText("Thanks, been clicked!");
}
