目錄

• 一、React.FC<>
  
• 二、class xx extends React.Component
  

React 的元件可以定義為 函式（React.FC<>）或class（繼承 React.http://www.cppcns.comComponent） 的形式。

一、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,hahttp://www.cppcns.comndleModalVisible] = 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({createModalVTgaBFfJrisible: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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！