浅谈React的React.FC与React.Component的使用
React 的组件可以定义为 函数（React.FC<>）或class（继承 React.Component） 的形式。
一、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 Desgin Pro框架来演示）：
const SampleModel: React.FC<{}> = () =>{ //React.FC<>为typescript使用的泛型
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
return{
{/** 触发模态框**/}
<Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >样例</Button>
{/** 模态框组件**/}
<Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} />
}
二、class xx extends React.Component
如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（aka React.Component<PropType, StateType>），因此要为其提供（可选）prop和state类型参数：
例子（这里使用阿里的Ant Desgin Pro框架来演示）：：
class SampleModel extends React.Component {
state = {
createModalVisible:false,
};
handleModalVisible =(cVisible:boolean)=>{
this.setState({createModalVisible:cVisible});
};
return {
{/** 触发模态框**/}
<Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
{/** 模态框组件**/}
<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} />
}
ps：简单来说，不知道用什么组件类型时，就用 React.FC。
到此这篇关于浅谈React的React.FC与React.Component的使用的文章就介绍到这了,更多相关React的React.FC与React.Component内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了create-react-app修改为多页面支持的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家介绍了ReactJS中不同类型的状态详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
详解react-native WebView 返回处理(非回调方法可解决)
这篇文章主要介绍了详解react-native WebView 返回处理(非回调方法可解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
在React中,高阶组件是重用组件逻辑的一项高级技术。下面这篇文章主要给大家介绍了关于react高阶组件经典应用之权限控制的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
react-router包含三种类型的组件：路由组件、路由匹配组件 、导航组件，在你使用这些组件的时候，都必须先从react-router-dom引入，这篇文章主要介绍了react-router-dom简介,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了阿里低代码框架lowcode-engine设置默认容器详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了在React中强制重新渲染的4 种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要为大家介绍了React 之最小堆min heap图文详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Create react app修改webapck配置导入文件alias
这篇文章主要为大家介绍了Create react app修改webapck配置导入文件alias,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
最新评论