11月「賣桃者說(shuō)」的開(kāi)放訂閱日期截止到今晚24點(diǎn)。已經(jīng)訂閱的，會(huì)在今晚推送以前的歷史郵件。下次開(kāi)放等12月吧。
今天的文章來(lái)自攻城獅群（參考 MacTalk 自定義菜單介紹），我寫了引語(yǔ)。
React 來(lái)自于 Facebook，這門前端技術(shù)的 Slogan 是 Learn once，write anywhere。盡管我們?cè)缧┠暌呀?jīng)被 Java 的 Write once，run everywhere 傷透了心，但是現(xiàn)在前端框架風(fēng)起云涌，諸侯割據(jù)，如果真的有一門技術(shù)能夠 anywhere 和 everywhere，還是很讓人向往的。
React 能做什么呢，能做這么多
1、Web: https://facebook.github.io/react/
2、Native: https://facebook.github.io/react-native/
3、TV: https://github.com/jordanbyron/react-native/tree/tvOS
4、Desktop: https://github.com/ptmt/react-native-desktop
…
似乎已經(jīng)全終端覆蓋了，React 號(hào)稱能讓新人第一天使用就能開(kāi)發(fā)出新功能。這是怎么做到的呢？
React 特性：
1、用 JSX 語(yǔ)法取代 HTML 模板，在 JavaScript 里聲明式地描述 UI
2、虛擬 DOM 取代物理 DOM 作為操作對(duì)象，封裝了 DOM 的事件系統(tǒng)
3、單向數(shù)據(jù)流動(dòng)
4、組件和基于組件的設(shè)計(jì)流程
Facebook 創(chuàng)造了 JSX 語(yǔ)法，取代了我們常用的模板引擎，允許我們可以直接在 js 文件中來(lái)使用 JSX，這種語(yǔ)法結(jié)合了 HTML 和 JavaScript 的優(yōu)勢(shì)，既能像平常一樣使用 HTML，同時(shí)又能在 HTML 中使用強(qiáng)大的 JavaScript 語(yǔ)言。相當(dāng)于我們可以把 View 和 JavaScript 邏輯寫在同一個(gè)文件里面。
以下是「React，改變前端開(kāi)發(fā)方法的技術(shù)」完整版鏈接：
https://github.com/ingf/ingf.github.io/issues/2
（這是一篇攻城獅群的技術(shù)分享，作者尹鋒）
以下是分享后的問(wèn)答環(huán)節(jié)：
1、問(wèn)：可以講一下微信電影票（上一期分享內(nèi)容）react 前端架構(gòu)嗎？
尹鋒：先說(shuō)一下微信演出票吧，因?yàn)槲⑿烹娪捌爆F(xiàn)在還不完全是 React 架構(gòu)的，微信演出票是 React 的全家桶，使用的技術(shù)包括 React，Redux，react-router，首先它是一個(gè)單頁(yè)應(yīng)用，邏輯上面會(huì)分成好多個(gè)頁(yè)面，比如首頁(yè)、列表頁(yè)、詳情頁(yè)、選做頁(yè)、排期頁(yè)等等。這個(gè)路由控制是通過(guò) react-router 控制的。頁(yè)面加載的 js 會(huì)分成兩部分的 js，一部分的bundle 和 cmmon，另一部分是業(yè)務(wù)的 js，bundle就是所有的 lib 組成的 bundle，common是通過(guò)被引用超過(guò)五次以上就會(huì)達(dá)到 common 里面，剩下的全部會(huì)在業(yè)務(wù) js 里面，所以當(dāng)打開(kāi)微信演出票的時(shí)候，第一次會(huì)加載三個(gè)js, bundle、common、當(dāng)前頁(yè)面業(yè)務(wù)上的 js, 然后每次加載另一個(gè)邏輯上面的頁(yè)面的時(shí)候，就會(huì)加載那個(gè)頁(yè)面所需要的一個(gè) js 文件。
2、問(wèn)：最大優(yōu)勢(shì)是組件化嗎？
尹鋒：對(duì)，組件化是非常大的一個(gè)優(yōu)勢(shì)。我們現(xiàn)在很多的業(yè)務(wù)，有電影票，有演出票，有 M 站，會(huì)有很多業(yè)務(wù)線，實(shí)際上我們現(xiàn)在在公司會(huì)有很多的組件復(fù)用。很多東西實(shí)現(xiàn)了一次以后，其他團(tuán)隊(duì)還會(huì)繼續(xù)用。就像使用 html 標(biāo)簽一樣，引入組件就可以了。
http://jsfiddle.net/69z2wepo/24153/
大家可以現(xiàn)在這個(gè)里面來(lái)寫自己的 React 代碼，熟悉了以后再來(lái)搭建整體開(kāi)發(fā)框架。
3、問(wèn)：剛才你說(shuō)的 js 打包盒按需加載是如何做的？
尹鋒：這里就是微信演出票全棧的所有頁(yè)面，這些頁(yè)面都會(huì)被單獨(dú)打包成一個(gè)業(yè)務(wù)的 js，每次加載這個(gè)頁(yè)面的時(shí)候就會(huì)去引用相應(yīng)的 js，這個(gè)技術(shù)是用一個(gè)叫 react-proxy-loader 的插件來(lái)實(shí)現(xiàn)的。給大家發(fā)一下鏈接：
https://github.com/webpack/react-proxy-loader
4、問(wèn)：有什么優(yōu)秀的包含了基礎(chǔ)架構(gòu)的 BoilerPlate 或者其他好的組件？
尹鋒：https://github.com/enaqx/awesome-react
5、問(wèn)：bundle 是所有第三方的打包嗎？common 是被引用五次以上的業(yè)務(wù)組件？
尹鋒：'vendor': ['react', 'react-dom', 'react-router', 'react-router-redux', 'redux', 'redux-thunk', ],
webpack 認(rèn)為一切都是模塊，都可以被打包的。
參考鏈接：http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
6、問(wèn)：那請(qǐng)問(wèn)下把vendor和common分開(kāi)的目的是什么？
尹鋒：options.minChunks
vendor 主要 lib 庫(kù)，是在太大了，更新比較低頻。common 更新頻率還是比較大的。為了最大限度的利用瀏覽器緩存，所以分成兩個(gè)。
大鯤，拉勾旗下新產(chǎn)品，專注于企業(yè)短期項(xiàng)目的人才對(duì)接，幫助企業(yè)1小時(shí)內(nèi)找到專業(yè)人才，降低人力成本，提高完成質(zhì)量。目前已有1000+專業(yè)人才入駐，覆蓋開(kāi)發(fā)、設(shè)計(jì)、市場(chǎng)運(yùn)營(yíng)、產(chǎn)品等方向。平臺(tái)提供快速響應(yīng)服務(wù)和全程監(jiān)管，保障項(xiàng)目推進(jìn)和資金安全。
聯(lián)系客服
