React項目的最佳實踐

項目代碼 從零開始簡書項目

​ 從我第一次接觸vue這個框架已通過了快一年的時間,陪伴我從前端小白到前端工程師,前端時間也是使用了 ts+vue這樣的組合寫代碼,明顯感受vue與ts彷佛沒有產生比較好的化學反應,而vue這一塊,也算是比較熟練了,對底層也有一些瞭解,我開始了react的產生了一些興趣

​ 第一次看react慕課網上的一個免費課程React 16實現訂單列表及評價功能,還不錯,讓我大體瞭解了react也就是jsx的一些代碼風格

由於可能寫vue的時間比較久了,轉到react尚未我想象的的難度那麼大,一切彷佛都順風順水,後面我就開始看慕課網的React 16.4 開發簡書項目 從零基礎入門到實戰,老師將前面基礎講的比較全面,雖然沒有過api,可是講了 react的周邊 redux, redux-thunk, redux-saga react-redux ,等等,老師是頗有水平

​ 可是正在寫課程代碼裏面 用了大量的這樣的庫,我在學的過程裏面,感受不太理解這些庫的內部實現,這一點感受到react上面的一些吃力的地方,還有待學習吧,目前只能是入門了react,感受如今的前端開發,不是會js,就能寫出代碼的了,要學習各類各樣的各類庫的API,只會用,不瞭解其原理,今年是這個庫,明年是哪一個庫,已經不是前端開發者了 是前端框架使用者學習成本太高,陷入到一種比較迷茫的階段,有點不知所措,

本次總結的重點,總結老師的項目架構,數據與數據與視圖的徹底解耦,是一個很是完美的開發方式,同時具有靈活性,可是很是萬金油,項目這樣搭建,很是易於維護

看一些最後的效果圖

使用到的技術棧

react react-dom react項目開發必備

---

redux react的數據管理工具

redux-thunk redux的中間件,讓redux的dispatch支持異步操做

immutable 保證數據的不可變性,配合PureComponent使用,效果拔羣

---

styled-components 使用js的方式寫css,是比less,更加好用的工具

react-transition-group react裏面比較好用的動畫庫

---

axios 支持Promise的ajax庫

mockjs 數據模擬庫 使用他將不在須要在接觸第三方去生成接口

---

react-loadable 讓react能夠異步加載組件的插件

---

react-router-dom react的路由處理庫react-router和react-router-dom的區別

使用的技術比較多,是很完成的項目開發方式

頁面與redux的交互

pages
 - index
  - store
    - index.js store的出口
    - reducer.js 組件中數據的建立於修改
    - actiontypes.js 定製統一的type值,用於修改reducer裏面的值
    - actionCreators.js 生成action,觸發reducer,去進行數據修改
  - index.js 視圖
  - style.js styled css

每一個頁面結構都是這樣的,在最外面的reducer裏面進行每一個頁面中的reducer的合併,這樣作達到了

頁面中的視圖與數據的徹底解耦

頁面與頁面以前的數據徹底解耦

項目結構變得很是清楚,很是利於維護

修改一個數據的流程

1. 在組件的視圖中, 經過 react-redux裏面的connent獲取state dispatch,庫幫咱們將state dispatch 掛載到了this.props中,

const mapState = state => ({
    title: state.detail.get('title'), //  immutable數據 獲取state樹中的detail分支下的title
    content: state.detail.get('content')
  })
  const mapDispatch = dispatch => ({
    getDetail(id) { // 視圖中觸發該方法 方法內部觸發dispatch 獲取由actionCreators生成的action,交給reducer
      //.. 發送dispatch 操做reducer
    }
  })

  export default connect(
    mapState,
    mapDispatch
  )(withRouter(Detail))

1. 導入當前文件夾下的store/actionCreaters.js ,在mapDispatch裏面發送action給reducer

const mapDispatch = dispatch => ({
    getDetail(id) { 
      // 視圖中觸發該方法 方法內部觸發dispatch 獲取由actionCreators生成的action,交給reducer
      reducer dispatch(actionCreators.getDetail(id))
    }
  })

1. 在actionCreators.js中已經異步操做,或者直接發放action

import { actionType } from './index' // 全部數據來源於index中
import axios from 'axios'
import { fromJS } from 'immutable'

function _getDetail(data) { // 私有方法
  return {
    type: actionType.GET_TEXT_DETAIL, //action後返回出去 視圖中的dispatch action
    data: fromJS(data)
  }
}
// 
function getDetail (id) { 
  return dispatch => {
    //攜帶動態參數
    // axios.get(`/textdetail?id=${id}`)
    axios.get(`/textdetail`)
    .then(res => {
      console.log(res.data);
      dispatch(_getDetail(res.data))
    })
    .catch(res => {
      console.log(res);
    })
  }
}


export default {
  getDetail // 暴露出去改視圖調用
}

這裏就必定看看store/index.js是這麼協調數據的

import actionCreators from './actionCreators'
import actionType from './actionType'
import reducer from './reducer'

export { reducer, actionType, actionCreators }

很簡單,就是將單個store的入口統一了

上面的actionCreators.js導入了actionType

因此咱們看看store/actionType寫了什麼數據

export default  {
  GET_TEXT_DETAIL: "get_text_detail"
}

對,就是action的type的倉庫,如今dispatch已經獲得了action,reducer裏面的就會接收到dispatch發送的action

import { actionType } from './index'
import { fromJS } from 'immutable'
const defaultState = fromJS({
  title: '',
  content: ``,
})


export default (state = defaultState, action) => {
  switch (action.type) {
    case actionType.GET_TEXT_DETAIL:
    console.log(action.data);
      return state.merge({
        title: action.data.get('title'),
        content: action.data.get('content')
      })
    default:
      return state
  }
}

這裏就是匹配type,咱們的type都從一個地方獲取的,保證了代碼出現失誤的概率,經過 state.merge() 改變多條數據,頁面發生變化,這就完成了數據的變化

雖然過程很複雜,可是明顯感受到,代碼耦合性很是低,決定了這樣會的項目結構能夠完成比較大型的項目,

這裏說的可能不是很清楚 能夠看github上面的項目代碼從零開始簡書項目