項(xiàng)目目錄

image

組織架構(gòu)

react16.x、react.hooks、react.lazy組件懶加載、react-router4.x 、redux、sass

使用官方腳手架創(chuàng)建項(xiàng)目

• 1、安裝裝官方腳手架 create-react-app

$ npm install create-react-app -g 
# or
$ yarn add global create-react-app  

• 2、初始化react項(xiàng)目

# 創(chuàng)建
$ create-react-app myproject

#啟動(dòng)
$ cd myproject
$ yarn start # or npm start

路由

1、路由抽離成配置文件

2、路由組件懶加載

src/router.js

import React from 'react'

const Home = React.lazy(()=>import(/*webpackchunkname:Home*/'@/pages/Home' ))
const Dashboard = React.lazy(()=>import(/*webpackchunkname:Home*/'@/pages/Dashboard' ))

export default [
    {
        path:'/',
        exact:true,
        component:Home
    },
    {
        path:'/dashboard',
        component:Dashboard
    }
]

每個(gè)路由配置都是一個(gè)對(duì)象，包含path、exact、（component|render|children）屬性，從app.jsx中可以知道，路由配置對(duì)象就是route的屬性列表。

路由組件則采用react提供的react.lazy方法進(jìn)行路由懶加載，降低首屏渲染的時(shí)間，react.lazy需要和Suspense組件配套使用,如下，用Suspense組件包裹根組件，fallback是過渡組件，必傳

src/app.jsx

import React, { Suspense } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import routes from '@/router'
import "./assets/scss/global.scss";

function App() {
  return (
    <Suspense fallback={<div></div>}>
      <BrowserRouter>
        {
        //遍歷配置文件，生成路由列表
          routes.map((route)=>{
            return (
            //路由配置中的全部屬性作為Route的屬性
              <Route {...route} />
            )
          })
        }
      </BrowserRouter>
    </Suspense>
  );
}

export default App;

redux狀態(tài)管理-使用

項(xiàng)目中將redux按照頁面模塊拆分，即每個(gè)頁面一個(gè)reducer，這樣結(jié)構(gòu)更加清晰便于維護(hù)

拿list組件為例（src/pages/List）,每個(gè)頁面組件由3個(gè)文件組成，index.jsx、index.scss、model.js(可以沒有)

先介紹怎么用，后面介紹實(shí)現(xiàn)方發(fā)

model.js

export default {
    namespace:'List',
    initState:{
        homeMsg:'hello list'
    },
    promise:{
        getAjaxData(){
            return async dispatch =>{
                await ftech('http://test.cn/api')
            }
        }
    },
    actions:{
        changeListMsg(state,listMsg){
            return {
                ...state,
                homeMsg:stMsg
            }
        }
    }
}

可以看到每個(gè)model由四部分組成：

• namespaced:redux模塊名，一般以頁面名稱命名
• initState：初始的state值
• promise：異步action
• actions：普通action

同步action返回的是最終的state，這個(gè)會(huì)在封裝的connect函數(shù)中處理成標(biāo)準(zhǔn)的action，后面會(huì)說到

定義好model之后，在組件中使用

src/pages/List/index.jsx

import React from "react";
import connect from "@/store/connect";  //connect方法基于react-redux二次封裝，后面會(huì)說
import model from "./model";

import { Button } from "antd";

const List = function(props) {
  const { listMsg, changeListMsg } = props; 
  return (
    <div>
      <p>listMsg：{listMsg}</p>
      <Button
        onClick={() => {
          changeListMsg("改變后的listMsg");
        }}
      >
        改變listMsg
      </Button>
    </div>
  );
};

export default connect(model)(List);

如上，在使用封裝的connect傳入model將List組件包裝之后，就可以直接帶props里面獲取到該model下面的state和同、異步action并直接在組件中使用

有時(shí)候可能會(huì)遇到需要跨模塊訪問的問題，例如在List組件中要使用Home組件的model

src/pages/Home/model

export default {
    namespace:'Home',
    initState:{
        homeMsg:'hello home'
    },
    promise:{
        getAjaxData(){
            return async dispatch =>{
                await sleep(3000)
            }
        }
    },
    actions:{
        changeHomeMsg(state,homeMsg){
            return {
                ...state,
                homeMsg:homeMsg
            }
        }
    }
}

