# React-Hooks 设计动机初探
# 何谓类组件（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>
);
}
@前端进阶之旅: 代码已经复制到剪贴板
# 函数组件与类组件的对比：无关“优劣”，只谈“不同”
我们先基于上面的两个 Demo，从形态上对两种组件做区分。它们之间肉眼可见的区别就包括但不限于：
- 类组件需要继承
class，函数组件不需要； - 类组件可以访问生命周期方法，函数组件不能；
- 类组件中可以获取到实例化后的
this，并基于这个this做各种各样的事情，而函数组件不可以； - 类组件中可以定义并维护 state（状态），而函数组件不可以；
单就我们列出的这几点里面，频繁出现了“类组件可以 xxx，函数组件不可以 xxx”，这是否
