[[419758]]

組件允許你將 UI 拆分為獨(dú)立可復(fù)用的代碼片段，并對(duì)每個(gè)片段進(jìn)行獨(dú)立構(gòu)思。從概念上類似于 JavaScript 函數(shù)。

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

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

函數(shù)組件與類組件

顧名思義，函數(shù)組件就是使用函數(shù)創(chuàng)建的組件，類組件就是使用類創(chuàng)建組件，安裝好插件之后，可以直接使用簡(jiǎn)寫補(bǔ)全功能創(chuàng)建對(duì)應(yīng)插件。

注意，首字母要大寫。

函數(shù)組件的創(chuàng)建

編輯器快捷方式：rfce

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

聲明函數(shù)，并在函數(shù)中返回 JSX ，最后導(dǎo)出函數(shù)。

類組件的創(chuàng)建

編輯器快捷方式：rce

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

類組件需要繼承 Component，因此需要進(jìn)行導(dǎo)入。如果不導(dǎo)入，則需要繼承React.Component。

同時(shí)，類中需要調(diào)用 render() 渲染函數(shù)，在渲染函數(shù)中，return 返回對(duì)應(yīng)的 JSX。

組件的引入與使用

組件的使用也很簡(jiǎn)單，按模塊化語(yǔ)法引入之后，直接當(dāng)作標(biāo)簽在 JSX 中使用。

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

因?yàn)?JSX 必須有一個(gè)根節(jié)點(diǎn)，因此在引入使用后，渲染的結(jié)果中，會(huì)出現(xiàn)多個(gè) div 嵌套，比如下面這樣子的：

為了解決這個(gè)問(wèn)題，React 提供了 “片段” 組件 Fragment ，它允許你將子列表分組，渲染后不會(huì)向 DOM 添加額外節(jié)點(diǎn)：

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

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

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