這時(shí)候只需要把Home的model傳入即可

import React from "react";
import connect from "@/store/connect";  //connect方法基于react-redux二次封裝，后面會(huì)說
import ListModel from "./model";
import HomeModel from "../Home/model";

import { Button } from "antd";

const List = function(props) {
  const { Home,List changeListMsg } = props; 
  return (
    <div>
      <p>listMsg：{List.listMsg}</p>
      <p>HomeMsg：{Home.homeMsg}</p>
      <Button
        onClick={() => {
          changeListMsg("改變后的listMsg");
        }}
      >
        改變listMsg
      </Button>
      <Button
        onClick={() => {
          changeHomeMsg("改變后的homeMsg");
        }}
      >
        改變homeMsg
      </Button>
    </div>
  );
};

export default connect([ListModel,HomeModel])(List);

需要注意的是，當(dāng)mode傳入多個(gè)的時(shí)候，connect會(huì)將每個(gè)model下面的state分別放在一個(gè)對(duì)象中，對(duì)象名就是model的namespace,但是action和promise是都打平到props中的，所以如同一個(gè)組件用到了多個(gè)模塊，保證這些模塊的action、promise的名字相互不重復(fù)

redux狀態(tài)管理-封裝

1、因?yàn)槭菍?duì)store進(jìn)行模塊拆分的，第一步我們需要先將全部的模塊合并成一個(gè)集合，這里采用了遍歷引入的方法，避免重復(fù)的去寫引用的代碼

src/store/model.js

//modelMap是所有模塊的映射，
//可以是模塊名字符串，也可以是數(shù)組
//當(dāng)模塊（也就是model的路徑）路徑是src/page/xxx/model.js的時(shí)候，可以直接傳模塊名
//當(dāng)需要指定模塊路勁的時(shí)候，傳入第二個(gè)參數(shù)就是模塊路徑
const modelMap = [
    'Home',
    ['List','src/pages/List/index']
]

const models = []
modelMap.forEach(model=>{
    if(Array.isArray(model)){
        models.push(require(`@/${model[1]}`).default)
    }else{
        models.push(require(`@/pages/${model}/model`).default)
    }
})

//models為所有的model集合

export default models

2、合并好model之后我們需要?jiǎng)?chuàng)建reducers，將創(chuàng)建好的models遍歷創(chuàng)建應(yīng)用的reducers

src/store/index.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "@/store/middleware/thunkMiddle";
import logger from "redux-logger";

import models from "./model";

//這里實(shí)際上是根據(jù)models手動(dòng)實(shí)現(xiàn)了combineReducers類似的功能
const reducers = (state = {}, acts) => {
  const result = {};
  models.forEach(({ namespace, initState, promise, actions }) => {
    result[namespace] = ((innerState, innerAction) => {
      // type名稱為 namespace/action，例如：Order/add
      const [modeName, type] = innerAction.type.split("/");
      if (namespace !== modeName) return innerState;

      // 有指定的action的情況
      if (actions[type]) return actions[type](innerState, innerAction.payload);

      // 如果type名稱是以Up結(jié)尾，則創(chuàng)建修改對(duì)應(yīng)state的action
      if (/^(\w+)Up$/.test(type) && innerState[RegExp.$1] !== undefined) {
        return {
          ...innerAction,
          [RegExp.$1]: innerAction.payload
        };
      }
      //中間件自己觸發(fā)的action（不在action列表中）將state和payload合并
      return {...innerState,...innerAction.payload}
    })(state[namespace] || initState, acts);
  });
    //result最終的結(jié)構(gòu)是
    //{
    // modelA:{...modelaState},
    // modelB:{...modelbState}
    //}  
    //與combineReducers生成方法的返回值結(jié)構(gòu)一致
  return result;
};

//開發(fā)環(huán)境對(duì)谷歌插件react-devtool的支持
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//只有在開發(fā)環(huán)境的時(shí)候才啟用谷歌插件react-devtool
const store =
  process.env.NODE_ENV === "production"
    ? createStore(reducers, applyMiddleware(thunk,logger))
    : createStore(
        reducers,
        composeEnhancers(applyMiddleware(thunk,logger))
      );

export default store;

3、生成redux標(biāo)準(zhǔn)的action

