摘要：入門與實(shí)戰(zhàn)組件虛擬的概念這是性能高效的核心算法為此引入了虛擬的機(jī)制。這個(gè)過程是自動(dòng)完成的。實(shí)際上是改變了樣式文件中類的名稱，使其唯一。如果希望使用達(dá)到的效果，則需要做件事情服務(wù)器支持。

虛擬DOM的概念 這是React性能高效的核心算法

React為此引入了虛擬DOM（Virtual DOM）的機(jī)制?；?b>React進(jìn)行開發(fā)時(shí)所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時(shí)，React都會(huì)重新構(gòu)建整個(gè)DOM樹，然后React將當(dāng)前整個(gè)DOM樹和上一次的DOM樹進(jìn)行對(duì)比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。盡管每一次都需要構(gòu)造完整的虛擬DOM樹，但是因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對(duì)實(shí)際DOM進(jìn)行操作的僅僅是Diff部分，因而能達(dá)到提高性能的目的。

React 組件，理解什么是組件化

像插入普通 HTML 標(biāo)簽一樣，在網(wǎng)頁中插入這個(gè)組件

所謂組件，即封裝起來的具有獨(dú)立功能的UI部件

React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建。

對(duì)于React而言，則完全是一個(gè)新的思路，開發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個(gè)組件都獨(dú)立封裝。

React一個(gè)組件應(yīng)該具有如下特征：

可組合（Composeable）：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說父組件擁有它創(chuàng)建的子組件，通過這個(gè)特性，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡單的UI組件.

可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景

可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)

語法

組件名稱一定要大寫

組件只能包含一個(gè)頂層標(biāo)簽

// Header組件 
// export 導(dǎo)出供外部使用
export default class ComponentHeader extends React.Component{
    //render方法：用于解析本身類的輸出
    render(){
        return (
這里是頭部
)
    }
}



// Index組件
import  ComponentHeader from "./component/header";
class Index extends React.Component{
    render(){
        // 插入普通 HTML 標(biāo)簽一樣
        return 
    }
}

// 將模版轉(zhuǎn)化為HTML語言，并插入到指定節(jié)點(diǎn)
// 相當(dāng)于程序的入口

ReactDOM.render(,document.getElementById("one")) 

React 多組件嵌套

各個(gè)組件之間相互獨(dú)立，利于維護(hù)，重用。在Index文件中進(jìn)行調(diào)用，簡明。
需要變更時(shí)，我們只需要改變相應(yīng)的組件，所有引用該組件的的頁面就都發(fā)生的變更，很好維護(hù)。

import  ComponentHeader from "./component/header";
import  BodyIndex from "./component/body";
import  ComponentFooter from "./component/footer";

class Index extends React.Component{
    render(){
        //將組件賦值給一個(gè)變量，這樣方便做判斷
        var component;
        if(/*條件*/){
             component = ;
        }else{
             component = ;
        }
        
        return (
            

                { component}
                
                
            
        )
    }
}

JXS內(nèi)置表達(dá)式

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號(hào)，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫。

JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析

JSX 中的注釋 {/*注釋*/}

export default class BodyIndex extends React.Component{
   render(){
   
    var userName = "xiaoxiong";
    var boolInput;
    var html1 = "Mooc Lesson";
    //對(duì)   進(jìn)行Unicode轉(zhuǎn)碼
    var html2 = "Moocu0020Lesson"
       return (
           

               
頁面主體內(nèi)容
                // 三元表達(dá)式的使用
               
{userName = "" ?"用戶還沒有登錄":"用戶名：" +userName }
               // 使用{boolInput}進(jìn)行值的綁定
               
               //解析html
               
{html1}
  //"Mooc Lesson"  不會(huì)被解析為空格
               
{html2}
  //"Mooc Lesson"
               
 //"Mooc Lesson" 此方法可能會(huì)存在xss攻擊 
               
           
       )
   }
}

聲明周期，縱觀整個(gè)React的生命周期

在ES6中，一個(gè)React組件是用一個(gè)class來表示的

過程描述

在React中有4中途徑可以觸發(fā)render

首次渲染Initial Render

constructor --> componentWillMount -->  render -->conponentDidMount 

調(diào)用this.setState （并不是一次setState會(huì)觸發(fā)一次render，React可能會(huì)合并操作，再一次性進(jìn)行render）

shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate

父組件發(fā)生更新（一般就是props發(fā)生改變，但是就算props沒有改變或者父子組件之間沒有數(shù)據(jù)交換也會(huì)觸發(fā)render）

componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate

調(diào)用this.forceUpdate

componentWillUpdate --> render --> componentDidUpdate

總結(jié)

constructor、componentWillMount、componentDidMount只有第一次渲染時(shí)候會(huì)被調(diào)用

componentWillUpdate、componentDidUpdate、shouldComponentUpdate 在以后的每次更新渲染之后都會(huì)被調(diào)用

考慮到性能的問題，如果有些屬性的變化，不需要重新刷新頁面，我們是使用 componentShouldUpdate() 進(jìn)行控制。

官方文檔
https://facebook.github.io/re...

參考文獻(xiàn)
http://www.jianshu.com/p/4784...

state 屬性控制React的一切

組件自身的狀態(tài)，props為外部傳入的狀態(tài)

state對(duì)組件做了更新之后，會(huì)馬上反應(yīng)到虛擬DOM上，最后更新到DOM上。這個(gè)過程是自動(dòng)完成的。

組件免不了要與用戶互動(dòng)，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開始有一個(gè)初始狀態(tài)，然后用戶互動(dòng)，導(dǎo)致狀態(tài)變化，從而觸發(fā)重新渲染 UI .

export default class BodyIndex extends React.Component{
   // 初始化
   constructor(){
       super();//調(diào)用基類的所有初始化方法
       //state的作用域是當(dāng)前組件，不會(huì)污染其他模塊
       this.state = {
           username:"xiaoxiong"
       };
       
   };
   
   //修改state
   setTimeOut(()=>{
       this.setState({username:"miaomiao"})
   },4000);
   
   render(){
       return (
           

               
頁面主體內(nèi)容
               // 引用state值
               
{this.state.username}
           
       )
   }
}

Props屬性

其他組件傳遞參數(shù)，對(duì)于本模塊來說，屬于外來屬性。

//使用組件時(shí)，傳入?yún)?shù)
< BodyIndex userid="123" username={xiaoxiong}/>


export default class BodyIndex extends React.Component{
  
    render(){
        return (
            

                
頁面主體內(nèi)容
                // 接收參數(shù)
                
{this.props.userid}
                
{this.props.username}
            
        )
    }
}

添加組件屬性，有一個(gè)地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

事件和數(shù)據(jù)的雙向綁定，包含了父子頁面之間的參數(shù)互傳

父組件給子組件傳遞參數(shù)，使用props

事件綁定

export default class BodyIndex extends React.Component{
    constructor(){
        super();
        this.state={
            username="xiaoxiong",
            age:20
        }
    };
    
    changeUserInfo(){
        this.setState({age:50})
    };
  
    render(){
        return (
            

                
頁面主體內(nèi)容
                
{this.props.username} {this.props.age }
                //事件綁定 ES6寫法 
                //ES5寫法 onClick=this.chanchangeUserInfo
                
            
        )
    }
}

子組件為父組件傳參使用事件

在子頁面中通過調(diào)用父頁面?zhèn)鬟f過來的事件 props 進(jìn)行組件間的參數(shù)傳遞

就是讓子頁面的變動(dòng)體現(xiàn)在父頁面上，而頁面狀態(tài)的改變由state控制，因此我們讓父頁面通過props將函數(shù)傳遞給子頁面，此函數(shù)可以取得子頁面的值，并改變父頁面的state

//子組件
export default class BodyChild extends React.Component{
         
    render(){
        return (
            

                // 調(diào)用父組件傳過來的函數(shù)
                
子頁面輸入：
            
        )
    }
}

