React.FC（函数式组件）与React.Component（类组件）使用和区别

React.FC(函数组件)

React.FC是函数式组件，是在TS使用的一个范型。FC是Function Component的缩写，React,FC可以写成React,FunctionComponent。

函数组件是一个纯函数，使用React.FC来写React组件的时候，不能用setState，取而代之的是useState(),useEffect等Hook API。函数式组件也称为无状态组件。

React.FC包含了PropsWithChildren的泛型，不用显式的声明props.children的类型。React.FC<>对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一切问题）

import React,{useState} from 'react';

interface IProps {test?:any}
const Index:React.FC<IProps> = (props) => {
	let [count,setCount] = useState(0);
	return(
		<div>
			<p>{count}</p>
            <button onClick={() => setCount(count + 1)}>Click</button>
		</div>
	)
}

React.Component(类组件)

React.Component为es6形式，取代了es5原生方式定义的组件React.createClass。

定义class组件。需要继承React.Component。React.Component是类组件，在ts中React.Component是通用类型（React.Component<PropType,StateType>），要为其提供（可选）props和state类型参数。

import React,{Component} from 'react';
interface Iprops{
	message1?:any
}
interface IState{
	message2?:any
}

class Index extends Component<IProps,IState>{
	//构造函数
	constructor(props:IProps,context:any){
		super(props,context);
		this.state={
			message2:123
		}
	}
	render(){
		return (
            <div>
                <div>{this.state.message2}</div>
                <div>{this.props.message1}</div>
            </div>
        );
	}
}

export default Index;

区别：

函数组件是一个纯函数，接收一个props对象返回一个react元素。而类组件需要去继承React.Component并且创建render函数返回react元素，这将会有更多的代码，虽然实现的效果相同。

类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。

函数组件不能访问this对象，无法访问生命周期的方法，没有状态state。

类组件有this，有生命周期，有state

无状态组件只能访问输入的props，同样的props会得到同样的渲染效果，不会有副作用。

函数组件的性能比类组件的性能要高。