就每個(gè)model下面的actions和promise來說，都不屬于redux能識(shí)別的action，所以我們需要根據(jù)每個(gè)模塊的model來生成對(duì)應(yīng)的action，因?yàn)槊總€(gè)用到redux的組件都會(huì)調(diào)用connect，那最好的實(shí)現(xiàn)地方就是在connect方法中

src/store/connect.js

import { connect } from "react-redux";

/**
 * @param {Object | Array<Object>} model store模塊對(duì)象或者模塊對(duì)象列表
 * @param {[String]} namespace 指定namespace，只有當(dāng)model是數(shù)組的的時(shí)候才可能傳改參數(shù)，作用是將指定的model下的state打散合并到props中，也可以不傳，那么state將以模塊名分類合并到props
 */
export default (model, namespace) => {
  const acts = {};
  let resnameSpace = namespace || null
  if (Array.isArray(model)) {
    model.forEach(MapActions);
  } else {
    resnameSpace = model.namespace
    MapActions(model);
  }
  function MapActions(curModel) {
    const { namespace, promise=[], actions=[] } = curModel;
    //將model.actions轉(zhuǎn)化成redux能識(shí)別的同步action
    Object.keys(actions).forEach(acName => {
      acts[acName] = payload => ({
        type: `${namespace}/${acName}`,
        payload
      });
    });

    // 異步action
    promise &&
      Object.keys(promise).forEach(name => {
        // acts[name] = promise[name]//(...params) => promise[name](...params);
        acts[name] = ()=>{
          //異步action都自動(dòng)添加一個(gè)loadingName，用于自動(dòng)生成loading狀態(tài)
          //為了后續(xù)寫對(duì)應(yīng)的redux中間件做鋪墊
          let a = promise[name]()
          a.namespace = namespace
          a.loadingName = name
          return a
        }
      });
  }
  return connect(
    state => resnameSpace?state[resnameSpace]:state,
    acts
  );
};

4、redux中間件

前面只是對(duì)普通的actions做了相應(yīng)的處理，異步actions沒有做處理，所以我們需要編寫一個(gè)redux中間件來處理異步action,該中間件主要實(shí)現(xiàn)兩個(gè)功能

• 1、增強(qiáng)dispatch對(duì)函數(shù)action的支持，從而能實(shí)現(xiàn)異步操作
• 2、在異步action將要執(zhí)行和執(zhí)行完畢之后都添加對(duì)應(yīng)的狀態(tài)，狀態(tài)名為${actionname}LoadingState,用于做頁面局部的loading樣式展現(xiàn)

src/store/middleware/thunkMiddle.js

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => async action => {
    //擴(kuò)展dispatch方法
    //當(dāng)actionType傳string時(shí)，格式應(yīng)該為 `${namespace}/${actionname}`
    //當(dāng)actionType傳對(duì)象是，格式為標(biāo)準(zhǔn)的action格式{type:action-type,payload:payload-data}
    let dispatchPlus = (actionType, payload) => {
      if (typeof actionType === "string") {
        dispatch({
          type: actionType,
          payload
        });
      } else {
        dispatch(actionType);
      }
    };
    if (typeof action === "function") {

      //為每一個(gè)異步action自動(dòng)注入一個(gè)loadingState狀態(tài)，狀態(tài)名字為`${actionname}LoadingState`
      //當(dāng)異步action開始執(zhí)行的時(shí)候，loadingState狀態(tài)將設(shè)置為1，表示異步操作正在loading
      //當(dāng)一部action執(zhí)行完畢之后，loadingState將設(shè)置為2，表示異步操作已經(jīng)結(jié)束
      //可用于做局部或者頁面的loading狀態(tài)
      function createLoadStateAction(action,loadState){
        return {
          type:`${action.namespace}/${action.loadingName}Loading`,
          payload:{
            [`${action.loadingName}LoadingState`]:loadState,
          }
        }
      }
      dispatch(createLoadStateAction(action,1))
      let reutrns = await action(dispatchPlus, getState, extraArgument);
      dispatch(createLoadStateAction(action,2))
      return reutrns
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

5、項(xiàng)目根組件注入store

萬事具備之后，我們只需要將store注入到應(yīng)用就可以正常使用了

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import store from '@/store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

未完 --