成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

通過 React + Mobx 實現(xiàn)簡單的 TodoList

philadelphia / 878人閱讀

摘要：子組件中通過就可以拿到上的數(shù)據(jù)了，實現(xiàn)了從父組件子組件的數(shù)據(jù)傳遞。當(dāng)前狀態(tài)改變時要發(fā)生的副作用。通過裝飾器調(diào)用的函數(shù)進(jìn)行使用。理想情況下，大部分組件都應(yīng)該是無狀態(tài)組件，僅通過獲得數(shù)據(jù)。通過調(diào)用中的改變狀態(tài)。

Todo-list

這是一個用來初步了解如何通過 React + Mobx 構(gòu)建應(yīng)用的 DEMO，通過 Webpack 進(jìn)行打包。
技術(shù)棧： React + Mobx + React-Mobx + SCSS。
由于剛接觸 React 不久，寫的不好或者有誤還請指出，萬分感謝。

React

React 是一個用于構(gòu)建用戶界面的 JavaScript 框架，也就是說 React 是一個 UI 框架，他把重點放在了 MVC 中的 V(View) 層上。

聲明組件

React 可以通過 ES6 的 class 來聲明一個自定義組件，該組件繼承基類 React.Component 的所有屬性和方法。

class MyComponent extends React.Component {
  render () {
    return (
      // jsx
    )
  }
}

這里有幾點要強(qiáng)調(diào)的地方：

1.原生 HTML 標(biāo)簽以小寫開頭，自定義 React 組件的首字母要大寫。

2.JSX 語法很類似 XML，它不是必須的，但我覺得用它來編程很方便。

3.組件內(nèi)的 render 函數(shù)是必須的，它返回一顆組件樹，最終會被渲染成 HTML。

掛載虛擬 DOM

實例化根組件，啟動框架，將虛擬的 DOM 節(jié)點掛載到真實的 DOM 節(jié)點。

ReactDOM.render(jsx, DOM)
React 組件的狀態(tài) 
class MyComponent extends React.Component {
  constructor (...arg) {
    super(...arg)
    // 定義組件的初始狀態(tài)
    this.state = {
      //...
      name: "Couzin"
    }
  }
  handlerClick () {
    // 調(diào)用后觸發(fā)重新渲染
    this.setState = {
      name: "HUnter"
    }
  }
  render () {
    return (
      

        

    )
  }
}
class Child extends React.Component {
  render () {
    return (
      

        
{this.props.author}

      

    )
  }
}

子組件中通過 this.props 就可以拿到 props 上的數(shù)據(jù)了，實現(xiàn)了從 父組件 ------> 子組件的數(shù)據(jù)傳遞。
另外再提及一下 this.props.children：

class Father extends React.Component {
  render () {
    return (
      

        {/* ... */}
        
          
hello world

        
      

    )
  }
}
class Child extends React.Component {
  render () {
    return (
      

        
{this.props.author}

        {this.props.children}
        {/* 相當(dāng)于
hello world
 */}
      

    )
  }
}

也就是說 this.props.children 就是組件內(nèi)嵌套的元素。

了解了上面的這些使用方法，差不多就可以開始簡單的使用 React 了。

Mobx

Mobx 是一個狀態(tài)管理工具，它可以把你的應(yīng)用變?yōu)轫憫?yīng)式。
Mobx 提供狀態(tài)給 React 使用，下面有一些概念

observable state （可觀察狀態(tài)）

Mobx 為現(xiàn)有數(shù)據(jù)結(jié)構(gòu)添加了可觀察的功能，只需要通過 @observable 這個裝飾器就可以使你的屬性變?yōu)榭捎^察的。

class MyStore {
  @observable myName = "hunter"
}
derivation （衍生）

任何源自 state 并且不會再有進(jìn)一步相互作用的東西就是衍生。Mobx 有兩種類型的衍生：

