使用React改版網站後的一些感想

文章轉載：http://www.jianshu.com/p/8f74cfb146f7

網站是畢業設計的做品，開發這個網站的目的主要用於記錄一些筆記，以及聚合一些資訊信息，也算本身在網絡世界中的一塊靜地吧，能夠在這裏一些技術上想法的實踐。

網站最初前端使用vue開發，在前段時間因爲項目的開發進度已經不是那麼緊急，有了一些空閒時間。而對沒有使用過React又一直耿耿於懷，索性就使用React進行了一次前端的重構。

學習一門新的技術最基本的固然就是閱讀相關文檔了，做爲一個單頁面應用前端路由固然是不可能少了，而使用React若是不使用Reduce那又感受發揮不其做用(雖然他們其實也沒什麼必須的關係)。因此在這裏使用了react，react-router，react-redux，如下爲在使用React開發中的一些見聞，有幸被你看到該文，若有不對之處，還望指出，若是你不當心被帶入坑，本人概不負責。

首先就是閱讀React的文檔了，文檔使用大量舉例的形式介紹如何使用React進行開發，如如何設計state，props，如何組件間通訊，如何設計組件等。文檔雖然進行了詳細的介紹，可是每每仍是須要真正的實踐才能發現其中的妙處。如state，props的設計，在一個X組件中擁有Y，Z兩個組件，假設Y組件擁有一個輸入框，而Z組件可能須要用到Y組件輸入的值作出必定的變化，固然若是把他們寫到一塊兒也不是不能夠的，可是考慮到組件複用，功能單一等因素仍是拆開比較合理，那麼這個值到底應該哪一個組件來儲存呢？以下兩個組件分別爲Y，X，這樣設計明顯是不符合state設計的，擁有太多冗餘部分。

class InputComponent extends Component {
  constructor () {
    super()
    this.state = {
      value: ''
    }
  }
  valInput (e) {
    let value =  e.target.value
    this.setState({value})
    this.props.inputChange(value)
  }
  render () {
    return <input onChange={this.valInput.bind(this)}/>
  }
}

class ParentComponent extends Component {
  constructor () {
    super()
    this.state = {
      val: ''
    }
  }
  inputChange (val) {
    this.setState({val})
  }
  render () {
    return (
      <section>
        {this.state.val}
        <InputComponent inputChange={this.inputChange.bind(this)}/>
      </section>
    )
  }
}

若是使用以下的寫法或許看起來更好

class InputComponent extends Component {
  render () {
    let {val, inputChange} = this.props
    // 這裏的val並非必須的，可是當一個值來自非輸入控件的時候，如可編輯的div，ace在每次執行render函數的時候都會致使原來輸入的值被清空。
    return <input value={val} onChange={inputChange}/>
  }
}

class ParentComponent extends Component {
  constructor () {
    super()
    this.state = {
      val: ''
    }
  }
  inputChange (e) {
    this.setState({val: e.target.value})
  }
  render () {
    let val = this.state.val
    return (
      <section>
        {val}
        <InputComponent val={val} inputChange={this.inputChange.bind(this)}/>
      </section>
    )
  }
}

react-router提供了前端路由基本的需求，根據須要使用到的功能在項目文檔介紹中便可找到具體使用方法。基本的配置和其餘框架也是大同小異，可是不少API的使用確有些截然不同(和vue相比)，仍是須要仔細通讀文檔的，以避免在開發中出現問題再去解決浪費時間，如IndexRoute在vue中能夠在子路由經過''這樣的空字符來做爲默認UI。

function root () {
  this.path = '/'
  this.component = require('pages/index').default
}
function demo () {
  this.path = 'demo'
  this.getComponent = (nextstate, cb) => {
    require.ensure([], (require) => {
      cb(null, require('pages/demo').default)
    })
  }
}
const createRoute = (R) => {
  let route = new R()
  route.childRoutes = route.childRoutes && route.childRoutes.map(r => createRoute(r))
  return route
}

export default [root, demo].map((route) => createRoute(route))

react-redux在從表象理解Redux中進行了簡單介紹。Redux的使用減小了開發中思考的時間，同時也避免了一些可能的問題。在使用過程當中也發現一些問題，使用Redux必然致使大量的dispatch出如今組件中，如何防止業務變得複雜和龐大後致使項目變得難以維護，也是值得思考的。在被改版的網站中使用頁面+組件的方式開發，一個頁面表示除了跟組件外的最高級組件，可擁有多個組件，只有頁面才能向reducer發起action，全部多個組件共用的數據則經過在頁面中傳遞到子組件的props，子組件若是須要更新數據，則經過props屬性調用父組件傳入的方法向上傳遞命令，在頁面中使用dispath來指定action來調用reducer進行數據更新，固然有時候也須要在action中進行處理後在dispathaction到reducer（好比網絡請求）。值得注意的是每次dispath一個action，Redux都會遍歷全部已經註冊的reducer（reducer每每由多個子reducer組成），也就是說全部reducer都會被調用(從項目中的表現和文檔來看是這樣的)，一下是被改版網站使用的reducer部分代碼。

export default class ArticleReducer {
  [AAS.ARTICLE_REQUEST_STATE] (state, action) {
    return Object.assign({}, state, {loading: action.loading})
  }
  [AAS.ARTICLE_SEARCH_STATE] (state, action) {
    return Object.assign({}, state, {searching: action.searching})
  }
}

const reducers = {}
const AR = new ArticleReducer()
const NR = new NewsReducer()
reducers.articles = (state = initState.article, action) => {
  return AR[action.type] ? AR[action.type](state, action) : state
}
reducers.editor = (state = initState.editor, action) => {
  return ER[action.type] ? ER[action.type](state, action) : state
}

就使用React後的感受，因爲第一次真正使用Redux這樣的狀態管理工具來進行進行開發（雖然也有使用vuex，可是都不是基於整個項目的），開發流程變得更加可控，數據流向變得清晰，而在開發中各個工具耦合性也變得更低，總的來講這是一次不錯的嘗試。不過我的以爲無論使用什麼技術，複雜程度隨着業務的增長一定變得更高，而要維持一個項目的穩定，健壯，易於維護將變得更加困難。

最後不得不感嘆，良好編程習慣的重要性。