淺談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提供了類型檢查和自動完成的靜態(tài)屬性：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{
{/** 觸發(fā)模態(tài)框**/}
<Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >樣例</Button>
{/** 模態(tài)框組件**/}
<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 {
{/** 觸發(fā)模態(tài)框**/}
<Button onClick={()=>this.handleModalVisible(true)} >樣例</Button>
{/** 模態(tài)框組件**/}
<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} />
}
ps：簡單來說，不知道用什么組件類型時，就用 React.FC。
到此這篇關于淺談React的React.FC與React.Component的使用的文章就介紹到這了,更多相關React的React.FC與React.Component內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了React.js入門學習第一篇，詳細解析React.js基礎知識，全方位的了解React.js，感興趣的小伙伴們可以參考一下2016-03-03
本文主要介紹了React中setState同步異步場景的使用，文中根據實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
閉包陷阱是一個常見的問題,尤其是在處理異步操作、事件處理器、或是定時器時,本文就來介紹一下React閉包陷阱產生和解決小結,具有一定的參考價值,感興趣的可以了解一下2025-04-04
Redux 是一個狀態(tài)管理庫,它可以幫助你管理應用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個應用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了如何在 React Native 中添加自定義字體,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了使用React和Ant Design庫構建的待辦任務列表應用,它包含了可編輯的表格,用戶可以添加、編輯和完成任務,以及保存任務列表數據到本地存儲,文中有相關的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了react實現記錄拖動排序的相關資料,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了React Native仿地址挑選器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10