//父組件
import BodyChild from "./component/bodychild";

export default class Body extends React.Component{

    constructor(){
        super();
        this.state={
            age:20
        }
    }

    // 父頁面的函數(shù)，可以操控父頁面的 state
    handler(e){
        this.setState({age:e.target.value})
    }
   
    render(){
        return (
            

                
{this.state.age}

                
            
        )
    }
}

可復(fù)用組件，真正讓React開發(fā)快速、高效的地方

使用組件時(shí)，傳遞props，在組件定義的文件中可使用這些props

export default class BodyIndex extends React.Component{
   
    render(){
        return (
            

                
{this.props.userid}

                
{this.props.username}

            
        )
    }
}

// 對(duì)傳遞過來的 props 的類型進(jìn)行約束
BodyIndex.propTypes = {
    // userid為number類型且必須傳遞
    userid:React.propTypes.number.isRuquired
};

// 設(shè)置默認(rèn)值，使用組件時(shí)，如果不傳遞參數(shù)，將顯示默認(rèn)值
BodyIndex.defaultProps = {
    username:"xiaoxiong"
};

組件多層嵌套時(shí)，傳遞參數(shù)的簡便方法

export default class Body extends React.Component{
   
    render(){
        return (
            

                //在父頁面定義props
               
            
        )
    }
}


export default class BodySon extends React.Component{
   
    render(){
        return (
            

                
{this.props.username}
                //取得父頁面(BodySon)的所有props屬性
               
            
        )
    }
}



export default class Bodygrandson extends React.Component{
   
    render(){
        return (
            

               // 使用傳遞過來的props
               
{this.props.username}{this.props.age}
            
        )
    }
}

組件的Refs
React中多數(shù)情況下，是通過state的變化，來重新刷新頁面。但有時(shí)也需要取得html節(jié)點(diǎn)，比如對(duì)input進(jìn)行focus等；下面我們來看下，怎么取得原生的html節(jié)點(diǎn)，并對(duì)其進(jìn)行操作。

export default class BodyChild extends React.Component{

    handler(){
        //第一種方式
        var mySubmitBotton = document.getElementById("submitButton");
        //這樣也是可以的
        mySubmitBotton.style.color="red";
        ReactDOM.findDOMNode(mySubmitBotton).style.color = "red";
        
        //第二種方式
        this.refs.submitBotton.style.color = "red";
        
    }
         
    render(){
        return (
            

                
            
        )
    }
}

refs是訪問到組件內(nèi)部DOM節(jié)點(diǎn)的唯一可靠方式

refs會(huì)自動(dòng)銷毀對(duì)子組件的引用

不要在Render或Render之前對(duì)Refs進(jìn)行調(diào)用，因?yàn)?b>Refs獲取的是真實(shí)的DOM節(jié)點(diǎn)，要在插入真實(shí)DOM節(jié)點(diǎn)之后調(diào)用。

不要濫用Refs

不必須使用真實(shí)DOM時(shí)，用方法1即可

獨(dú)立組件間共享Mixins

在所有的組件見共享一些方法

ES6中使用mixin需要插件支持

npm install react-mixin --save

使用

//mixin.js
const MixinLog = {
    //有自身的生命周期
    componentDidMount(){
        console.log("MixinLog ComponentDidMount");
    },
    log(){
        console.log("Mixins");
    }
};

//暴露供外部使用
export default MixinLog;

//body.js
//導(dǎo)入MixinLog 
import MixinLog from "./component/mixin.js";
import ReactMixin from "react-mixin";
export default class Body extends React.Component{

     handler(){
        //調(diào)用MixinLog中方法
        MixinLog.log();
     }
   
    render(){
        return (
            

               
{this.props.username}
            
        )
    }
}

ReactMixin(Body.prototype,MixinLog);

內(nèi)聯(lián)樣式

