摘要：通過(guò)裝飾器或者利用時(shí)調(diào)用的函數(shù)來(lái)進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時(shí)，會(huì)監(jiān)聽數(shù)據(jù)變化確保通過(guò)觸發(fā)方法自動(dòng)更新。只能影響正在運(yùn)行的函數(shù)，而無(wú)法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。

本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個(gè)移動(dòng)端項(xiàng)目搭建，主要介紹項(xiàng)目搭建過(guò)程和相關(guān)配置,以及狀態(tài)管理工具M(jìn)obx的使用,最后實(shí)現(xiàn)點(diǎn)擊按鈕數(shù)字+1和一個(gè)簡(jiǎn)單的TodoList小功能,希望能對(duì)大家有所幫助。GitHub代碼地址

安裝Create-React-App腳手架工具,已經(jīng)安裝的同學(xué)請(qǐng)忽略

npm install create-react-app -g

創(chuàng)建初始項(xiàng)目
create-react-app my-app --typescript

注意:
如果同學(xué)你是參考typescript官方文檔進(jìn)行react項(xiàng)目搭建,里面有用create-react-app my-app --scripts-version=react-scripts-ts命令創(chuàng)建的,千萬(wàn)別用,現(xiàn)在已經(jīng)過(guò)時(shí)了,
webpack版本有問(wèn)題,后續(xù)配置各種想不到的坑 TypeScript中文官網(wǎng)

引入AntDesignMobile,實(shí)現(xiàn)組件按需加載

本步驟官網(wǎng)有比較詳細(xì)的介紹,我就不一一列舉配置過(guò)程了,建議大家不要eject暴露所有內(nèi)建配置,后續(xù)版本升級(jí)維護(hù)可能比較麻煩,推薦使用 react-app-rewired 插件即可配置;AntDesignMobile官網(wǎng)

安裝React路由,狀態(tài)管理工具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工具,安裝之后無(wú)需另外配置sass,腳手架工具已經(jīng)集成了
    

基本配置完成,運(yùn)行項(xiàng)目
npm run start

Mobx是一個(gè)功能強(qiáng)大，基于面向?qū)ο缶幊谭绞降囊粋€(gè)狀態(tài)管理工具,上手相對(duì)比較容易。就連Redux的作者也曾經(jīng)向大家推薦過(guò)它，對(duì)TypeScript支持比較友好,參考官網(wǎng)一張流程圖:
Mobx中文官網(wǎng)

Observable state(可觀察的狀態(tài))

MobX 為現(xiàn)有的數(shù)據(jù)結(jié)構(gòu)(如對(duì)象，數(shù)組和類實(shí)例)添加了可觀察的功能。 通過(guò)使用 @observable 裝飾器(ES.Next)來(lái)給你的類屬性添加注解就可以簡(jiǎn)單地完成這一切。

import { observable } from "mobx";
class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;
}

Computed values(計(jì)算值)

使用 MobX， 你可以定義在相關(guān)數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新的值。 通過(guò)@computed 裝飾器或者利用 (extend)Observable 時(shí)調(diào)用 的getter / setter 函數(shù)來(lái)進(jìn)行使用,下面代碼中當(dāng)queue或者refresh發(fā)生變化時(shí)，MobX會(huì)監(jiān)聽數(shù)據(jù)變化確保,通過(guò)Computed觸發(fā)fooProps方法自動(dòng)更新。

import React from "react";
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from "mobx-react";

// 定義數(shù)據(jù)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(動(dòng)作)

任何應(yīng)用都有動(dòng)作。動(dòng)作是任何用來(lái)修改狀態(tài)的東西,mobx推薦將修改被觀測(cè)變量的行為放在action中。action只能影響正在運(yùn)行的函數(shù)，而無(wú)法影響當(dāng)前函數(shù)調(diào)用的異步操作,參考官方文檔用法:

action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
action 裝飾器/函數(shù)遵循 javascript 中標(biāo)準(zhǔn)的綁定規(guī)則。 但是，action.bound 可以用來(lái)自動(dòng)地將動(dòng)作綁定到目標(biāo)對(duì)象。 注意，與 action 不同的是，(@)action.bound 不需要一個(gè)name參數(shù)，名稱將始終基于動(dòng)作綁定的屬性。
class Ticker {
    @observable tick = 0

    @action.bound
    increment() {
        this.tick++ // "this" 永遠(yuǎn)都是正確的
    }
}

const ticker = new Ticker()
setInterval(ticker.increment, 1000)

點(diǎn)擊按鈕+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";

// 定義數(shù)據(jù)Store,用Mobx作為狀態(tài)管理工具
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組件接收父組件傳遞過(guò)來(lái)的數(shù)據(jù)必須定義接口類型,否則報(bào)錯(cuò)
interface BarProps{
    queue :number
}
// @observer修飾類,Bar組件接受Foo組建傳過(guò)來(lái)的queue屬性
@observer 
class Bar extends React.Component{
    render() {
        const {queue} = this.props
        return (
            
{queue}
        )
    }
}
interface FooProps {
    queue: number,
    refresh():void
}
// Foo組件接收來(lái)自Add組件的store數(shù)據(jù)
@observer
class Foo extends React.Component{
    render() {
        const {queue,refresh} = this.props;
        return (
            

                Refresh
                
            
        )
    }
}
// 初始化store數(shù)據(jù),傳遞給Foo組件
const store = new Store();
class Add extends React.Component{
    render() {
        return (
            

                
 hello react-ts-mobx
                
            
           
        )
    }
}
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數(shù)據(jù)類型
class Todo {
    id:number = new Date().getTime();
    title:string = "";
    finished:boolean = false;
    constructor(title:string) {
        this.title = title;
    }
}
// Store數(shù)據(jù)方法管理
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數(shù)據(jù)
    @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)
            }
        })
    }
    // 監(jiān)聽todos數(shù)據(jù)變化,顯示剩余待辦數(shù)量
    @computed get unfinished () {
        return this.todos.filter(todo => !todo.finished).length;
    }

}
interface TodoItemProps {
    todo:any;
    store:any;
}
// 每一條Todo數(shù)據(jù)組件
@observer 
class TodoItem extends React.Component {
    render() {
        const {todo,store} = this.props
        return (
            

               {todo.title}
                store.delTodo(todo.id)}>X
            
        )
    }
}
const store = new Store();
@observer 
class TodoList extends React.Component {
    render() {
        return (
            

                
TodoList
                

                     store.createTitle(e)} />
                    add
                
                

                    {store.todos.map((todo)=>{
                        return 

                           
                        
                    })}
                
                
            
        )
    }
}
export default TodoList

本人剛接觸TypeScript和Mobx不久,總結(jié)學(xué)習(xí)方法:應(yīng)該先熟悉一些基本概念后,慢慢的做一些小功能,遇到問(wèn)題認(rèn)真思考后再查資料或者請(qǐng)教別人,反復(fù)看文檔,加強(qiáng)對(duì)知識(shí)的理解;歡迎大佬們留言交流;GitHub代碼地址