快捷導(dǎo)航

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

更新時(shí)間：2021年09月03日 15:00:33 作者：小小的咸魚(yú)哈

本文主要介紹了React的React.FC與React.Component的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、React.FC<>

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

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

2.React.FC 包含了 PropsWithChildren 的泛型，不用顯式的聲明 props.children 的類(lèi)型。React.FC<> 對(duì)于返回類(lèi)型是顯式的，而普通函數(shù)版本是隱式的（否則需要附加注釋?zhuān)?/p>

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

4.我們使用React.FC來(lái)寫(xiě) React 組件的時(shí)候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

例子（這里使用阿里的Ant Desgin Pro框架來(lái)演示）：

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是類(lèi)組件，在TypeScript中，React.Component是通用類(lèi)型（aka React.Component<PropType, StateType>），因此要為其提供（可選）prop和state類(lèi)型參數(shù)：

例子（這里使用阿里的Ant Desgin Pro框架來(lái)演示）：：

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：簡(jiǎn)單來(lái)說(shuō)，不知道用什么組件類(lèi)型時(shí)，就用 React.FC。

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

您可能感興趣的文章: