最近在學習React.js,以前都是直接用最原生的方式去寫React代碼,發現組織起來特別麻煩,以前聽人說用Webpack組織React組件駕輕就熟,就花了點時間學習了一下,收穫頗豐javascript
一個組件,有本身的結構,有本身的邏輯,有本身的樣式,會依賴一些資源,會依賴某些其餘組件。好比平常寫一個組件,比較常規的方式:css
那麼在React中是什麼樣子呢?html
在React的世界裏,結構和邏輯交由JSX文件組織,React將模板內嵌到邏輯內部,實現了一個JS代碼和HTML混合的JSX。前端
在JSX文件中,能夠直接經過React.createClass
來定義組件:java
var CustomComponent = React.creatClass({ render: function(){ return (<div className="custom-component"></div>); } });
經過這種方式能夠很方便的定義一個組件,組件的結構定義在render函數中,但這並非簡單的模板引擎,咱們能夠經過js方便、直觀的操控組件結構,好比我想給組件增長几個節點:node
var CustomComponent = React.creatClass({ render: function(){ var $nodes = ['h','e','l','l','o'].map(function(str){ return (<span>{str}</span>); }); return (<div className="custom-component">{$nodes}</div>); } });
經過這種方式,React使得組件擁有靈活的結構。那麼React又是如何處理邏輯的呢?react
寫過前端組件的人都知道,組件一般首先須要相應自身DOM事件,作一些處理。必要時候還須要暴露一些外部接口,那麼React組件要怎麼作到這兩點呢?webpack
好比我有個按鈕組件,點擊以後須要作一些處理邏輯,那麼React組件大體上長這樣:git
var ButtonComponent = React.createClass({ render: function(){ return (<button>屠龍寶刀,點擊就送</button>); } });
點擊按鈕應當觸發相應地邏輯,一種比較直觀的方式就是給button綁定一個onclick
事件,裏面就是須要執行的邏輯了:程序員
function getDragonKillingSword() { //送寶刀 } var ButtonComponent = React.createClass({ render: function(){ return (<button onclick="getDragonKillingSword()">屠龍寶刀,點擊就送</button>); } });
但事實上getDragonKillingSword()
的邏輯屬於組件內部行爲,顯然應當包裝在組件內部,因而在React中就能夠這麼寫:
var ButtonComponent = React.createClass({ getDragonKillingSword: function(){ //送寶刀 }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龍寶刀,點擊就送</button>); } });
這樣就實現內部事件的響應了,那若是須要暴露接口怎麼辦呢?
事實上如今getDragonKillingSword
已是一個接口了,若是有一個父組件,想要調用這個接口怎麼辦呢?
父組件大概長這樣:
var ImDaddyComponent = React.createClass({ render: function(){ return ( <div> //其餘組件 <ButtonComponent /> //其餘組件 </div> ); } });
那麼若是想手動調用組件的方法,首先在ButtonComponent上設置一個ref=""
屬性來標記一下,好比這裏把子組件設置成<ButtonComponent ref="getSwordButton"/>
,那麼在父組件的邏輯裏,就能夠在父組件本身的方法中經過這種方式來調用接口方法:
this.refs.getSwordButton.getDragonKillingSword();
看起來屌屌噠~那麼問題又來了,父組件但願本身可以按鈕點擊時調用的方法,那該怎麼辦呢?
父組件能夠直接將須要執行的函數傳遞給子組件:
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
而後在子組件中調用父組件方法:
var ButtonComponent = React.createClass({ render: function(){ return (<button onClick={this.props.clickCallback}>屠龍寶刀,點擊就送</button>); } });
子組件經過this.props
可以獲取在父組件建立子組件時傳入的任何參數,所以this.props
也常被當作配置參數來使用
屠龍寶刀每一個人只能領取一把,按鈕點擊一下就應該灰掉,應當在子組件中增長一個是否點擊過的狀態,這又應當處理呢?
在React中,每一個組件都有本身的狀態,能夠在自身的方法中經過this.state
取到,而初始狀態則經過getInitialState()
方法來定義,好比這個屠龍寶刀按鈕組件,它的初始狀態應該是沒有點擊過,因此getInitialState
方法裏面應當定義初始狀態clicked: false
。而在點擊執行的方法中,應當修改這個狀態值爲click: true
:
var ButtonComponent = React.createClass({ getInitialState: function(){ //肯定初始狀態 return { clicked: false }; }, getDragonKillingSword: function(){ //送寶刀 //修改點擊狀態 this.setState({ clicked: true }); }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龍寶刀,點擊就送</button>); } });
這樣點擊狀態的維護就完成了,那麼render函數中也應當根據狀態來維護節點的樣式,好比這裏將按鈕設置爲disabled
,那麼render函數就要添加相應的判斷邏輯:
render: function(){ var clicked = this.state.clicked; if(clicked) return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龍寶刀,點擊就送</button>); else return (<button onClick={this.getDragonKillingSword}>屠龍寶刀,點擊就送</button>); }
這裏簡單介紹了經過JSX來管理組件的結構和邏輯,事實上React給組件還定義了不少方法,以及組件自身的生命週期,這些都使得組件的邏輯處理更增強大
CSS文件定義了組件的樣式,如今的模塊加載器一般都可以加載CSS文件,若是不能通常也提供了相應的插件。事實上CSS、圖片能夠看作是一種資源,由於加載過來後通常不須要作什麼處理。
React對這一方面並無作特別的處理,雖然它提供了Inline Style的方式把CSS寫在JSX裏面,但估計沒有多少人會去嘗試,畢竟如今CSS樣式已經再也不只是簡單的CSS文件了,一般都會去用Less、Sass等預處理,而後再用像postcss、myth、autoprefixer、cssmin等等後處理。資源加載通常也就簡單粗暴地使用模塊加載器完成了
組件依賴的處理通常分爲兩個部分:組件加載和組件使用
React沒有提供相關的組件加載方法,依舊須要經過<script>
標籤引入,或者使用模塊加載器加載組件的JSX和資源文件。
若是細心,就會發現其實以前已經有使用的例子了,要想在一個組件中使用另一個組件,好比在ParentComponent
中使用ChildComponent
,就只須要在ParentComponent
的render()
方法中寫上<ChildComponent />
就好了,必要的時候還能夠傳些參數。
到這裏就會發現一個問題,React除了只處理告終構和邏輯,資源也無論,依賴也無論。是的,React將近兩萬行代碼,連個模塊加載器都沒有提供,更與Angularjs,jQuery等不一樣的是,他還不帶啥腳手架...沒有Ajax庫,沒有Promise庫,要啥啥沒有...
那它爲啥這麼大?由於它實現了一個虛擬DOM(Virtual DOM)。虛擬DOM是幹什麼的?這就要從瀏覽器自己講起
如咱們所知,在瀏覽器渲染網頁的過程當中,加載到HTML文檔後,會將文檔解析並構建DOM樹,而後將其與解析CSS生成的CSSOM樹一塊兒結合產生愛的結晶——RenderObject樹,而後將RenderObject樹渲染成頁面(固然中間可能會有一些優化,好比RenderLayer樹)。這些過程都存在與渲染引擎之中,渲染引擎在瀏覽器中是於JavaScript引擎(JavaScriptCore也好V8也好)分離開的,但爲了方便JS操做DOM結構,渲染引擎會暴露一些接口供JavaScript調用。因爲這兩塊相互分離,通訊是須要付出代價的,所以JavaScript調用DOM提供的接口性能不咋地。各類性能優化的最佳實踐也都在儘量的減小DOM操做次數。
而虛擬DOM幹了什麼?它直接用JavaScript實現了DOM樹(大體上)。組件的HTML結構並不會直接生成DOM,而是映射生成虛擬的JavaScript DOM結構,React又經過在這個虛擬DOM上實現了一個 diff 算法找出最小變動,再把這些變動寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在,計算性能會比較好,並且因爲減小了實際DOM操做次數,性能會有較大提高
道理我都懂,但是爲何咱們沒有模塊加載器?
因此就須要Webpack了
事實上它是一個打包工具,而不是像RequireJS或SeaJS這樣的模塊加載器,經過使用Webpack,可以像Node.js同樣處理依賴關係,而後解析出模塊之間的依賴,將代碼打包
首先得有Node.js
而後經過npm install -g webpack
安裝webpack,固然也能夠經過gulp來處理webpack任務,若是使用gulp的話就npm install --save-dev gulp-webpack
Webpack的構建過程須要一個配置文件,一個典型的配置文件大概就是這樣
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { entry: { entry1: './entry/entry1.js', entry2: './entry/entry2.js' }, output: { path: __dirname, filename: '[name].entry.js' }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [{ test: /\.js$/, loader: 'babel-loader' }, { test: /\.jsx$/, loader: 'babel-loader!jsx-loader?harmony' }] }, plugins: [commonsPlugin] };
這裏對Webpack的打包行爲作了配置,主要分爲幾個部分:
[name]
會由entry中的鍵(這裏是entry1和entry2)替換.js
結尾的文件都是用babel-loader
作處理,而.jsx
結尾的文件會先通過jsx-loader
處理,而後通過babel-loader
處理。固然這些loader也須要經過npm install
安裝固然Webpack還有不少其餘的配置,具體能夠參照它的配置文檔
若是經過npm install -g webpack
方式安裝webpack的話,能夠經過命令行直接執行打包命令,好比這樣:
$webpack --config webpack.config.js
這樣就會讀取當前目錄下的webpack.config.js做爲配置文件執行打包操做
若是是經過gulp插件gulp-webpack,則能夠在gulpfile中寫上gulp任務:
var gulp = require('gulp'); var webpack = require('gulp-webpack'); var webpackConfig = require('./webpack.config'); gulp.task("webpack", function() { return gulp .src('./') .pipe(webpack(webpackConfig)) .pipe(gulp.dest('./build')); });
Webpack使得咱們可使用Node.js的CommonJS規範來編寫模塊,好比一個簡單的Hello world模塊,就能夠這麼處理:
var React = require('react'); var HelloWorldComponent = React.createClass({ displayName: 'HelloWorldComponent', render: function() { return ( <div>Hello world</div> ); } }); module.exports = HelloWorldComponent;
等等,這和以前的寫法沒啥差異啊,依舊沒有逼格...程序員敲碼要有geek範,要逼格than逼格,這太low了。如今都ES6了,React的代碼也要寫ES6,babel-loader
就是幹這個的。Babel可以將ES6代碼轉換成ES5。首先須要經過命令npm install --save-dev babel-loader
來進行安裝,安裝完成後就可使用了,一種使用方式是以前介紹的在webpack.config.js
的loaders中配置,另外一種是直接在代碼中使用,好比:
var HelloWorldComponent = require('!babel!jsx!./HelloWorldComponent');
那咱們應當如何使用Babel提高代碼的逼格呢?改造一下以前的HelloWorld代碼吧:
import React from 'react'; export default class HelloWorldComponent extends React.Component { constructor() { super(); this.state = {}; } render() { return ( <div>Hello World</div> ); } }
這樣在其餘組件中須要引入HelloWorldComponent組件,就只要就能夠了:
import HelloWorldComponent from './HelloWorldComponent'
怎麼樣是否是更有逼格了?經過import引入模塊,還能夠直接定義類和類的繼承關係,這裏也再也不須要getInitialState
了,直接在構造函數constructor
中用this.state = xxx
就行了
Babel帶來的固然還不止這些,在其幫助下還能嘗試不少優秀的ES6特性,好比箭頭函數,箭頭函數的特色就是內部的this和外部保持一致,今後能夠和that
、_this
說再見了
['H', 'e', 'l', 'l', 'o'].map((c) => { return (<span>{c}</span>); });
其餘還有不少,具體能夠參照Babel的學習文檔
我是一個強烈地Less依賴患者,脫離了Less直接寫CSS就會出現四肢乏力、不想幹活、心情煩躁等現象,並且還不喜歡在寫Less時候加前綴,日常都是gulp+less+autoprefixer直接處理的,那麼在Webpack組織的React組件中要怎麼寫呢?
沒錯,依舊是使用loader
能夠在webpack.config.js
的loaders中增長Less的配置:
{
test: /\.less$/, loader: 'style-loader!css-loader!autoprefixer-loader!less-loader' }
經過這樣的配置,就能夠直接在模塊代碼中引入Less樣式了:
import React from 'react'; require('./HelloWorldComponent.less'); export default class HelloWorldComponent extends React.Component { constructor() { super(); this.state = {}; } render() { return ( <div>Hello World</div> ); } }
Webpack的loader爲React組件化提供了不少幫助,像圖片也提供了相關的loader:
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
更多地loader能夠移步webpack的wiki
Webpack和React結合的另外一個強大的地方就是,在修改了組件源碼以後,不刷新頁面就能把修改同步到頁面上。這裏須要用到兩個庫webpack-dev-server
和react-hot-loader
。
首先須要安裝這兩個庫,npm install --save-dev webpack-dev-server react-hot-loader
安裝完成後,就要開始配置了,首先須要修改entry配置:
entry: {
helloworld: [
'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './helloworld' ] },
經過這種方式指定資源熱啓動對應的服務器,而後須要配置react-hot-loader
到loaders的配置當中,好比個人全部組件代碼所有放在scripts文件夾下:
{
test: /\.js?$/, loaders: ['react-hot', 'babel'], include: [path.join(__dirname, 'scripts')] }
最後配置一下plugins,加上熱替換的插件和防止報錯的插件:
plugins: [
new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]
這樣配置就完成了,可是如今要調試須要啓動一個服務器,並且以前配置裏映射到http://localhost:3000
,因此就在本地3000端口起個服務器吧,在項目根目錄下面建個server.js:
var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, historyApiFallback: true }).listen(3000, 'localhost', function (err, result) { if (err) console.log(err); console.log('Listening at localhost:3000'); });
這樣就能夠在本地3000端口開啓調試服務器了,好比個人頁面是根目錄下地index.html
,就能夠直接經過http://localhost:3000/index.html
訪問頁面,修改React組件後頁面也會被同步修改,這裏貌似使用了websocket來同步數據。圖是一個簡單的效果:
React的組件化開發頗有想法,而Webpack使得React組件編寫和管理更加方便,這裏只涉及到了React和Webpack得很小一部分,還有更多的最佳實踐有待在學習的路上不斷髮掘。