原生中用 - 連接的樣式屬性，在這里要采用駝峰寫法或加引號(hào)""，屬性值一律加引號(hào)"" ，這樣的書寫方式，實(shí)際上就是加入了內(nèi)聯(lián)樣式，結(jié)構(gòu)和樣式混在一起，不是很好的做法。并且這種寫法，不能使用偽類、動(dòng)畫。

export default class Header extends React.Component{
    
    render(){
    //將樣式定義為一個(gè)變量
    //注意樣式屬性的書寫
    const styleComponentHeader = {
        header:{
            backgroundColor:"#333",
            color:"#fff",
            "padding-top":"15px",
            paddingBottom:"15px",
        },
        //還可以定義其他樣式
    };

        return (
            //使用樣式，這樣寫，實(shí)際上就是內(nèi)聯(lián)樣式
            

                
頭部
            
        )
    }
}

也可以在index.html文件中，引入css文件，并在需要使用樣式的地方加入類名(className)，但這種寫法會(huì)污染全局。

//index.html

    



//組件
export default class Header extends React.Component{
    
    render(){
        return (
            //使用類名，加入樣式
            

                
頭部
            
        )
    }
}

內(nèi)聯(lián)樣式中的表達(dá)式

根據(jù)state的值，控制樣式

export default class Header extends React.Component{
    
    constructor(){
        super();
        this.state={
            miniHeader:false
        }
    }
    //點(diǎn)擊頭部，樣式發(fā)生變化
    swithHeader(){
        this.setState({
           miniHeader:!this.state.miniHeader
        })
    }
    
    render(){
    const styleComponentHeader = {
        header:{
            backgroundColor:"#333",
            color:"#fff",
            "padding-top":"15px",
            //根據(jù)state的值，變化 paddingBottom的值
            //樣式中可以使用表達(dá)式
            paddingBottom: (this.state.miniHeader)?"3px":"15px"
        },
    };

        return (
        
            

                
頭部
            
        )
    }
}

CSS模塊化，學(xué)習(xí)如何使用require進(jìn)行樣式的引用
問題：

怎樣實(shí)現(xiàn)css的按需加載，使用這個(gè)模塊時(shí)，只加載這個(gè)模塊的樣式。

模塊之間的樣式是相互獨(dú)立的，即使使用相同的類名，也不會(huì)相互影響。

-

使用webpack，安裝相關(guān)插件

//使用require導(dǎo)入css文件
npm install css-loader --save
//計(jì)算之后的樣式加入頁面中
npm install style-loader --save

webpack.config.js文件中進(jìn)行配置
將css文件導(dǎo)入相應(yīng)的組件后，會(huì)生成一個(gè)對(duì)應(yīng)關(guān)系

footer:_footer_minifooter_vxs08s

_footer_minifooter_vxs08s是按照一定的規(guī)則生成一個(gè)唯一的類名，當(dāng)我們?yōu)楫?dāng)前組件應(yīng)用 .footer 類的時(shí)候，就會(huì)按照這個(gè)對(duì)應(yīng)關(guān)系去樣式文件中找，然后應(yīng)用響應(yīng)的樣式。
實(shí)際上是改變了樣式文件中類的名稱，使其唯一。
這樣即使將所有文件打包到一起，也不會(huì)引起沖突。
不同的文件可以 使用相同的類名，不會(huì)沖突，因?yàn)槟K化之后，類名都進(jìn)行了轉(zhuǎn)換。

module:{
        loaders:[
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015","react"]
                }
            },
            {
                test: /.css$/,
                //modules 模塊化配置
                loader: "style-loader!css-loader?modules"
            },
        ]
    },

使用

//footer.css

.footer{
    background-color:#333;
}


//Footer組件
//導(dǎo)入css樣式，這樣這個(gè)樣式文件只作用于這個(gè)組件
var  footerCss = require("./css/footer.css");

export default class Footer extends React.Component{
    
    render(){
        return (
            
        )
    }
}

總結(jié)

為什么要css模塊化

可以避免全局污染、命名混亂

模塊化的優(yōu)點(diǎn)

