浅谈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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Remix 后台桌面开发electron-remix-antd-admin
这篇文章主要为大家介绍了Remix 后台桌面开发electron-remix-antd-admin的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本篇文章主要介绍了React Native之TextInput组件解析示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
react中history(push,go,replace)切换路由方法的区别及说明
这篇文章主要介绍了react中history(push,go,replace)切换路由方法的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-10-10
详解关于react-redux中的connect用法介绍及原理解析
本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析，非常具有实用价值，需要的朋友可以参考下2017-09-09
react中使用Modal.confirm数据不更新的问题完美解决方案
这篇文章主要介绍了react中使用Modal.confirm数据不更新的问题解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了React ref的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了React Hook中useState更新延迟问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了react-native 实现渐变色背景过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
React报错之Parameter event implicitly has a
这篇文章主要为大家介绍了React报错之Parameter event implicitly has an any type，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论