组件和组件库框架

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

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

热门相关:你好,墨先生   星界游民   国破山河在   绍宋   离婚合约:前妻的秘密