經過 React + Mobx 實現簡單的 TodoList

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 (
      <div>
        <button
          onClick="this.handlerClick.bind(this)
        >click</button>
      </div>
    )
  }
}

state 是組件私有的，能夠經過 setState 來修改 state，而且觸發 View 的從新渲染。

傳遞 props

當一個組件依賴父組件中的數據時，就須要用 props 來傳遞數據了。

class Father extends React.Component {
  render () {
    return (
      <div>
        {/* ... */}
        <Child author="HUnter" />
      </div>
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      <div>
        <p>{this.props.author}</p>
      </div>
    )
  }
}

子組件中經過 this.props 就能夠拿到 props 上的數據了，實現了從 父組件 ------> 子組件的數據傳遞。
另外再說起一下 this.props.children：

class Father extends React.Component {
  render () {
    return (
      <div>
        {/* ... */}
        <Child author="HUnter">
          <h1>hello world</h1>
        </Child>
      </div>
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      <div>
        <p>{this.props.author}</p>
        {this.props.children}
        {/* 至關於<h1>hello world</h1> */}
      </div>
    )
  }
}

也就是說 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 (
      <div>
        <input onChange={store.setName} /> 
      </div>
    )
  }
}

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