?

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、銅梁網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

?

?

目錄

React項(xiàng)目：...1

win下開(kāi)發(fā)環(huán)境的搭建：...1

簡(jiǎn)介：...5

例，測(cè)試程序：...7

例，組件狀態(tài)：...9

例，復(fù)雜例子：...11

?

?

?

React項(xiàng)目：

?

win下開(kāi)發(fā)環(huán)境的搭建：

?

react-mobx-starter-master.zip?? #解壓此文件到指定位置，該位置即為項(xiàng)目根目錄

?

$ npm install?? #或$npm i，會(huì)按照package.json的配置，安裝依賴模塊，生成node_modules目錄（安裝所有依賴的模塊）

……

added 1212 packages in 135.079s

?

?

配置文件說(shuō)明：

package.json文件：

npm init后產(chǎn)生的文件，記錄項(xiàng)目信息，項(xiàng)目依賴；

需要修改name、version、description、repository、author、license，改好后可開(kāi)始開(kāi)發(fā)；

{

? "name": "react-mobx-starter",

? "version": "1.0.0",

? "description": "react mobx starter",

? "main": "index.js",

? "scripts": {?? #項(xiàng)目管理，start指定啟動(dòng)webpack的dev server，build使用webpack構(gòu)建打包

??? "test": "test",

??? "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",

??? "build": "webpack -p --config webpack.config.prod.js"

? },

? "repository": {},?? #版本管理，如有用type和url定義，"type": "git","url":"……"

? "author": "magedu",

? "license": "MIT",

? "devDependencies": {?? #開(kāi)發(fā)時(shí)依賴

??? "babel-core": "^6.24.1",?? #babel轉(zhuǎn)譯，因?yàn)殚_(kāi)發(fā)用了很多ES6語(yǔ)法，從6.X開(kāi)始babel拆分成很多插件，需要什么引入什么，babel-core為核心

??? "babel-jest": "^19.0.0",

??? "babel-loader": "^6.4.1",?? #webpack的loader,webpack是基于loader的

??? "babel-plugin-transform-decorators-legacy": "^1.3.4",?? #轉(zhuǎn)換裝飾器用

??? "babel-plugin-transform-runtime": "^6.23.0",

??? "babel-preset-env": "^1.4.0",?? #babel-preset-X，預(yù)設(shè)的轉(zhuǎn)換插件

??? "babel-preset-react": "^6.24.1",

??? "babel-preset-stage-0": "^6.24.1",

??? "css-loader": "^0.28.0",?? #css相關(guān)，包括css-loader、less、less-loader、style-loader

??? "html-webpack-plugin": "^2.28.0",

??? "jest": "^19.0.2",

??? "less": "^2.7.2",

??? "less-loader": "^4.0.3",

??? "react-hot-loader": "^3.0.0-beta.6",?? #熱加載插件，在改動(dòng)保存后，直接在頁(yè)面上就能反饋，不需要手動(dòng)刷新

??? "source-map": "^0.5.6",?? #文件打包，js會(huì)合并或壓縮，沒(méi)法調(diào)試，用它來(lái)看js源文件是什么，source-map-loader也需要webpack的loader

??? "source-map-loader": "^0.2.1",

??? "style-loader": "^0.16.1",

??? "uglify-js": "^2.8.22",

??? "webpack": "^2.4.1",?? #打包工具

??? "webpack-dev-server": "^2.4.2"?? #啟動(dòng)一個(gè)開(kāi)發(fā)的server

? },

??"dependencies": {?? #運(yùn)行時(shí)依賴

??? "antd": "^2.9.1",?? #基于react實(shí)現(xiàn)，螞蟻金服開(kāi)源的react的UI庫(kù)，做中后臺(tái)管理非常方便

??? "axios": "^0.16.1",?? #異步請(qǐng)求支持

??? "babel-polyfill": "^6.23.0",?? #解決瀏覽器api不支持的問(wèn)題，可抹平差異化

??? "babel-runtime": "^6.23.0",

??? "mobx": "^3.1.9",?? #狀態(tài)管理庫(kù)，透明化

??? "mobx-react": "^4.1.8",

??? "mobx-react-devtools": "^4.2.11",

??? "prop-types": "^15.5.8",

??? "react": "^15.5.4",?? #react開(kāi)發(fā)的主框架，reaact-dom支持DOM，react-router支持路由，react-router-dom，DOM綁定路由；react和mobx是強(qiáng)強(qiáng)聯(lián)合

??? "react-dom": "^15.5.4",

??? "react-router": "^4.1.1",

??? "react-router-dom": "^4.1.1"

? }

}

