成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React + MobX 入門及實(shí)例（一）

simon_chen / 2983人閱讀

摘要：前言現(xiàn)在最熱門的前端框架，毫無疑問是。對于小型應(yīng)用，引入狀態(tài)管理庫是奢侈的。但對于復(fù)雜的中大型應(yīng)用，引入狀態(tài)管理庫是必要的?，F(xiàn)在熱門的狀態(tài)管理解決方案，相繼進(jìn)入開發(fā)者的視野。獲得計(jì)算得到的新并返回。

前言

現(xiàn)在最熱門的前端框架，毫無疑問是React。

React是一個(gè)狀態(tài)機(jī)，由開始的初始狀態(tài)，通過與用戶的互動(dòng)，導(dǎo)致狀態(tài)變化，從而重新渲染UI。

對于小型應(yīng)用，引入狀態(tài)管理庫是"奢侈的"。

但對于復(fù)雜的中大型應(yīng)用，引入狀態(tài)管理庫是"必要的"。

現(xiàn)在熱門的狀態(tài)管理解決方案Redux，MobX相繼進(jìn)入開發(fā)者的視野。

Redux、MobX哪一個(gè)更適合你的項(xiàng)目？

在react項(xiàng)目中使用redux or mobx？

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

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

介紹 1.入門

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

2.安裝 
npm install --save mobx mobx-react
3.核心概念

1.state(狀態(tài))
狀態(tài)是驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)。

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

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修飾的組件，將會(huì)根據(jù)組件內(nèi)使用到的被observable修飾的state的變化而自動(dòng)重新渲染

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(動(dòng)作)
只有在 actions 中，才可以修改 Mobx 中 state 的值。
注意：當(dāng)你使用裝飾器模式時(shí)，@action 中的 this 沒有綁定在當(dāng)前這個(gè)實(shí)例上，要用過 @action.bound 來綁定 使得 this 綁定在實(shí)例對象上。

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

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

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

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

6.autorun
這通常是當(dāng)你需要從反應(yīng)式代碼橋接到命令式代碼的情況，例如打印日志、持久化或者更新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);
// 不會(huì)再輸出任何值。`sum` 不會(huì)再重新計(jì)算。

經(jīng)驗(yàn)法則：如果你有一個(gè)函數(shù)應(yīng)該自動(dòng)運(yùn)行，但不會(huì)產(chǎn)生一個(gè)新的值，請使用autorun。 其余情況都應(yīng)該使用 computed。

7.reactions
Reactions 和計(jì)算值很像，但它不是產(chǎn)生一個(gè)新的值，而是會(huì)產(chǎn)生一些副作用，比如打印到控制臺(tái)、網(wǎng)絡(luò)請求、遞增地更新 React 組件樹以修補(bǔ)DOM、等等。 簡而言之，reactions 在 響應(yīng)式編程和命令式編程之間建立溝通的橋梁。

4.應(yīng)用實(shí)例

1.TodoList

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

效果圖：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90237.html

相關(guān)文章

  • React + MobX 入門及實(shí)例（二）

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

    Eidesen 評論0 收藏0

  • Mobx4.X狀態(tài)管理入門

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

    CKJOKER 評論0 收藏0

  • MobX入門TodoList

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

    csRyan 評論0 收藏0

  • 前端進(jìn)階資源整理

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

    BlackMass 評論0 收藏0

  • 利用Dawn工程化工具實(shí)踐MobX數(shù)據(jù)流管理方案

    摘要：新的項(xiàng)目目錄設(shè)計(jì)如下放置靜態(tài)文件業(yè)務(wù)組件入口文件數(shù)據(jù)模型定義數(shù)據(jù)定義工具函數(shù)其中數(shù)據(jù)流實(shí)踐的核心概念就是數(shù)據(jù)模型和數(shù)據(jù)儲(chǔ)存。最后再吃我一發(fā)安利是阿里云業(yè)務(wù)運(yùn)營事業(yè)部前端團(tuán)隊(duì)開源的前端構(gòu)建和工程化工具。 本文首發(fā)于阿里云前端dawn團(tuán)隊(duì)專欄。 項(xiàng)目在最初應(yīng)用 MobX 時(shí)，對較為復(fù)雜的多人協(xié)作項(xiàng)目的數(shù)據(jù)流管理方案沒有一個(gè)優(yōu)雅的解決方案，通過對MobX官方文檔中針對大型可維護(hù)項(xiàng)目最佳實(shí)踐的...

    0x584a 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<