React组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染 React 元素。创建组件的方式主要有两种：函数组件和类组件。
声明函数组件
普通函数组件
function myComponents(props) {
return <h1>Hello Word！</h1>;
}
ts中编写函数组件,要使用React中定义的FC类型。
const MyComponents: React.FC = ()=> {
return <h1>Hello Word！</h1>;
}
函数组件特点
- 函数组件中是没有this的，通过props传递过来的数据是不变的，同时也不没有生命周期钩子函数；
- 函数组件在Hook没出来之前是无状态的，在React16后增加了Hook来保存数据状态；
- 函数式组件性能消耗小，不需要创建实例，渲染的时候就执行一下，得到返回的 react 元素后就直接把中间量全部都销毁。
- 函数组件不支持ref.所以函数组件一般做成受控组件。
声明类组件
class MyComponents extends React.Component {
render() {
return <h1>Hello Word！</h1>;
}
}
类组件特点
- 要访问父组件传递过来的参数，可通过this.props的方式去访问；
- 类组件中有生命周期钩子函数，可以在特定的钩子函数中执行特殊操作；例如接口请求、事件监听和绑定定时器等通常放到componentDidMount()钩子函数中，此时组件已经挂载，DOM树也构建完毕。而移除事件监听和清除定时器要放到componentWillUnmount()钩子函数中，避免发生内存泄露。
- 在类组件中有state状态存储，当要改变变量值时通过setState()更改；
- 类组件的性能消耗比较大，需要创建类组件的实例，且不能销毁；
相同点
在 React 中，无论是函数组件还是类组件，最终呈现的效果都是一致的。
不同点
主要不同点如下：
- 类组件有生命周期，函数组件没有；
- 类组件依赖class创建，函数组件通过return返回创建；
- 类组件有状态存储，函数组件需要依赖Hook完成状态存储；
- 类组件中有this指向问题需要特别注意，函数组件则没有this；
- 类组件消耗大，需要创建实例，且不能销毁；函数组件消耗少，得到结果就销毁；
发展趋势
在React Hooks推出之前，函数组件是很弱的，React Hooks诞生后，函数组件有成为React 社区主推的趋势。类组件存在着this的模糊性，且this是可变的，是有可能出现bug的。而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织和复用，且能更好的适用于时间切片和并发模式。
总结
- 函数组件语法更短、更简单，这使得它更容易开发、理解和测试。
- 类组件大量使用 this 而让人感到困惑。使用功能组件可以很容易地避免这种缺点，保持代码整洁。
- 业务逻辑复杂，用类组件更易于我们维护，也相应降低了开发成本。
- 函数组件多用于简单功能模块封装，便于复用；