?

.babelrc文件：

babel轉(zhuǎn)譯的配置文件，按官網(wǎng)給的配置：

{

? "presets": [

??? "react",

??? "env",

??? "stage-0"

? ],

? "plugins": ["transform-decorators-legacy", "transform-runtime"]

}

?

webpack.config.dev.js文件：

這是一個(gè)符合commonjs的模塊，webpack配置；

const path = require('path');

const webpack = require('webpack');

module.exports = {?? #導(dǎo)出

??? devtool: 'source-map',?? #導(dǎo)出devtools是source-map

??? entry: {?? #描述入口，entry如果是一個(gè)字符串，定義就是入口文件；如果是一個(gè)數(shù)組，里面包含入口文件，另一個(gè)參數(shù)可用來(lái)配置一個(gè)服務(wù)器；這里配置的是熱加載插件，可自動(dòng)刷新

?????? ?'app': [

??????????? 'react-hot-loader/patch',

??????????? './src/index'

??????? ]

??? },

??? output: {?? #輸出，輸出目錄是__dirname+'dist'，文件名是bundle.js

??????? path: path.join(__dirname, 'dist'),

??????? filename: 'bundle.js',

??????? publicPath: '/assets/'

?? ?},

??? resolve: {?? #指定解析什么文件類型，此處設(shè)置對(duì)js文件解析

??????? extensions: ['.js']

??? },

??? module: {?? #模塊

??????? rules: [?? #對(duì).js結(jié)尾但不在node_modules目錄的文件使用熱加載loader和轉(zhuǎn)譯babel-loader

??????????? {

??????????????? test: /\.js$/,

??????????????? exclude: /node_modules/,?? #打包排除目錄，重要，一定要有，否則編譯就把這個(gè)目錄下所有文件拿出來(lái)，超大無(wú)比

??????????????? use: [

??????????????????? { loader: 'react-hot-loader/webpack' },

??????????????????? { loader: 'babel-loader' }

??????????????? ]

??????????? },

????????? ??{

??????????????? test: /\.less$/,

??????????????? use: [

??????????????????? { loader: "style-loader" },

??????????????????? { loader: "css-loader" },

??????????????????? { loader: "less-loader" }

??????????????? ]

??????????? }

??????? ]

??? },

??? plugins: [?? #webpack的插件

??????? new webpack.optimize.OccurrenceOrderPlugin(true),

??????? new webpack.HotModuleReplacementPlugin(),

??????? new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('development')}})

??? ],

??? devServer: {?? #開(kāi)發(fā)用server，啟動(dòng)端口3000，支持熱加載；proxy，指定訪問(wèn)/api開(kāi)頭的路徑都代理到http://127.0.0.1:8080

??????? compress: true,

??????? port: 3000,

??????? publicPath: '/assets/',

??????? hot: true,

??????? inline: true,

??????? historyApiFallback: true,

??????? stats: {

??????????? chunks: false

??????? },

??????? proxy: {

??????????? '/api': {

??????????????? target: 'http://127.0.0.1:8080',

??????????????? changeOrigin: true

??????????? }

??????? }

??? }

};

?

jsconfig.json文件：

vscode的本地配置文件，覆蓋當(dāng)前配置；

