国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

MobX詳解（三）：MobX基礎(chǔ)

verano / 719人閱讀

摘要：則是最優(yōu)秀的解決方案之一。衍生任何源自狀態(tài)并且不會再有任何進(jìn)一步的相互作用的東西就是衍生。例如事件觸發(fā)，數(shù)據(jù)請求等。通常的流程是改變狀態(tài)，狀態(tài)改變時，需要監(jiān)聽到狀態(tài)的改變，并在上做出一致的響應(yīng)。利用也能將狀態(tài)轉(zhuǎn)變?yōu)榭捎^察對象。

當(dāng)網(wǎng)頁邏輯變得更復(fù)雜，頁面的狀態(tài)管理將變成一個難題。

因此，不斷有新的狀態(tài)管理解決方案出現(xiàn)在我們的視野。MobX則是最優(yōu)秀的解決方案之一。

安裝

cnpm install mobx --save

基本概念：

狀態(tài)

在一個項目中，我們可能會用一個index變量來控制列表中的某一項顯示為選中狀態(tài)。那么這個index變量就可以認(rèn)為是一個狀態(tài)值。當(dāng)我們想要控制更多的元素，那么則需要更多的狀態(tài)值，許多狀態(tài)值或者數(shù)據(jù)組成的對象，就可以理解為一個項目的狀態(tài)。

我們常常會將所有的狀態(tài)值放在一個對象中來統(tǒng)一管理。

var state = {
  index: 1,
  todos: [...],
  isLogin: false
  // ...
}

衍生

任何 源自狀態(tài)并且不會再有任何進(jìn)一步的相互作用的東西就是衍生。

例如在狀態(tài)對象中，保存了了需要完成的事件列表todos，以及一個已經(jīng)完成事件的數(shù)量，那么我們就可以衍生出未完成事件的數(shù)量。

MobX區(qū)分兩種衍生：

Computed： 計算值。

Reactions： 反應(yīng)，當(dāng)狀態(tài)改變時，需要做哪些UI操作來和狀態(tài)的改變保持一致。

動作

動作：action 是指改變狀態(tài)的代碼。例如事件觸發(fā)，數(shù)據(jù)請求等。

通常的流程是action改變狀態(tài)，狀態(tài)改變時，需要監(jiān)聽到狀態(tài)的改變，并在UI上做出一致的響應(yīng)。

我們可以利用mobx提供的observable將狀態(tài)對象轉(zhuǎn)換為可觀察的對象，這樣我們就能夠借助mobx監(jiān)聽到狀態(tài)的改變，并做出對應(yīng)的響應(yīng)了。

observable 
import { observable } from "mobx";

var index = 10;

// 轉(zhuǎn)化為可觀察對象
var oIndex = observable(index);

oIndex是變量index的可觀察對象。當(dāng)我們想要訪問與修改存儲在oIndex中的狀態(tài)時。

// 訪問
oIndex.get(); // 10

// 設(shè)置
oIndex.set(20); 
oIndex.get(); // 20
autorun

當(dāng)可觀察對象中保存的值發(fā)生變化時，可以在mobx.autorun中被觀察到。例如下面的例子中，用index表示body的邊框?qū)挾取Ｎ覀儗ndex轉(zhuǎn)化為可觀察對象，并在不同的時機(jī)改變觀察對象的值，并在autorun中，進(jìn)行對應(yīng)的UI響應(yīng)。

import { observable, autorun } from "mobx";

var index = 0;
var oIndex = observable(index);

autorun(() => {
    document.body.style.border = `${oIndex.get() * 2}px solid red`;
})


oIndex.set(10);

setTimeout(() => {
    oIndex.set(20);
}, 1000)

我們發(fā)現(xiàn)，當(dāng)我們想要改變body的邊框時，只需要利用oIndex.set改變狀態(tài)值就可以了。這正是響應(yīng)式編程的特點，我們不再每次狀態(tài)改變時，都去執(zhí)行一次對應(yīng)的UI改變，我們只需要將UI變化(衍生)定義好，僅僅改變狀態(tài)值就行了，MobX幫助我們完成了剩余的其他工作。

