React + MobX 入門及實例（一）

simon_chen 發布于2019-08-21 17:56 / 2980人閱讀

摘要：前言現在最熱門的前端框架，毫無疑問是。對于小型應用，引入狀態管理庫是奢侈的。但對于復雜的中大型應用，引入狀態管理庫是必要的。現在熱門的狀態管理解決方案，相繼進入開發者的視野。獲得計算得到的新并返回。

前言

現在最熱門的前端框架，毫無疑問是React。

React是一個狀態機，由開始的初始狀態，通過與用戶的互動，導致狀態變化，從而重新渲染UI。

對于小型應用，引入狀態管理庫是"奢侈的"。

但對于復雜的中大型應用，引入狀態管理庫是"必要的"。

現在熱門的狀態管理解決方案Redux，MobX相繼進入開發者的視野。

Redux、MobX哪一個更適合你的項目？

在react項目中使用redux or mobx？

正如愛因斯坦所說的 “?讓一切事物盡可能的簡單，但不要簡單”。

盡管讓我們來填一填 MobX 的坑。

介紹 1.入門

對于應用開發中的常見問題，React 和 MobX都提供了最優和獨特的解決方案。React 提供了優化UI渲染的機制，這種機制就是通過使用虛擬DOM來減少昂貴的DOM變化的數量。MobX 提供了優化應用狀態與 React 組件同步的機制，這種機制就是使用響應式虛擬依賴狀態圖表，它只有在真正需要的時候才更新并且永遠保持是最新的。

2.安裝

npm install --save mobx mobx-react

3.核心概念

1.state(狀態)
狀態是驅動應用的數據。

2.observable(value) && @observable
Observable 值可以是JS基本數據類型、引用類型、普通對象、類實例、數組和映射。其修飾的state會暴露出來供觀察者使用。

const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable(20);
temperature.set(25);

3.observer(觀察者)
被observer修飾的組件，將會根據組件內使用到的被observable修飾的state的變化而自動重新渲染

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (Seconds passed: { this.props.timerData.secondsPassed }  )
    }
};

React.render(, document.body);

4.action(動作)
只有在 actions 中，才可以修改 Mobx 中 state 的值。
注意：當你使用裝飾器模式時，@action 中的 this 沒有綁定在當前這個實例上，要用過 @action.bound 來綁定使得 this 綁定在實例對象上。

@action.bound setName () {
  this.myName = "HUnter"
}

actions ------> state ------> view

5.computed
計算值(computed values)是可以根據現有的狀態或其它計算值衍生出的值。
getter：獲得計算得到的新state并返回。
setter：不能用來直接改變計算屬性的值，但是它們可以用來作“逆向”衍生。

class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 這是一個自動的動作，不需要注解
        this.length = Math.sqrt(value);
    }
}

6.autorun
這通常是當你需要從反應式代碼橋接到命令式代碼的情況，例如打印日志、持久化或者更新UI的代碼。

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// 輸出 "6"
numbers.push(4);
// 輸出 "10"

disposer();
numbers.push(5);
// 不會再輸出任何值。`sum` 不會再重新計算。

經驗法則：如果你有一個函數應該自動運行，但不會產生一個新的值，請使用autorun。其余情況都應該使用 computed。

7.reactions
Reactions 和計算值很像，但它不是產生一個新的值，而是會產生一些副作用，比如打印到控制臺、網絡請求、遞增地更新 React 組件樹以修補DOM、等等。簡而言之，reactions 在響應式編程和命令式編程之間建立溝通的橋梁。

4.應用實例

1.TodoList

技術棧：react + react-router(v4)+mobx+webpack

效果圖：

很簡單的一個小demo，這里不分析了，源碼里有部分注釋幫助理解。
github地址：https://github.com/zhaoyu69/m...

云服務器 GPU云服務器 database詳解及實例阿里云云計算及云服務器入門 Mobx python入門實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90237.html

React + MobX 入門及實例（二）

摘要：在上一章入門及實例一應用實例的基礎上增加優化界面增加后臺框架，操作。刪除選中項時，一定要在刪除成功后將置空，否則在下次選擇時會選中已刪除的項，雖然沒有元素但可能會影響其他一些操作。中設置跨域訪問實際是對進行匹配。在上一章 React + MobX 入門及實例（一）應用實例TodoList的基礎上增加ant-design優化界面增加后臺express框架，mongoose操作。...

Eidesen 2019-08-22 11:15 評論0 收藏0
Mobx4.X狀態管理入門

摘要：前言原本說接下來會專注學但是最新工作又學習了一些有意思的庫於是就再寫下來做個簡單的入門之前我寫過一篇文章這個也算是作為一個補充吧這次無非就是類似筆記把認為的一些關鍵點記下來有些地方還沒用到就衹是描述一下代碼有些自己寫的有些文檔寫的很好就搬下前言原本說接下來會專注學nodejs,但是最新工作又學習了一些有意思的庫,於是就再寫下來做個簡單的入門,之前我寫過一篇文章,這個也算是作為一個補...

CKJOKER 2019-08-26 10:36 評論0 收藏0
MobX入門TodoList

摘要：用于簡單可擴展的狀態管理，相比有更高的靈活性，文檔參考中文文檔，本文作為入門，介紹一個簡單的項目。任務已完成下一個任務修復谷歌瀏覽器頁面顯示問題提交意見反饋代碼創建在中引入主入口文件設置參考入門學習總結 MobX用于簡單、可擴展的React狀態管理，相比Redux有更高的靈活性，文檔參考：MobX中文文檔，本文作為入門，介紹一個簡單的TodoList項目。 1. 預期效果 showIm...

csRyan 2019-08-26 10:26 評論0 收藏0
前端進階資源整理

摘要：前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦，看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始，在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

BlackMass 2019-08-23 12:36 評論0 收藏0
利用Dawn工程化工具實踐MobX數據流管理方案

摘要：新的項目目錄設計如下放置靜態文件業務組件入口文件數據模型定義數據定義工具函數其中數據流實踐的核心概念就是數據模型和數據儲存。最后再吃我一發安利是阿里云業務運營事業部前端團隊開源的前端構建和工程化工具。本文首發于阿里云前端dawn團隊專欄。項目在最初應用 MobX 時，對較為復雜的多人協作項目的數據流管理方案沒有一個優雅的解決方案，通過對MobX官方文檔中針對大型可維護項目最佳實踐的...

0x584a 2019-08-21 17:19 評論0 收藏0