React的React.FC与React.Component

React的组件可定义为函数（React.FC<>）或class(继承React.Componnent)的形式
###React.FC<>
1.React.FC是函数式组件 是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写 事实上React.FC可以写成React.FunctionComponent

const App:React.FunctionComponent<{message:string}>=({message})=>(
	<div>{message}</div>
)

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

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

4. 我们使用React.FC来写React组件的时候 是不能用setState的 取而代之的是useState()、useEffect等Hook API

例子（这里使用阿里的Ant Design Pro框架来演示）：

const SampleModel: React.FC<{}> = ()=>{ //React.FC<> 为typeScript使用的泛型
   const  [createModalVisiable,handleModelVisiable] = useState<boolean>(false)
   return {
   		//触发模态框
   		<Button style={{fontSize:'25px'}} onClick={()=>handleModalVisiable(true)}>样例<Button/>
   		//模态块组件
   		<Model onCancel={()=>handleModelVisiible(false)} ModelVisiable={createVisiable}/>
   }
}

class xx extends React.Component

如需定义class组件 需继承React.Component。React.Component是类组件 在typescript中 React.Component是通用类型（aka React.Component<PropType,stateType>）,因此要為其提供（可选）prop和state类型参数：
例子（Ant Design Pro框架来演示）：

class SampleModel extends React.Component{
	state = {
	   createModelVisiable:false
}
    handleModelVisiable = （cVisiable:boolean）=>{
    this.setState({createModelVisiable:cVisiable})
}
return {
//触发模态框
<Button onClick={()=>this.handleModelVisiable（true）}>样例</Button>
//模态框组件
<Model onCancel={()=>handleVisiable(false)} ModelVisiable={this.state.createModelVisiable}/>
}
}