【前端第十五课】Antd Design；mobx的基础用法

目标

• Antd Design
  • 掌握Antd的引用方法
  • 掌握Antd各个组件的使用方法
• 了解mobx的基础用法

Ant Design

https://ant.design/index-cn

Ant Design 是阿里推出的一套设计体系，antd 是基于这套设计体系的 React UI 组件库，主要用于开发企业级的中后台产品，它的组件质量非常高，而且使用TypeScript开发，提供完整的类型定义文件，是React社区最为知名的组件库。

想要使用 antd，我们只需要通过npm安装即可

npm i antd

假如我们想要引用某一个组件如 Button，只需要

import * as React from 'react'
import { Button } from 'antd'

export default class Main extends React.Component {
  render() {
    return <Button>Btn</Button>
  }
}

MobX

目前我们所接触到的React中的状态都只在组件内部或者父子组件之间传递，但是有些特殊的状态我们需要在很多不同的组件中都能访问它，而且当这些状态发生变化的时候可以引起界面的刷新，比如我们可以把当前登录的用户信息放到全局状态中，其他组件可以直接引用。

如果想要实现全局状态的管理，我们可以借助于React提供的 Context 或者社区的 Redux ，MobX 也是一个非常流行的状态管理库，它使用非常简单，上手容易，我们来学习一下它的基本使用。

创建全局状态

我们首先要创建一个状态类，来管理我们的全局状态，如

import { makeAutoObservable } from 'mobx'

class UserStore {
  username: string = 'name'

  setUsername(name: string) {
    this.username = name
  }

  constructor() {
    makeAutoObservable(this)
  }
}

export default new UserStore()

最后我们导出一个状态类的实例

绑定状态

如果想在某一个组件中绑定store中的状态，需要给类组件添加一个装饰器，然后就可以当成一个普通的状态来引用了

import * as React from 'react'
import { observer } from 'mobx-react'

import store from '../../store'

@observer
export default class Test extends React.Component {
  render() {
    return (
      <div>Test: {store.username}</div>
    )
  }
}

通过 import 将全局状态导入，然后在代码中引用即可

修改状态

任何时候都应该避免直接修改store中的值，我们在store中定义一些方法，通过这些方法来对原始状态修改。这样做的好处是我们可以在方法中控制对状态修改的逻辑，避免引起混乱。

<button onClick={() => store.setUsername('Test')}>change</button>