{

??? "compilerOptions": {

??????? "target": "ES6",

??????? "module": "commonjs",

??????? "experimentalDecorators": true

??? }

}

?

?

$ npm start?? #啟動(dòng)項(xiàng)目，在項(xiàng)目根目錄下

?

http://127.0.0.1:3000/?? #啟動(dòng)成功，訪問(wèn)

“查看網(wǎng)頁(yè)源代碼”?? #下載到用戶本地執(zhí)行

F12，Network，都是動(dòng)態(tài)生成的；

VS中打開(kāi)react-mobx-starter-master/index.html，修改

段，保存，重新打開(kāi)網(wǎng)頁(yè)，網(wǎng)頁(yè)內(nèi)容會(huì)有變化；

VS中查看reac-mobx-starter-master/src/index.js；

?

?

簡(jiǎn)介：

React是facebook開(kāi)發(fā)并開(kāi)源（2013年開(kāi)源）的前端框架；

11年他們團(tuán)隊(duì)在市面上沒(méi)找到合適的MVC框架，就自己寫(xiě)了一個(gè)js框架，用在大名鼎鼎的Instagram圖片分享社區(qū)網(wǎng)絡(luò)；

React解決的是前端MVC框架中的View視圖層的問(wèn)題；

?

Virtual DOM：

document object model，文檔對(duì)象模型；

將網(wǎng)頁(yè)內(nèi)所有內(nèi)容映射到一棵樹(shù)型結(jié)構(gòu)的層級(jí)對(duì)象模型上，browser提供對(duì)DOM的支持，用戶可用腳本調(diào)用DOM API來(lái)動(dòng)態(tài)的修改DOM結(jié)點(diǎn)，從而達(dá)到修改網(wǎng)頁(yè)的目的，這種修改在browser中完成，browser會(huì)根據(jù)DOM的改變重繪改變的DOM結(jié)點(diǎn)部分；

修改DOM重新渲染代價(jià)太高，前端框架為了提高效率，盡量減少DOM的重繪，提出了virtual dom，所有的修改都是在當(dāng)前virtual dom上完成的，通過(guò)比較算法，找出browser DOM之間的差異，使用這個(gè)差異操作DOM，browser只需要渲染這部分變化就行；

React實(shí)現(xiàn)了DOM diff算法，可高效比對(duì)virtual DOM和DOM的差異（類似事務(wù)，一塊提交）；

virtual DOM實(shí)質(zhì)是內(nèi)存中的數(shù)據(jù)結(jié)構(gòu)；

?

支持JSX語(yǔ)法：

JSX，是一種javascript和xml混寫(xiě)的語(yǔ)法，是javascript的擴(kuò)展；不用函數(shù)調(diào)用，就可知道結(jié)構(gòu)；

JSX語(yǔ)法是XML，要求所有元素必須閉合，如
不能寫(xiě)成
；

JSX規(guī)范：

首字母小寫(xiě)就是html標(biāo)記，首字母大寫(xiě)就是組件；

要求嚴(yán)格的html標(biāo)記，要求所有標(biāo)簽必須閉合，如
，/前留一空格；

單行省略小括號(hào)，多行使用小括號(hào)；

元素有嵌套建議多行，注意縮進(jìn)；

jsx表達(dá)式，使用{}括起來(lái)，如果大括號(hào)內(nèi)使用了引號(hào)，會(huì)當(dāng)作字符串處理，如

React.render(

?

?document.getElementById('example')

);

?

state組件狀態(tài)：

每一個(gè)React組件都有一個(gè)狀態(tài)變量（各是各的），它是一個(gè)javascript對(duì)象，可為它定義屬性來(lái)保存值，如果狀態(tài)變化了，會(huì)觸發(fā)UI的重新渲染；

state是組件自己內(nèi)部使用的，是組件私有的屬性；

?

組件是封裝的最小單位；

jsx內(nèi)只允許表達(dá)式，三目運(yùn)算符即為表達(dá)式（換為if...else即為語(yǔ)句）；

