做react项目总结

简介

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/

简介

做 react 项目需要掌握什么

具体使用了些什么

dva

mobx

猜你喜欢