目标
Antd Design
掌握Antd的引用方法
掌握Antd各个组件的使用方法
了解mobx的基础用法
Ant Design
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>