computed

利用mobx.computed也能將狀態(tài)轉(zhuǎn)變?yōu)榭捎^察對象。但是通常情況下，computed觀察的值，是通過其他已有狀態(tài)值衍生而來。

import { observable, autorun, computed } from "mobx";

var index = 0;
var oIndex = observable(index);
var oComputed = computed(() => oIndex.get() % 2 == 0)

autorun(() => {
    document.body.style.background = oComputed.get() ? "red" : "orange";
})


setInterval(() => {
    oIndex.set(oIndex.get() + 1)
}, 500)

經(jīng)過這幾個例子，相信大家都已經(jīng)能感受到可觀察對象中值的變化能夠在autorun中對應(yīng)到UI變化上，因此后面的例子就直接log出最新的值，不再列出新的UI變化了

在計算總成績，計算總價格等場景，computed也能很好的勝任。

將Object轉(zhuǎn)化為可觀察對象

除了能夠?qū)⒒A(chǔ)類型轉(zhuǎn)化為可觀察對象，observable也能夠?qū)⑵胀▽ο筠D(zhuǎn)化為可觀察對象。

// 待續(xù)

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107138.html

相關(guān)文章

  • 前端每周清單第 55 期: MobX 4 特性概覽，iOS Hacks 分享, 分布式事務(wù)詳解

    摘要：異步剪貼板操作過去的數(shù)年中，各瀏覽器基本上都在使用來進(jìn)行剪貼板交互。而提供了新的，則為我們提供了另一種異步式的剪貼板操作方式，本文即是對該機(jī)制與接口規(guī)范的詳細(xì)介紹。 showImg(https://segmentfault.com/img/remote/1460000013854167); 前端每周清單第 55 期: MobX 4 特性概覽，iOS Hacks 分享, 分布式事務(wù)詳解 ...

    zombieda 評論0 收藏0

  • 【用故事解讀 MobX 源碼（五）】 Observable

    摘要：前言初衷以系列故事的方式展現(xiàn)源碼邏輯，盡可能以易懂的方式講解源碼本系列文章用故事解讀源碼一用故事解讀源碼二用故事解讀源碼三用故事解讀源碼四裝飾器和用故事解讀源碼五文章編排每篇文章分成兩大段，第一大段以簡單的偵探系列故事的形式講解所涉及人物場 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式...

    leeon 評論0 收藏0

  • MobX詳解（一）：裝飾者模式

    摘要：當(dāng)我們想要擴(kuò)展一個對象的能力時，通常可以通過添加原型方法，修改構(gòu)造函數(shù)，繼承等方式。構(gòu)造函數(shù)繼承戰(zhàn)士戰(zhàn)士的移動血條戰(zhàn)士的移動速度原型的繼承戰(zhàn)士的奔跑動作戰(zhàn)士的基礎(chǔ)攻擊接下來我們要創(chuàng)建裝飾類。 當(dāng)我們想要擴(kuò)展一個對象的能力時，通常可以通過添加原型方法，修改構(gòu)造函數(shù)，繼承等方式。除此之外，我們還可以通過妝飾者模式來達(dá)到目的。 例如一個游戲角色，我們在不改變這個角色對象的條件下，給角色穿一件...

    xingqiba 評論0 收藏0

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

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

    BlackMass 評論0 收藏0

  • 【用故事解讀 MobX源碼（三）】 shouldCompute

    摘要：最簡單的情況張三的存貸這里我們創(chuàng)建了實例探長實例觀察員這個示例和我們之前在首篇文章用故事解讀源碼一中所用示例是一致的。 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式講解源碼； 本系列文章： 《【用故事解讀 MobX源碼（一）】 autorun》 《【用故事解讀 MobX源碼（二）】...

    JackJiang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<