如何使用React寫一個網(wǎng)站？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,靖宇企業(yè)網(wǎng)站建設,靖宇品牌網(wǎng)站建設,網(wǎng)站定制,靖宇網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,靖宇網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

首先就是閱讀React的文檔了，文檔使用大量舉例的形式介紹如何使用React進行開發(fā)，如如何設計state，props，如何組件間通信，如何設計組件等。文檔雖然進行了詳細的介紹，但是往往還是需要真正的實踐才能發(fā)現(xiàn)其中的妙處。如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.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函數(shù)的時候都會導致原來輸入的值被清空。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提供了前端路由基本的需求，根據(jù)需要使用到的功能在項目文檔介紹中即可找到具體使用方法。基本的配置和其他框架也是大同小異，但是很多API的使用確有些大相徑庭(和vue相比)，還是需要仔細通讀文檔的，以免在開發(fā)中出現(xiàn)問題再去解決浪費時間，如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的使用減少了開發(fā)中思考的時間，同時也避免了一些可能的問題。在使用過程中也發(fā)現(xiàn)一些問題，使用Redux必然導致大量的dispatch出現(xiàn)在組件中，如何防止業(yè)務變得復雜和龐大后導致項目變得難以維護，也是值得思考的。在被改版的網(wǎng)站中使用頁面+組件的方式開發(fā)，一個頁面表示除了跟組件外的最高級組件，可擁有多個組件，只有頁面才能向reducer發(fā)起action，所有多個組件共用的數(shù)據(jù)則通過在頁面中傳遞到子組件的props，子組件如果需要更新數(shù)據(jù)，則通過props屬性調用父組件傳入的方法向上傳遞命令，在頁面中使用dispath來指定action來調用reducer進行數(shù)據(jù)更新，當然有時候也需要在action中進行處理后在dispathaction到reducer（比如網(wǎng)絡請求）。值得注意的是每次dispath一個action，Redux都會遍歷所有已經(jīng)注冊的reducer（reducer往往由多個子reducer組成），也就是說所有reducer都會被調用(從項目中的表現(xiàn)和文檔來看是這樣的)，一下是被改版網(wǎng)站使用的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ā)流程變得更加可控，數(shù)據(jù)流向變得清晰，而在開發(fā)中各個工具耦合性也變得更低，總的來說這是一次不錯的嘗試。不過個人覺得不管使用什么技術，復雜程度隨著業(yè)務的增加必定變得更高，而要維持一個項目的穩(wěn)定，健壯，易于維護將變得更加困難。

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

看完上述內(nèi)容，你們掌握如何使用React寫一個網(wǎng)站的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前名稱：如何使用React寫一個網(wǎng)站
文章分享：http://m.newbst.com/article24/jegdce.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、做網(wǎng)站、、定制網(wǎng)站、手機網(wǎng)站建設、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)