React 函数组件

React类组件的缺点

初学react的时候基本用的类组件，随着经历的项目复杂性的升高，类组件带来的是大量重复的生命周期调用，业务逻辑抽离难度较大，可复用性的颗粒度比较大，类的继承实现占用内存空间较多，项目一旦变得庞大会影响浏览器渲染性能。

React函数组件

我们无法完全不使用类组件，但大部分与用户交互无关的页面，仅仅只是根据传入的props做纯展示的时候，我们可以使用函数组件来优化性能。

定义一个函数组件

import React from 'react';

const PureComponent = function(props){
	return <span>{props.title}</span>
}
class Home extends React.Component{
	render(){
		return <PureComponent title={"函数组件"}/>
	}
}

• 函数组件的函数名必须以大写字母开头
• 函数组件没有类组件对应的实例this，而是指向具体的调用者
• 函数组件没有state
• 函数组件只关心传入的props并对其渲染，不存在生命周期，节省了大量的空间分配和逻辑计算
• 函数组件可以直接以组件形式使用，也可以在逻辑中输入参数获得渲染的输出结果来动态的使用