前言:
本文基于React+TypeScript+Mobx+AntDesignMobile技术栈,使用Create-React-App脚手架进行一个移动端项目搭建,主要介绍项目搭建过程和相关配置,以及状态管理工具Mobx的使用,最后实现点击按钮数字+1和一个简单的TodoList小功能,希望能对大家有所帮助。GitHub代码地址
项目搭建具体步骤:
- 安装Create-React-App脚手架工具,已经安装的同学请忽略
npm install create-react-app -g
- 创建初始项目
create-react-app my-app --typescript
注意:
如果同学你是参考typescript官方文档进行react项目搭建,里面有用create-react-app my-app --scripts-version=react-scripts-ts
命令创建的,千万别用,现在已经过时了,
webpack版本有问题,后续配置各种想不到的坑 TypeScript中文官网 -
引入AntDesignMobile,实现组件按需加载
本步骤官网有比较详细的介绍,我就不一一列举配置过程了,建议大家不要eject暴露所有内建配置,后续版本升级维护可能比较麻烦,推荐使用 react-app-rewired 插件即可配置;AntDesignMobile官网
-
安装React路由,状态管理工具mobx,配置sass
npm install history @types/history react-router-dom @types/react-router-dom // 安装react路由 npm install mobx-react mobx // 安装mobx npm install node-sass // 安装sass工具,安装之后无需另外配置sass,脚手架工具已经集成了
- 基本配置完成,运行项目
npm run start
React状态管理工具Mobx介绍:
Mobx是一个功能强大,基于面向对象编程方式的一个状态管理工具,上手相对比较容易。就连Redux的作者也曾经向大家推荐过它,对TypeScript支持比较友好,参考官网一张流程图:
Mobx中文官网
下面介绍几个Mobx核心概念
Observable state(可观察的状态)
MobX 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。
import { observable } from "mobx";
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
Computed values(计算值)
使用 MobX, 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用,下面代码中当queue或者refresh发生变化时,MobX会监听数据变化确保,通过Computed触发fooProps方法自动更新。
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
// 定义数据Store
class Store {
@observable queue:number = 1;
@action refresh = ():void => {
this.queue += 1;
console.log('this.queue -> ', this.queue);
}
@computed get fooProps():any {
return {
queue: this.queue,
refresh: this.refresh
};
}
}
Actions(动作)
任何应用都有动作。动作是任何用来修改状态的东西,mobx推荐将修改被观测变量的行为放在action中。action只能影响正在运行的函数,而无法影响当前函数调用的异步操作,参考官方文档用法:
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
action 装饰器/函数遵循 javascript 中标准的绑定规则。 但是,action.bound 可以用来自动地将动作绑定到目标对象。 注意,与 action 不同的是,(@)action.bound 不需要一个name参数,名称将始终基于动作绑定的属性。
class Ticker {
@observable tick = 0
@action.bound
increment() {
this.tick++ // 'this' 永远都是正确的
}
}
const ticker = new Ticker()
setInterval(ticker.increment, 1000)
利用Mobx作为状态管理,实现两个小功能
点击按钮+1
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
import {Button} from 'antd-mobile';
import './index.scss';
// 定义数据Store,用Mobx作为状态管理工具
class Store {
@observable queue:number = 1;
@action refresh = ():void => {
this.queue += 1;
console.log('this.queue -> ', this.queue);
}
@computed get fooProps():any {
return {
queue: this.queue,
refresh: this.refresh
};
}
}
// ts组件接收父组件传递过来的数据必须定义接口类型,否则报错
interface BarProps{
queue :number
}
// @observer修饰类,Bar组件接受Foo组建传过来的queue属性
@observer
class Bar extends React.Component<BarProps>{
render() {
const {queue} = this.props
return (
<div className="queue">{queue}</div>
)
}
}
interface FooProps {
queue: number,
refresh():void
}
// Foo组件接收来自Add组件的store数据
@observer
class Foo extends React.Component<FooProps>{
render() {
const {queue,refresh} = this.props;
return (
<div>
<Button type="primary" onClick = {refresh}>Refresh</Button>
<Bar queue = {queue} />
</div>
)
}
}
// 初始化store数据,传递给Foo组件
const store = new Store();
class Add extends React.Component{
render() {
return (
<div>
<h2 className="add"> hello react-ts-mobx</h2>
<Foo queue = {store.queue} refresh = {store.refresh} />
</div>
)
}
}
export default observer(Add)
TodoList功能
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
import './index.scss';
// 定义Todo数据类型
class Todo {
id:number = new Date().getTime();
title:string = '';
finished:boolean = false;
constructor(title:string) {
this.title = title;
}
}
// Store数据方法管理
class Store {
@observable title:string = '';
@observable todos:Todo[] =[];
// 添加Todo的Title
@action createTitle (e:any) {
console.log('e',e.target.value);
this.title = e.target.value;
}
// 增加Todo数据
@action createTodo = () => {
this.todos.unshift(new Todo(this.title));
this.title = '';
}
// 删除Todo
@action delTodo (id:number) {
this.todos.forEach((item,index) => {
if (item.id === id) {
this.todos.splice(index,1)
}
})
}
// 监听todos数据变化,显示剩余待办数量
@computed get unfinished () {
return this.todos.filter(todo => !todo.finished).length;
}
}
interface TodoItemProps {
todo:any;
store:any;
}
// 每一条Todo数据组件
@observer
class TodoItem extends React.Component<TodoItemProps> {
render() {
const {todo,store} = this.props
return (
<div className="item">
<span>{todo.title}</span>
<span onClick={()=> store.delTodo(todo.id)}>X</span>
</div>
)
}
}
const store = new Store();
@observer
class TodoList extends React.Component {
render() {
return (
<div>
<h2>TodoList</h2>
<header>
<input type="text" placeholder="please input" value={store.title} onChange = {e => store.createTitle(e)} />
<button onClick ={store.createTodo}>add</button>
</header>
<ul>
{store.todos.map((todo)=>{
return <li key={todo.id}>
<TodoItem todo={todo} store = {store}/>
</li>
})}
</ul>
<footer>
{store.unfinished} item(s) unfinished
</footer>
</div>
)
}
}
export default TodoList
总结:
本人刚接触TypeScript和Mobx不久,总结学习方法:应该先熟悉一些基本概念后,慢慢的做一些小功能,遇到问题认真思考后再查资料或者请教别人,反复看文档,加强对知识的理解;欢迎大佬们留言交流;GitHub代码地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。