React-class component 和 function component 的区别

1、function component：

function aa(props) {
	return <h1>this is {props.name}</h1>
}

2、class component：

class bb extends React.Component {
	render() {
		const { name } = this.props;
		return  <h1>this is {name}</h1>
	}
}

function component 和 class component 的区别？

1. 语法不同
   functional component 语法更简单，只需要传入一个props参数，返回一个react片段。
   class component 要求先继承 React.Component，然后创建一个 render 方法，在 render 里面返回 react 片段。

2. state 状态
   function component 只是一个普通的函数，所以不可以使用 this.state , setState()。这也是它被叫做无状态组件的原因。
   所以如果一个组件需要用到状态的时候要用 class component。

3. lifecycle hooks 生命周期
   function component 不具有生命周期，因为所有的生命周期钩子函数均来自于 React.Component。
   所以当一个组件需要生命周期钩子的时候我们也需要 class component。

为什么要用 function component？
function component 和 class component 比起来缺少那么多功能为什么还要用function componet？

1. function component 更易于编写阅读和测试
2. 代码量更少，上手容易
3. 因为没有状态，可以更好的实现容器和表现的分离，可以只负责表现层的逻辑，不用考虑因为复杂的逻辑去改变状态从而带来的麻烦，有利于代码复用。
4. react团队提倡使用

为什么要用 class component？
虽然function component 有很多好处，但是有些时候class component 还是不可替代的。

1. 当需要实现一些容器组件的时候，需要改变内部状态来实现组件的改变的时候
2. 当需要用到生命周期钩子函数实现一些功能的时候
3. 当我们需要提升性能时，性能是一个很重要的问题，有些时候我们需要减少组件的渲染次数，我们就需要在组件内部用shouldComponentUpdate 方法来去判断，或者继承React.PureComponent 类（自动调用shouldComponentUpdate）来实现 state 和 props 的浅比较进行判断组件是否重新渲染。