久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網
      最全最豐富的資訊網站

      使用React寫一個網站的心得體會

      網站是畢業(yè)設計的作品,開發(fā)這個網站的目的主要用于記錄一些筆記,以及聚合一些資訊信息,也算自己在網絡世界中的一塊靜地吧,可以在這里一些技術上想法的實踐。

      網站最初前端使用vue開發(fā),在前段時間由于項目的開發(fā)進度已經不是那么緊急,有了一些空閑時間。而對沒有使用過React又一直耿耿于懷,索性就使用React進行了一次前端的重構。

      學習一門新的技術最基本的當然就是閱讀相關文檔了,作為一個單頁面應用前端路由當然是不可能少了,而使用React如果不使用Reduce那又感覺發(fā)揮不其作用(雖然他們其實也沒什么必須的關系)。所以在這里使用了react,react-router,react-redux,以下為在使用React開發(fā)中的一些見聞,有幸被你看到該文,如有不對之處,還望指出,如果你不小心被帶入坑,本人概不負責。

      首先就是閱讀React的文檔了,文檔使用大量舉例的形式介紹如何使用React進行開發(fā),如如何設計stateprops,如何組件間通信,如何設計組件等。文檔雖然進行了詳細的介紹,但是往往還是需要真正的實踐才能發(fā)現其中的妙處。如state,props的設計,在一個X組件中擁有Y,Z兩個組件,假設Y組件擁有一個輸入框,而Z組件可能需要用到Y組件輸入的值做出一定的變化,當然如果把他們寫到一起也不是不可以的,但是考慮到組件復用,功能單一等因素還是拆開比較合理,那么這個值到底應該哪個組件來儲存呢?如下兩個組件分別為YX,這樣設計明顯是不符合state設計的,擁有太多冗余部分。

      class InputComponent extends Component {    constructor () {      super()this.state = {        value: ''}    }    valInput (e) {      let value =  e.target.valuethis.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在每次執(zhí)行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.valreturn (      <section>{val}<InputComponent val={val} inputChange={this.inputChange.bind(this)}/>        </section>    )    }  }

      react-router提供了前端路由基本的需求,根據需要使用到的功能在項目文檔介紹中即可找到具體使用方法。基本的配置和其他框架也是大同小異,但是很多API的使用確有些大相徑庭(和vue相比),還是需要仔細通讀文檔的,以免在開發(fā)中出現問題再去解決浪費時間,如IndexRoutevue中可以在子路由通過''這樣的空字符來作為默認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的使用減少了開發(fā)中思考的時間,同時也避免了一些可能的問題。在使用過程中也發(fā)現一些問題,使用Redux必然導致大量的dispatch出現在組件中,如何防止業(yè)務變得復雜和龐大后導致項目變得難以維護,也是值得思考的。在被改版的網站中使用頁面+組件的方式開發(fā),一個頁面表示除了跟組件外的最高級組件,可擁有多個組件,只有頁面才能向reducer發(fā)起action,所有多個組件共用的數據則通過在頁面中傳遞到子組件的props,子組件如果需要更新數據,則通過props屬性調用父組件傳入的方法向上傳遞命令,在頁面中使用dispath來指定action來調用reducer進行數據更新,當然有時候也需要在action中進行處理后在dispathactionreducer(比如網絡請求)。值得注意的是每次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這樣的狀態(tài)管理工具來進行進行開發(fā)(雖然也有使用vuex,但是都不是基于整個項目的),開發(fā)流程變得更加可控,數據流向變得清晰,而在開發(fā)中各個工具耦合性也變得更低,總的來說這是一次不錯的嘗試。不過個人覺得不管使用什么技術,復雜程度隨著業(yè)務的增加必定變得更高,而要維持一個項目的穩(wěn)定,健壯,易于維護將變得更加困難。

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

      贊(0)
      分享到: 更多 (0)
      網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號