成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

哈姆雷特之 React

?xiaoxiao, / 3255人閱讀

摘要：最近兩三周在主要在寫，在這里寫一下，算是個(gè)總結(jié)。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域?？傊膊]有那么難。目前看來確實(shí)是非常適合于前后端分離的。

最近兩三周在主要在寫 React，在這里寫一下，算是個(gè)總結(jié)。

webpack

我們的后端語言用的是 Go, 對(duì)于寫網(wǎng)站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮)，另外我們也沒有用任務(wù)的框架，簡(jiǎn)單粗暴的 Go http server + package 的方式來實(shí)現(xiàn)的，所以也只能借用 JS 的. 開始的時(shí)候其實(shí)我們用的是 gulp, 因?yàn)橹恍枰虬嚎s生成 manifest 就可以了，它的使用也簡(jiǎn)單(也是當(dāng)時(shí)對(duì) webpack 的理解不夠)。但是打算換成 ReactJS，它是推薦用 browserify 或 webpack，就這樣決定把之前的 gulp 換成了 webpack。這里面主要的問題是作用域。這里強(qiáng)烈建議看一下 ryfeng 的一篇文章Resource2，關(guān)于 CommonJS 的，因?yàn)?webpack 也是基于它的，理解很重要。關(guān)于 AMD 的因?yàn)闆]有實(shí)踐，就不多說了?？傊膊]有那么難。

Component 生命周期

略，其實(shí)很重要，主要是因?yàn)橘Y料說得很詳細(xì)，這里只把地址放在這里，生命周期

JSX

React 里非常重要的一部分是 JSX，雖然你可以用 JS 來代替，我相信大多數(shù)人不會(huì)這樣做。所以很有必要說一下。

我經(jīng)常遇到的一個(gè)錯(cuò)誤 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回閉合的標(biāo)簽。像 img， br 這種閉合還是可以理解的，但是我會(huì)忘記最外層加一個(gè)閉合的標(biāo)簽，為什么？根源就在于 JSX。我把Resource3里的例子放到這里。

var dropdown =
  
    A dropdown list
    
      Do Something
      Do Something Fun!
      Do Something Else
    
  ;

render(dropdown);

這是我剛開始的 ReactJS 的寫法:

var Layout = React.createClass({
  render: function() {
    return (
      

      
      

    );
  }
});

上面的這個(gè)例子 Header, Content, Footer 最外層，實(shí)際上是沒有閉合的。render 里面返回的是一個(gè)變量，而上面我的例子，會(huì)產(chǎn)生歧義，它并不知道到里里結(jié)束。

另外包含了一些其它的，類似于編譯器、 Transpilers（沒有想到好的詞來表達(dá)）。

翻頁(yè)

并不是太習(xí)慣于滾動(dòng)翻頁(yè)，我選擇了 react-pager，其實(shí)也很方便，只是需要在 handlePageChanged 自己處理數(shù)據(jù)請(qǐng)求。只是會(huì)有一個(gè)跟 react-router 結(jié)合時(shí) browserHistory 的問題，我們接下來說。

路由

React 做為 SAP 是一個(gè)很好的選擇，但是我希望能夠像正常的 URL 請(qǐng)求一樣，所以我又用了 react-router。實(shí)際上 Routes 是分成兩部分的：Client 跟 Server，如果你用 NodeJS 的很方便。但是我們是用的 Go，Server 端只能自己來寫，不過最終方法是抽取出來了，也還好。

client 我遇到的幾個(gè)方面:

多個(gè) components共用 layout，resource8

上面提到的 browserHistory 問題，加 pagination 時(shí) browserHistory 的處理。這里需要很看一下 Resource7，理解一下 component 的生命周期，我是 componentDidUpdate 里處理，整個(gè)代碼是需要自己來實(shí)現(xiàn)的。另外需要在 handlePageChanged 時(shí)把翻頁(yè)放入歷史里面 browserHistory.push("/users?page="+newPage)

最后

