版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/80229936
简介
react 是一个基于 mvvm 模式的组件化开发的 web 框架。
做 react 项目需要掌握什么
- react 功能单一,用于 UI 渲染
- redux 用来管理数据
- react-router 用来管理路由
- webpack 用来配置工程
- ES6 让代码更加优雅简洁
具体使用了些什么
dva
- 框架:dva 是一个前端应用框架,集成了 redux,redux-saga,redux-router-redux,react-router
- 快速初始化: 可以快速实现项目的初始化,不需要繁琐地配置
- 简洁的 api: 整个项目中只有 dva、app.model、app.router、app.use、app.start 几个 API
- 简洁开发:将 initState、saga、reducer 集成到一个 model 里面统一管理,避免文件散落在各个文件里面,便于快速查找与开发
mobx + react
- 库:用于进行状态管理的库
- 官方文档还不够友好
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/