组件和组件库框架

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

React 组件由 DOM 结构，样式和 Javascript 逻辑组成。

1. ES6 中的类

javascript 复制代码

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 函数。

react 复制代码

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 复制代码

// 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 ，允许我们为函数组件添加参数类型。

react 复制代码

type FCProps = { text: string };
// 这里的 React.FC 是 React.FunctionComponent 的简写
const FCComponent: React.FC<FCProps> = ({ text = "" })=> <div>{text}</div>;

当组件包含子元素，TypeScript 会提示警告，现在已经不推荐使用这种方式了：

react 复制代码

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>
  );
}

提示警告内容：

react 复制代码

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 属性的类型：

javascript 复制代码

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 复制代码

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

因此，使用 React.PropsWithChildren 类型定义函数式组件，就不用去处理 children 的类型了：

javascript 复制代码

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 就会提示错误。

javascript 复制代码

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