getElementById，通常用id找，也有用name找；

render()內(nèi)，一般認(rèn)為state是變化過(guò)的，建議不要再對(duì)state作變化；

setTimeout()和setInterval()是異步處理的，是在render()之后改的；

state對(duì)象中，屬性的值可以是字符串、對(duì)象、數(shù)組等，只要這個(gè)值發(fā)生了變化就可以；

組件間的通信用props；

?

?

例，測(cè)試程序：

src/index.js

import React from 'react';?? //導(dǎo)入React模塊，主框架

import ReactDom from 'react-dom';?? //導(dǎo)入ReactDom模塊

?

class Root extends React.Component {?? //方1，推薦用jsx語(yǔ)法，組件類定義，從React.Component類上繼承，這個(gè)類生成JSXElement對(duì)象，即react元素；叫react組件，或react元素，或jsx元素

?render() {?? //渲染函數(shù)，返回組件中渲染的內(nèi)容，只能返回唯一一個(gè)頂級(jí)元素，重要

???return

? }

}

?

// class Root extends React.Component {?? //方2

//?? render() {

//???? return React.createElement('div', null, 'welcome to magedu.');

//?? }

// }

?

?

ReactDom.render(,document.getElementById('root'));?? //第一個(gè)參數(shù)是JSXElement對(duì)象，第二個(gè)參數(shù)document.getElementById('root')是DOM的Element元素，將React元素添加到Dom的Element元素中并渲染，此處root要與index.html的

// ReactDom.render(React.createElement(Root), document.getElementById('root'));?? //方2，還可使用React.createElement創(chuàng)建react元素，第一參數(shù)是React組件或一個(gè)HTML的標(biāo)簽名稱（如div、span）

?

src/index.js保存后，會(huì)自動(dòng)編譯，并重新裝載刷新browser端界面；

?

增加一個(gè)子元素：

import React from 'react';

import ReactDom from 'react-dom';

?

class SubEle extends React.Component {

?render() {

???return

???// return

???// return

???// return

???// return

? }

}

?

class Root extends React.Component {

?render() {

???return (

?????

??? );

? }

}

?

ReactDom.render(,document.getElementById('root'));

?

http://127.0.0.1:3000/api/index.js

504 Gateway Timeout?

注：可用于做代理事情；

?

?

例，組件狀態(tài)：

import React from 'react';

import ReactDom from 'react-dom';

?

class SubEle extends React.Component {

?render() {

???return

? }

}

?

class Root extends React.Component {

?state = {?? //內(nèi)部私有，此類之外是不允許訪問(wèn)的，這種方式不好

???p1:'magedu',

???p2:'.com'

? };

?

?dealsth() {

???this.setState({p1:'www.magedu'});

? }

?

?render() {

???// this.state.p1 = 'www.magedu';?? //V，可以更新

???// this.setState({p1:'www.magedu'});?? //X，不可以對(duì)還在更新中的state使用setState，browser的Console上有警告Warning

???setTimeout(()=> this.setState({p1:'magedu',p2:'.net'}),5000);?? //V，可用延時(shí)函數(shù)操作，5s后頁(yè)面自動(dòng)刷新；this.setState({p1:'magedu'})并不會(huì)把state對(duì)象的所有屬性覆蓋掉，只是改了對(duì)應(yīng)p1屬性的值

???// this.dealsth();?? //X，通過(guò)方法操作也不可以

?

???return (

?????

??? );

? }

}

?

ReactDom.render(,document.getElementById('root'));

?

?

this.setState({p1:'www.magedu'});?? //X，表現(xiàn)如下

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

?

每5s會(huì)重繪；

?

?

例，復(fù)雜例子：

傳統(tǒng)的html編程方式：

{/*

?

???

?

?

???

?

*/}

注：

head與http的響應(yīng)頭沒(méi)關(guān)系，head是響應(yīng)頭中body部分的頭，head中的