快捷導(dǎo)航

淺談React的React.FC與React.Component的使用

更新時間：2021年09月03日 15:00:33 作者：小小的咸魚哈

本文主要介紹了React的React.FC與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。

到此這篇關(guān)于淺談React的React.FC與React.Component的使用的文章就介紹到這了,更多相關(guān)React的React.FC與React.Component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: