React的React.FC與React.Component的用法

本篇內(nèi)容主要講解“React的React.FC與React.Component的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React的React.FC與React.Component的用法”吧!

目錄

• 一、React.FC<>
  

• 二、class xx extends React.Component
  

React 的組件可以定義為 函數(shù)（React.FC<>）或class（繼承 React.Component） 的形式。

一、React.FC<>

1.React.FC是函數(shù)式組件，是在TypeScript使用的一個泛型，F(xiàn)C就是FunctionComponent的縮寫，事實上React.FC可以寫成React.FunctionComponent：

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

2.React.FC 包含了 PropsWithChildren 的泛型，不用顯式的聲明 props.children 的類型。React.FC<> 對于返回類型是顯式的，而普通函數(shù)版本是隱式的（否則需要附加注釋）。

3.React.FC提供了類型檢查和自動完成的靜態(tài)屬性：displayName，propTypes和defaultProps（注意：defaultProps與React.FC結(jié)合使用會存在一些問題）。

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類型參數(shù)：

例子（這里使用阿里的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的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！