所有的樣式都是local的，解決的命名沖突和全局污染的問題

class名生成規(guī)則配置靈活，可以以此來壓縮class名（在webpack.config.js文件中配置）

使用某個(gè)組件時(shí)，只要import組件，再使用即可，無需管理樣式。

不需要像書寫內(nèi)部樣式一樣，屬性的名稱需要駝峰寫法。只需在webpack.config.js中進(jìn)行配置，書寫時(shí)，還是我們熟悉的css。

JSX樣式與CSS樣式互轉(zhuǎn)

線上轉(zhuǎn)換工具
http://staxmanade.com/CssToRe...

Router 概念

控制頁面之間的層級(jí)關(guān)系
底層機(jī)制
通過狀態(tài)的改變，導(dǎo)致組件從新渲染，從而改變頁面顯示

React: state/props -> Component ->UI

通過改變url，導(dǎo)致Router變化，從而改變頁面顯示

React:location(hasj) -> Router ->UI

hashHistory && browserHistory

慕課老師的demo使用的是hashHistory,而另一種方式則是使用browserHistory。

如果希望使用browserHistory達(dá)到hashHistory的效果，則需要做2件事情：

1、服務(wù)器支持。如果開發(fā)服務(wù)器使用的是webpack-dev-server，加上--history-api-fallback參數(shù)就可以了。
2、作為項(xiàng)目入口的HTML文件中，相關(guān)外鏈的資源路徑都要改為絕對(duì)路徑，即以"/"根路徑開頭。

安裝

// 版本 2.8.1
npm install react-router

使用

component指定組件
path 指定路由的匹配規(guī)則

router可以進(jìn)行嵌套
ComponentDetails嵌套在Index頁面中，我們要在Index中進(jìn)行展示。

//index.js
export default class Index extends React.Component{

    render(){
        return ( 
            

                //此處展示的是ComponentDetails頁面
                {this.props.children} 
            
        )
    }
}

import React from "react";
import ReactDOM from "react-dom";
import Index from "./index";
import { Router, Route, hashHistory} from "react-router";
import ComponentList from "./components/list";
import ComponentHeader from "./components/header";
import ComponentDetails from "./components/details";

export  default class Root extends React.Component{
    render(){
        //這里替換了之前的index，變成了程序的入口 (注意修改webpack.conf.js中的入口文件為root.js)
        return (
            
                
                    
                
                
                
             
        );
    };
}


ReactDOM.render(
    ,
    document.getElementById("example")
);

有了Router之后，用Link進(jìn)行跳轉(zhuǎn)

首頁
嵌套的詳情頁面

Router 參數(shù)傳遞

//在Router中定義參數(shù)名稱


//在Link中傳入?yún)?shù)


//在list組件頁面中讀取傳入的參數(shù)
render(){
    
{this.props.params.id}
}

//初始化  建立初始化文件
npm init

package.json文件

npm的start是一個(gè)特殊的腳本名稱，它的特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行相關(guān)命令，如果對(duì)應(yīng)的此腳本名稱不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用npm run {script name}如npm run build

{
  "name": "reactconf",//項(xiàng)目名稱
  "version": "1.0.0",//項(xiàng)目版本
  "description": "",//項(xiàng)目描述
  "main": "root.js",//入口文件
  //自定義的腳本任務(wù)
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --inline --content-base ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^2.10.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "css-loader": "^0.25.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-mixin": "^2.0.2",
    "react-router": "^2.8.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0"
  }
}

安裝依賴

babelify
Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái)，它的強(qiáng)大之處表現(xiàn)在可以通過編譯幫你達(dá)到以下目的：

下一代的JavaScript標(biāo)準(zhǔn)（ES6，ES7），這些標(biāo)準(zhǔn)目前并未被當(dāng)前的瀏覽器完全的支持

使用基于JavaScript進(jìn)行了拓展的語言，比如React的JSX

babel-preset-react react轉(zhuǎn)碼規(guī)則
babel-preset-es2015 ES2015轉(zhuǎn)碼規(guī)則

