簡介

react 是一個基於 mvvm 模式的元件化開發的 web 框架。

做 react 專案需要掌握什麼

• react 功能單一，用於 UI 渲染
• redux 用來管理資料
• react-router 用來管理路由
• webpack 用來配置工程
• ES6 讓程式碼更加優雅簡潔

具體使用了些什麼

• dva

  1. 框架：dva 是一個前端應用框架，集成了 redux,redux-saga,redux-router-redux,react-router
  2. 快速初始化: 可以快速實現專案的初始化，不需要繁瑣地配置
  3. 簡潔的 api： 整個專案中只有 dva、app.model、app.router、app.use、app.start 幾個 API
  4. 簡潔開發：將 initState、saga、reducer 整合到一個 model 裡面統一管理，避免檔案散落在各個檔案裡面，便於快速查詢與開發

• mobx + react

  1. 庫：用於進行狀態管理的庫
  2. 官方文件還不夠友好

dva

定義 dva 中的 model：

export default {
  namespace: "user", // 命名模組名稱
  state: {
    // model中的狀態
 

    profile: null
  },
  subscriptions: {
    //元件的所有生命週期都可以在這裡找到對應的api去呼叫
    setup({ dispatch }) {
      dispatch({
        type: "initUserInfo"
      });
    }
  },
  effects: {
    // 處理所有的網路請求
    *initUserInfo({ payload }, { call, put, select }) {
      let userState = yield select(state => state.user.profile);
      let
 
 user = yield call(userService.fetUserInfo);
      if (!userState) {
        yield put({
          type: "setUserProfileReducer",
          profile: user
        });
      }
    }
  },
  reducers: {
    // 改變state
    setUserProfileReducer(state, { profile }) {
      return {
        ...state,
        profile
      };
    }
  }
};

• namespace： model 的命名
• state：model 裡面的資料
• subscriptions：常用的是在元件渲染之前觸發
  
  • setup
• effects：所有網路請求都應該放在這裡面，應為它使用了 generator 來處理非同步，這裡是唯一一個地方可以處理非同步請求的。
  
  • *網路請求(入參，{call, put, select}){}
  • const data = yield call( apiFunction ); // 發起網路請求，獲取請求回來的結果
  • const data = yield put( { type : “save” , payload :{data} ); // 觸發 reducer，改變 state
  • const data = yield select( { modelName } => modelName.stateValue ); // 所有的 model 的 state 都是共享的，你可以在其他的 model 中拿到這個 model 的 state。
  • import { routerRedux } from ‘dva/router’; yield put( routerRedux.push(“/targit”)); // 元件之間的跳轉使用
• reducers：改變 state 的函式
  
  • 方法(state,{newstate}) // 當前 model 的 state 和資料，以及傳入的資料，對 state 進行修改。

dispatch({ type: ‘fetch’}); //如果是當前 model 可以直接寫方法名如果是別的 model 的那你需要前面加上 model 名字 { type: ‘OtherModel/fetch’}

在元件中使用 model：

• 通過函式引數方式傳入

import { connect } from "dva";
// dispatch 用來發起一個請求
const IndexPage = ({ dispatch, state }) => {
  // 在元件的事件中觸發
  function(){
    dispatch({
      type : "modelName/name"
      payload : ""
    })
  }
  return <Index />;
};
// 使用dva的connect方法連線元件和model
export default connect(({ state }) => ({
  state
}))(IndexPage);

• 也可以用 class 來宣告一個元件

import { connect } from "dva";
class AppointmentPage extends React.Component {
  handleClick(){
    // dispatch方法會在this.props裡面。
    this.props.dispatch({
      type: 'modelName/name'
    })
  }
  render(){
    return (...)
  }
}
export default connect(({ modelName }) => ({
 modelName
}))(Component);

學習 dva 的一些體悟 https://juejin.im/post/59c5b29b5188257e8c55000b

mobx

編寫 store:

import { observable, action } from "mobx";
class MyStore {
  @observable list = [];
  @computed
  get total() {
    return this.price * this.amount;
  }
  @action
  async fetch({ payload, resolve, reject }) {
    try {
      let res = await services.fetch(payload);
      if (res) {
        this.list = res.data.data;
        resolve && resolve();
      }
    } catch (e) {
      reject && reject();
      console.error(e);
    }
  }
}
const myStore = new MyStore();
export default myStore;

• @observable 將狀態轉換成可觀察的
• @computed 計算值，根據現有的狀態或者其他計算值衍生出來的值
• @action 動作，用來修改狀態的
  
  • {payload，resolve，reject} payload：入參 resolve 成功的回撥 reject 失敗的回撥 // 這些入參都是自定義的
  • const data = await services.fectch(payload); // await 執行非同步的請求 payload 為請求的入參
  • this.state = 新的值

在元件中使用 mobx：

import { inject, observer } from 'mobx-react';
@inject('MyStore')
@observer
class Example extends React.Component{
  componentDidMount() {
    this.props.MyStore.fetch()
  }
}
export defaultExample;

• @inject 注入這個 store
• @observer 將 react 元件轉變成響應式元件

store 將存在於元件的 props 中。更多 api 請移步： http://cn.mobx.js.org/