以上是我在使用過程中，遇到的困難跟覺得比較重要的部分。目前看來 ReactJS 確實(shí)是非常適合于前后端分離的。把數(shù)據(jù)的渲染工作放到前端，用 api 的加載數(shù)據(jù)而不是整個(gè)頁(yè)面可以提升大約 50% 速度（這個(gè)是基于數(shù)據(jù)量的，測(cè)試數(shù)據(jù)大概百萬級(jí)別）。首次請(qǐng)求因?yàn)闆]有數(shù)據(jù)的處理跟模板的加載，顯示速度提升更明顯，相當(dāng)于靜態(tài)的 html 加載，本地測(cè)試數(shù)據(jù)是提升幾百倍，從大于1s到幾ms。

如果問題歡迎一起討論。

相關(guān)資料

https://facebook.github.io/react/
[Resource2] http://javascript.ruanyifeng.com/nodejs/module.html
[Resource3]https://facebook.github.io/jsx/
https://www.npmjs.com/package/react-pager
https://github.com/reactjs/react-router
https://github.com/reactjs/react-router/tree/master/docs
[Resource7]https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
[Resource8]https://github.com/reactjs/react-router/blob/master/docs/API.md#components-1

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79272.html

相關(guān)文章

  • 前端20個(gè)靈魂拷問 徹底搞明白你就是中級(jí)前端工程師 【下篇】

    摘要：安裝后已經(jīng)完成了安裝，并且等待其他的線程被關(guān)閉。激活后在這個(gè)狀態(tài)會(huì)處理事件回調(diào)提供了更新緩存策略的機(jī)會(huì)。并可以處理功能性的事件請(qǐng)求后臺(tái)同步推送。廢棄狀態(tài)這個(gè)狀態(tài)表示一個(gè)的生命周期結(jié)束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不覺，已經(jīng)來到了最后的下篇 其實(shí)我寫的東西你如果認(rèn)真去看，跟著去寫，應(yīng)該能有...

    fireflow 評(píng)論0 收藏0

  • 被誤讀的設(shè)計(jì)模式

    摘要：可以說，如果問題是我們的敵人，代碼是我們的劍，設(shè)計(jì)模式就是高手心中的劍譜。中級(jí)選手，在編程的時(shí)候知道何時(shí)該用什么設(shè)計(jì)模式，而什么時(shí)候不該用。設(shè)計(jì)模式被用來簡(jiǎn)化設(shè)計(jì)，讓設(shè)計(jì)更優(yōu)雅。其中最具有普遍性的方案往往就是我們的設(shè)計(jì)模式的內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目錄概...

    William_Sang 評(píng)論0 收藏0

  • 總結(jié)個(gè)人2015提高前端效率的方法和工具

    摘要：更多前端內(nèi)容閱讀之前非用戶請(qǐng)自動(dòng)忽略，此文針對(duì)用戶，我個(gè)人使用頻率非常高，端開發(fā)者可以選擇性的嘗試部分工具。或者調(diào)起的調(diào)試工具，跟編輯器親密合體。目前在使用，嘗試。 更多前端內(nèi)容http://www.codefrom.com/p/JavaScript 閱讀之前 非Mac用戶請(qǐng)自動(dòng)忽略，此文針對(duì)Mac用戶，我個(gè)人使用頻率非常高，PC端開發(fā)者可以選擇性的嘗試部分工具。 終端...

    Jingbin_ 評(píng)論0 收藏0

  • 脫網(wǎng)安裝雷特字幕手拍唱詞插件Premiere版

    摘要：為回饋新老用戶，雷特字幕平臺(tái)隆重推出手拍唱詞插件，并且免費(fèi)下載使用。雷特字幕手拍唱詞插件版，支持及，運(yùn)行的操作系統(tǒng)必須為位及以上操作系統(tǒng)。 雷特字幕自發(fā)行以來受到廣大用戶的青睞，在其豐富的插件中，手拍唱詞一直是用戶最關(guān)注，也是最實(shí)用的插件之一。為回饋新老用戶，雷特字幕premiere平臺(tái)隆重推出手拍唱詞插件，并且免費(fèi)下載使用。雷特字幕手拍唱詞插件Premiere版，支持Premiere...

    TalkingData 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<