computed values 從當(dāng)前可觀察狀態(tài)中衍生出的值。

reactions 當(dāng)前狀態(tài)改變時要發(fā)生的副作用。

computed values

當(dāng)相關(guān)數(shù)據(jù)變化時會自動更新。通過 @computed 裝飾器調(diào)用的 setter／getter 函數(shù)進(jìn)行使用。

class MyStore {
  @observable myName = "HUnter"

  @computed get getNameLength () {
    return this.myName.length
  }
}
reactions

reactions 與 computed values 相比起來使用較少，它是當(dāng)前狀態(tài)改變所觸發(fā)的副作用。

actions （動作）

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

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

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

Mobx-React

上面簡單介紹了 Mobx 的使用，我們知道當(dāng) React 組件中 state 變化后，要通過 setState 來觸發(fā)視圖的更新，Mobx 中定義了 React 組件中的 state 以及如何修改 state，那么怎么在 state 改變后觸發(fā)視圖的更新呢？Mobx-React 提供了 observer 將 React 組件的轉(zhuǎn)變?yōu)轫憫?yīng)式組件，確保 state 改變時可以強(qiáng)制刷新組件。做法很簡單：

@observer
class MyComponent extends React.Component {
  // ...
}
React + Mobx 使用的步驟

1.定義 observable state

class Store {
  @observable data = []

  // @computed ...

  // @action ...
}

2.創(chuàng)建視圖
通過 React 創(chuàng)建視圖時，推薦創(chuàng)建無狀態(tài)組件，即組件內(nèi)沒有內(nèi)部的 state 和 生命周期函數(shù)。理想情況下，大部分組件都應(yīng)該是無狀態(tài)組件，僅通過 props 獲得數(shù)據(jù)。

@observer
class MyComponent extends React.Component {

}

3.通過調(diào)用 Mobx 中的 actions 改變狀態(tài)。

@observer
class MyComponent extends React.Component {
  render () {
    let store = { this.props }
    return (
      

         
      

    )
  }
}

上面大致講了如何簡單使用 React + Mobx 來實現(xiàn)一個簡單的應(yīng)用，描述的比較淺顯。具體源碼請見 github。

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

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

相關(guān)文章

  • MobX入門TodoList

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

    csRyan 評論0 收藏0

  • React+TypeScript+Mobx+AntDesignMobile進(jìn)行移動端項目搭建

    摘要：通過裝飾器或者利用時調(diào)用的函數(shù)來進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時，會監(jiān)聽數(shù)據(jù)變化確保通過觸發(fā)方法自動更新。只能影響正在運(yùn)行的函數(shù)，而無法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個移動端項目搭建，主要介紹項...

    lindroid 評論0 收藏0

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

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

    0x584a 評論0 收藏0

  • react+mobx+thrift學(xué)習(xí)demo

    摘要：安裝等相關(guān)依賴。通過啟動項目，進(jìn)行后續(xù)操作。自定義執(zhí)行狀態(tài)的改變。任何不在使用狀態(tài)的計算值將不會更新，直到需要它進(jìn)行副作用操作時。強(qiáng)烈建議始終拋出錯誤，以便保留原始堆棧跟蹤。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 寫法 step 2 mobx 了解&使用 step 3 thrift接口調(diào)用過程 Re...

    xcc3641 評論0 收藏0

  • React全家桶環(huán)境搭建過程

    摘要：環(huán)境搭建從零開始搭建開發(fā)環(huán)境引入安裝依賴新建修改引入并支持安裝依賴打包時將樣式模塊化，我們可以通過或引入樣式，并且相互不沖突。修改，引入創(chuàng)建使用語法報錯修改引入狀態(tài)管理使用裝飾器語法修改修改源碼 環(huán)境搭建 1.從零開始搭建webpack+react開發(fā)環(huán)境 2.引入Typescript 安裝依賴 npm i -S @types/react @types/react-domnpm i -...

    Genng 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<