摘要:通過裝飾器或者利用時調用的函數來進行使用下面代碼中當或者發生變化時,會監聽數據變化確保通過觸發方法自動更新。只能影響正在運行的函數,而無法影響當前函數調用的異步操作參考官方文檔用法裝飾器函數遵循中標準的綁定規則。
前言:
本文基于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
Mobx是一個功能強大,基于面向對象編程方式的一個狀態管理工具,上手相對比較容易。就連Redux的作者也曾經向大家推薦過它,對TypeScript支持比較友好,參考官網一張流程圖:
Mobx中文官網
MobX 為現有的數據結構(如對象,數組和類實例)添加了可觀察的功能。 通過使用 @observable 裝飾器(ES.Next)來給你的類屬性添加注解就可以簡單地完成這一切。
import { observable } from "mobx"; class Todo { id = Math.random(); @observable title = ""; @observable finished = false; }
使用 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 }; } }
任何應用都有動作。動作是任何用來修改狀態的東西,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作為狀態管理,實現兩個小功能
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{ render() { const {queue} = this.props return ( {queue}) } } interface FooProps { queue: number, refresh():void } // Foo組件接收來自Add組件的store數據 @observer class Foo extends React.Component{ render() { const {queue,refresh} = this.props; return ( ) } } // 初始化store數據,傳遞給Foo組件 const store = new Store(); class Add extends React.Component{ render() { return ( ) } } export default observer(Add)hello react-ts-mobx
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總結:{ 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 () } } export default TodoListTodoList
store.createTitle(e)} /> {store.todos.map((todo)=>{ return
- })}
本人剛接觸TypeScript和Mobx不久,總結學習方法:應該先熟悉一些基本概念后,慢慢的做一些小功能,遇到問題認真思考后再查資料或者請教別人,反復看文檔,加強對知識的理解;歡迎大佬們留言交流;GitHub代碼地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105184.html
摘要:結合編輯器可以推導變量對應的類型以及內部的結構,提高代碼的健壯性和可維護性。通過充分利用時間回溯的特征,可以增強業務的可預測性與錯誤定位能力。對于對象的哪部分需要成為可觀察的,提供了細粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測錯誤 通過靜態類型檢測可以盡早檢...
摘要:的另一個核心特性,蘋果表示也正在開發中,按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫,支持以及瀏覽器環境。 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID: frontshow),及時獲取前端每周清單。 本期是 2017 年的最后一...
摘要:組件成為前端最基本的物料,融合在組件中的方案日趨成熟。組件成為最基本的前端物料,讓組件化更徹底在的調研報告中,開發者有愿意繼續,有愿意繼續。需要留意的是,有表示對感興趣,因此獲得的最感興趣獎。 簡介: JavaScript 應用范圍廣泛,靜態類型語言 TypeScript 會繼續得到更多開發者的青睞。 組件成為前端最基本的物料,CSS 融合在組件中(CSS in JS)的方案日趨成熟...
摘要:前言想要快速開始多頁面應用項目結構如何更合理想要快速上手想要快速使用想要一鍵使用并能快速自定義主題樣式可以的這里,受和的啟發,我做了這樣一個的腳手架,讓你一鍵搭建項目,快速開始。 前言 想要快速開始 react 多頁面應用? 項目結構如何更合理? 想要快速上手 Mobx? 想要快速使用 TypeScript? 想要一鍵使用 Ant-Design 并能快速自定義主題樣式? 可以的!!! ...
摘要:環境搭建從零開始搭建開發環境引入安裝依賴新建修改引入并支持安裝依賴打包時將樣式模塊化,我們可以通過或引入樣式,并且相互不沖突。修改,引入創建使用語法報錯修改引入狀態管理使用裝飾器語法修改修改源碼 環境搭建 1.從零開始搭建webpack+react開發環境 2.引入Typescript 安裝依賴 npm i -S @types/react @types/react-domnpm i -...
閱讀 1379·2023-04-25 18:34
閱讀 3437·2021-11-19 09:40
閱讀 2824·2021-11-17 09:33
閱讀 2935·2021-11-12 10:36
閱讀 2823·2021-09-26 09:55
閱讀 2653·2021-08-05 10:03
閱讀 2512·2019-08-30 15:54
閱讀 2861·2019-08-30 15:54