npm install react react-dom babelify --save

npm install  babel-preset-react babel-preset-es2015 --save

使用webpack打包

安裝相關(guān)的包

npm install webpack -g 
npm install webpack-dev-server -g
npm install webpack  --save
npm install webpack-dev-server --save

//webpack.config.js

// 引用webpack相關(guān)的包
var webpack = require("webpack");
var path = require("path");
var WebpackDevServer = require("webpack-dev-server");

module.exports = {
    //入口文件  __dirname 項(xiàng)目根目錄
    //“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄
    context:  __dirname + "/src",
    entry:"./js/root.js",
    
    //loaders
    module:{
        loaders:[
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                    presets: ["es2015","react"]
                }
            },
            //下面是使用 ant-design 的配置文件 不再使用 ?modules 因?yàn)闃邮绞侨值?不再需要局部樣式
            {
                test: /.css$/,
                //modules  模塊化配置
                loader: "style-loader!css-loader?modules"
            },
        ]
    },
    
    //出口文件
    output: {
        path:   __dirname + "/src/",
        filename: "bundle.js"
    },
};

打包命令

// 正常情況下
webpack

//配置熱加載情況下
webpack-dev-server --inline

使用 --watch 可是自動(dòng)打包，但不會(huì)自動(dòng)刷新

可以用content-base設(shè)定 webpack-dev-server 伺服的 directory （就是指管這個(gè)路徑下文件的變動(dòng)），如果不進(jìn)行設(shè)定的話，默認(rèn)是在當(dāng)前目錄下

webpack-dev-server --content-base -src --inline

為什么使用webpack

現(xiàn)今的很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法

模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言,使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識(shí)別.

Scss，less等CSS預(yù)處理器

...

這些改進(jìn)確實(shí)大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識(shí)別,而手動(dòng)處理又是非常繁瑣的，這就為WebPack類的工具的出現(xiàn)提供了需求。

webpack并不強(qiáng)制你使用某種模塊化方案，而是通過兼容所有模塊化方案讓你無痛接入項(xiàng)目，當(dāng)然這也是webpack牛逼的地方

webpack和gulp的區(qū)別

gulp是工具鏈、構(gòu)建工具，可以配合各種插件做js壓縮，css壓縮，less編譯 替代手工實(shí)現(xiàn)自動(dòng)化工作

1.構(gòu)建工具

2.自動(dòng)化

3.提高效率用

webpack是文件打包工具，可以把項(xiàng)目的各種js文、css文件等打包合并成一個(gè)或多個(gè)文件，主要用于模塊化方案，預(yù)編譯模塊的方案

1.打包工具

2.模塊化識(shí)別

3.編譯模塊代碼方案

雖然都是前端自動(dòng)化構(gòu)建工具，但看他們的定位就知道不是對(duì)等的。

gulp嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。

webpack更是明顯強(qiáng)調(diào)模塊化開發(fā)，而那些文件壓縮合并、預(yù)處理等功能，不過是他附帶的功能。

webpack工作方式

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。

Loaders

通過使用不同的loader，webpack通過調(diào)用外部的腳本或工具可以對(duì)各種各樣的格式的文件進(jìn)行處理，比如說分析JSON文件并把它轉(zhuǎn)換為JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的JS文件?；蛘哒f對(duì)React的開發(fā)而言，合適的Loaders可以把React的JSX文件轉(zhuǎn)換為JS文件。

Loaders需要多帶帶安裝并且需要在webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置選項(xiàng)包括以下幾方面：

test：一個(gè)匹配loaders所處理的文件的拓展名的正則表達(dá)式（必須）
loader：loader的名稱（必須）
include/exclude:手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
query：為loaders提供額外的設(shè)置選項(xiàng)（可選）

// MediaQuery 進(jìn)行移動(dòng)端適配
var MediaQuery = require("react-responsive");

fetch 向后臺(tái)請(qǐng)求數(shù)據(jù)

響應(yīng)式 以1224px為分界