通過 React + Mobx 實現簡單的 TodoList

philadelphia 發布于2019-08-20 16:48 / 841人閱讀

摘要：子組件中通過就可以拿到上的數據了，實現了從父組件子組件的數據傳遞。當前狀態改變時要發生的副作用。通過裝飾器調用的函數進行使用。理想情況下，大部分組件都應該是無狀態組件，僅通過獲得數據。通過調用中的改變狀態。

Todo-list

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

React

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

聲明組件

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

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

這里有幾點要強調的地方：

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

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

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

掛載虛擬 DOM

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

ReactDOM.render(jsx, DOM)

React 組件的狀態

class MyComponent extends React.Component {
  constructor (...arg) {
    super(...arg)
    // 定義組件的初始狀態
    this.state = {
      //...
      name: "Couzin"
    }
  }
  handlerClick () {
    // 調用后觸發重新渲染
    this.setState = {
      name: "HUnter"
    }
  }
  render () {
    return (
      
        
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      
        {this.props.author}
      
    )
  }
}

子組件中通過 this.props 就可以拿到 props 上的數據了，實現了從父組件 ------> 子組件的數據傳遞。
另外再提及一下 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}
        {/* 相當于hello world */}
      
    )
  }
}

也就是說 this.props.children 就是組件內嵌套的元素。

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

Mobx

Mobx 是一個狀態管理工具，它可以把你的應用變為響應式。
Mobx 提供狀態給 React 使用，下面有一些概念

observable state （可觀察狀態）

Mobx 為現有數據結構添加了可觀察的功能，只需要通過 @observable 這個裝飾器就可以使你的屬性變為可觀察的。

class MyStore {
  @observable myName = "hunter"
}

derivation （衍生）

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

computed values 從當前可觀察狀態中衍生出的值。

reactions 當前狀態改變時要發生的副作用。

computed values

當相關數據變化時會自動更新。通過 @computed 裝飾器調用的 setter／getter 函數進行使用。

class MyStore {
  @observable myName = "HUnter"

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

reactions

reactions 與 computed values 相比起來使用較少，它是當前狀態改變所觸發的副作用。

actions （動作）

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

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

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

Mobx-React

上面簡單介紹了 Mobx 的使用，我們知道當 React 組件中 state 變化后，要通過 setState 來觸發視圖的更新，Mobx 中定義了 React 組件中的 state 以及如何修改 state，那么怎么在 state 改變后觸發視圖的更新呢？Mobx-React 提供了 observer 將 React 組件的轉變為響應式組件，確保 state 改變時可以強制刷新組件。做法很簡單：

@observer
class MyComponent extends React.Component {
  // ...
}

React + Mobx 使用的步驟

1.定義 observable state

class Store {
  @observable data = []

  // @computed ...

  // @action ...
}

2.創建視圖
通過 React 創建視圖時，推薦創建無狀態組件，即組件內沒有內部的 state 和生命周期函數。理想情況下，大部分組件都應該是無狀態組件，僅通過 props 獲得數據。

@observer
class MyComponent extends React.Component {

}

3.通過調用 Mobx 中的 actions 改變狀態。

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

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

云服務器 GPU云服務器 js實現的簡單特效用c實現簡單的shell java實現簡單的web服務器 react實現輪播圖

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

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

MobX入門TodoList

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

csRyan 2019-08-26 10:26 評論0 收藏0
React+TypeScript+Mobx+AntDesignMobile進行移動端項目搭建

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

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

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

0x584a 2019-08-21 17:19 評論0 收藏0
react+mobx+thrift學習demo

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

xcc3641 2019-08-23 11:44 評論0 收藏0
React全家桶環境搭建過程

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

Genng 2019-08-22 17:20 評論0 收藏0