[[419758]]

組件允許你將 UI 拆分為獨立可復用的代碼片段，并對每個片段進行獨立構思。從概念上類似于 JavaScript 函數。

它接受任意的入參(即 “props”)，并返回用于描述頁面展示內容的 React 元素。分為函數組件與 class 類組件。

學習組件之前，可以先安裝一個 VS Code 插件，直接搜索 react , 選擇下載量最高的就行了。

函數組件與類組件

顧名思義，函數組件就是使用函數創建的組件，類組件就是使用類創建組件，安裝好插件之后，可以直接使用簡寫補全功能創建對應插件。

注意，首字母要大寫。

函數組件的創建

編輯器快捷方式：rfce

import React from'react' 
 
functionComponentFun() { 
  return ( 
    <div> 
      <h2>單文件函數組件</h2> 
    </div> 
  ) 
} 
 
exportdefault ComponentFun 

聲明函數，并在函數中返回 JSX ，最后導出函數。

類組件的創建

編輯器快捷方式：rce

import React, { Component } from'react' 
 
exportclass ComponentClass extends Component { 
  render() { 
    return ( 
      <div> 
        <h2>單文件類組件</h2> 
      </div> 
    ) 
  } 
} 
 
exportdefault ComponentClass 

類組件需要繼承 Component，因此需要進行導入。如果不導入，則需要繼承React.Component。

同時，類中需要調用 render() 渲染函數，在渲染函數中，return 返回對應的 JSX。

組件的引入與使用

組件的使用也很簡單，按模塊化語法引入之后，直接當作標簽在 JSX 中使用。

import React from'react' 
// 引入單文件組件 
import ComponentClass from'./ComponentClass' 
import ComponentFun from'./ComponentFun' 
 
 
functionApp() { 
  return ( 
    <div> 
      {/* 使用組件 */} 
      <ComponentClass/> 
      <ComponentFun/> 
    </div> 
  ) 
} 
 
exportdefault App 

因為 JSX 必須有一個根節點，因此在引入使用后，渲染的結果中，會出現多個 div 嵌套，比如下面這樣子的：

為了解決這個問題，React 提供了 “片段” 組件 Fragment ，它允許你將子列表分組，渲染后不會向 DOM 添加額外節點：

import React, { Component,Fragment } from'react' 
 
exportclass ComponentClass extends Component { 
  render() { 
    return ( 
      <Fragment> 
        <h2>單文件類組件</h2> 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault ComponentClass 

使用也很簡單，就是引入后，將 JSX 中的div 根節點替換即可，最終渲染后的 DOM 如下：

<divid="root"><div><h2>單文件類組件</h2><h2>單文件函數組件</h2></div></div>