組件和組件庫框架

所謂天才，就是努力的力量。

React 組件由 DOM 結構，樣式和 Javascript 邏輯組成。

1. ES6 中的類

class People {
  constructor() {
    this.name = "hubert"
    this.age = 29
  }

  printName() {
    console.log(this.name)
  }

  printAge() {
    console.log(this.age)
  }
}

var people = new People()
people.printName()
people.printAge()

2. 類式組件

類式組件是基於使用 class 定義的類，需要繼承自 React.Component；另外，類式組件中必須實現 render 函數。

import React from "react";

class AppClassComponent extends React.Component {
  render() {
    return <div>hello {this.props.name}</div>
  }
}

export default AppClassComponent

3. 函數式組件

函數式組件是基於使用 function 定義的函數，通常接受一個 props 參數，返回一個 JSX 元素或者 null。函數式組件和普通函數最主要的區別在調用的時候，函數式組件在渲染的時候沒有被人為顯式調用，而是由 React 內部去調用。

// React 16.8 之前函數式組件是無狀態的
// React 16.8 之後引入 react hooks，我們可以讓函數式組件有狀態了。hooks 讓函數式組件有狀態了。
function AppFuncConponent(props) {
  return (
    <div>hello function conponent</div>
  )
}

// ES6 箭頭函數
const AppfuncComponent1 = (props)=>{
  return <div>箭頭函數組件</div>
}

export default AppFuncConponent

4. TypeScript 函數式組件

函數式組件通常接受一個 props 參數，返回一個 JSX 元素或者 null。當我們需要使用 TypeScript 去定義一個函數式組件時，除了基礎對函數式寫法外，我們還可以使用以下方式來實現。

4.1）使用 React.FC

由於 React 不是使用 TypeScript 開發的，使用的是社區開發的 @type/react 包提供的類型，裡面有一個通用類型 FC ，允許我們為函數組件添加參數類型。

type FCProps = { text: string };
// 這裡的 React.FC 是 React.FunctionComponent 的簡寫
const FCComponent: React.FC<FCProps> = ({ text = "" })=> <div>{text}</div>;

當組件包含子元素，TypeScript 會提示警告，現在已經不推薦使用這種方式了：

type FCProps = { text: string };
const FCComponent: React.FC<FCProps> = ({ text = "" }) => <div>{text}</div>;

function App() {
  return (
    <div className="App">
        <FCComponent text="Hello Chris1993.">
            <span>children</span>
        </FCComponent>
    </div>
  );
}

提示警告內容：

Type '{ children: string; text: string; }' is not assignable to type 'IntrinsicAttributes & FCProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & FCProps'.

4.2）直接定義完整類型

由於 React 組件包含子元素時，會隱式傳遞一個 children 屬性，導致定義的參數類型出錯，因此我們可以直接定義一個完整的參數介面，包含了 children 屬性的類型：

type FCProps = { text: string; children?: any };
const FCComponent: React.FC<FCProps> = ({ text = "" }) => <div>{text}</div>;

function App() {
  return (
    <div className="App">
        <FCComponent text="Hello Chris1993.">
            <span>children</span>
        </FCComponent>
    </div>
  );
}

4.3）使用 React.PropsWithChildren

上面這種方法每次都要手動寫一個 children 屬性類型比較麻煩，這時候我們就可以使用 React.PropsWithChildren 類型，它本身封裝了 children 的類型聲明：

// react/index.d.ts
type PropsWithChildren<P> = P & { children?: ReactNode };

因此，使用 React.PropsWithChildren 類型定義函數式組件，就不用去處理 children 的類型了：

type IProps = React.PropsWithChildren<{ text: string }>;
// 形式1
const PropsComponent = ({ text }: IProps) => <div>{text}</div>;
// 形式2
const PropsComponent:React.FC<IProps> = ({ text }) => <div>{text}</div>;

function App() {
  return (
    <div className="App">
        <PropsComponent text="Hello Chris1993.">
            <span>children</span>
        </PropsComponent>
    </div>
  );
}

4.4）使用 JSX.Element

使用 JSX.Element 類型作為函數式組件的返回值類型，當組件的返回值不是 JSX.Element 類型時，TypeScript 就會提示錯誤。

type FCProps = { text: string };
const ElementComponent = ({ text }: FCProps): JSX.Element => <div>{text}</div>;
function App() {
  return (
    <div className="App">
        <ElementComponent text="Hello Chris1993."></ElementComponent>
    </div>
  );
}

5. 組件嵌套使用

6. React UI 組件庫

Ant Design 是一個致力於提升『用戶！和『設計者』使用體驗的設計語言；旨在統一中台項目的前端 UI 設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源；包含很多設計原則和配套的組件庫。

Ant Design（PC 端）：https://ant.design/index-cn

Ant Design Mobile（移動端）：https://mobile.ant.design/zh