React中有两种组件：函数组件（Functional Components) 和类组件（Class Components）。
来看一个函数组件的例子：
function Welcome = (props) => {
const sayHi = () => {
alert(Hi ${props.name});
}
return (
<div>
<h1>Hello, {props.name}</h1>
<button onClick ={sayHi}>Say Hi</button>
</div>
)
}
把上面的函数组件改写成类组件：
import React from 'react'
class Welcome extends React.Component {
constructor(props) {
super(props);
this.sayHi = this.sayHi.bind(this);
}
sayHi() {
alert(Hi ${this.props.name});
}
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<button onClick ={this.sayHi}>Say Hi</button>
</div>
)
}
}
两种实现的区别：
1、函数组件的代码量比类组件要少一些，所以函数组件比类组件更加简洁
2、最佳实践且更容易理解。函数组件看似只是一个返回值是DOM结构的函数，它其实是无状态组件（Stateless Components）的思想。函数组件中，无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件（Presentational Components），接收Props，渲染DOM，而不关注其他逻辑。
2、函数组件中没有this。而在类组件中，你依然要记得绑定this这个琐碎的事情。
3、性能。目前React会把函数组件在内部转换成类组件，所以使用函数组件和使用类组件在性能上并无大的差异。但是，React官方已承诺，未来将会优化函数组件的性能，因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验，所以有很大的性能提升空间。
所以，当我们动手写组件时，应该尽可能多地使用函数组件。
