70react_環境搭建_組件狀態

?

?

?

目錄

React項目：... 1

win下開發環境的搭建：... 1

簡介：... 5

例，測試程序：... 7

例，組件狀態：... 9

例，復雜例子：... 11

?

?

?

React項目：

?

win下開發環境的搭建：

?

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

?

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

……

added 1212 packages in 135.079s

?

?

配置文件說明：

package.json文件：

npm init后產生的文件，記錄項目信息，項目依賴；

需要修改name、version、description、repository、author、license，改好后可開始開發；

{

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

? "version": "1.0.0",

? "description": "react mobx starter",

? "main": "index.js",

? "scripts": {?? #項目管理，start指定啟動webpack的dev server，build使用webpack構建打包

??? "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": {?? #開發時依賴

??? "babel-core": "^6.24.1",?? #babel轉譯，因為開發用了很多ES6語法，從6.X開始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",?? #轉換裝飾器用

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

??? "babel-preset-env": "^1.4.0",?? #babel-preset-X，預設的轉換插件

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

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

??? "css-loader": "^0.28.0",?? #css相關，包括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",?? #熱加載插件，在改動保存后，直接在頁面上就能反饋，不需要手動刷新

??? "source-map": "^0.5.6",?? #文件打包，js會合并或壓縮，沒法調試，用它來看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"?? #啟動一個開發的server

? },

??"dependencies": {?? #運行時依賴

??? "antd": "^2.9.1",?? #基于react實現，螞蟻金服開源的react的UI庫，做中后臺管理非常方便

??? "axios": "^0.16.1",?? #異步請求支持

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

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

??? "mobx": "^3.1.9",?? #狀態管理庫，透明化

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

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

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

??? "react": "^15.5.4",?? #react開發的主框架，reaact-dom支持DOM，react-router支持路由，react-router-dom，DOM綁定路由；react和mobx是強強聯合

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

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

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

? }

}

?

.babelrc文件：

babel轉譯的配置文件，按官網給的配置：

{

? "presets": [

??? "react",

??? "env",

??? "stage-0"

? ],

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

}

?

webpack.config.dev.js文件：

這是一個符合commonjs的模塊，webpack配置；

const path = require('path');

const webpack = require('webpack');

module.exports = {?? #導出

??? devtool: 'source-map',?? #導出devtools是source-map

??? entry: {?? #描述入口，entry如果是一個字符串，定義就是入口文件；如果是一個數組，里面包含入口文件，另一個參數可用來配置一個服務器；這里配置的是熱加載插件，可自動刷新

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

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

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

??????? ]

??? },

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

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

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

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

?? ?},

??? resolve: {?? #指定解析什么文件類型，此處設置對js文件解析

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

??? },

??? module: {?? #模塊

??????? rules: [?? #對.js結尾但不在node_modules目錄的文件使用熱加載loader和轉譯babel-loader

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

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

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

??????????????? 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: {?? #開發用server，啟動端口3000，支持熱加載；proxy，指定訪問/api開頭的路徑都代理到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的本地配置文件，覆蓋當前配置；

{

??? "compilerOptions": {

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

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

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

??? }

}

?

?

$ npm start?? #啟動項目，在項目根目錄下

?

http://127.0.0.1:3000/?? #啟動成功，訪問

“查看網頁源代碼”?? #下載到用戶本地執行

F12，Network，都是動態生成的；

VS中打開react-mobx-starter-master/index.html，修改<h2>段，保存，重新打開網頁，網頁內容會有變化；

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

?

?

簡介：

React是facebook開發并開源（2013年開源）的前端框架；

11年他們團隊在市面上沒找到合適的MVC框架，就自己寫了一個js框架，用在大名鼎鼎的Instagram圖片分享社區網絡；

React解決的是前端MVC框架中的View視圖層的問題；

?

Virtual DOM：

document object model，文檔對象模型；

將網頁內所有內容映射到一棵樹型結構的層級對象模型上，browser提供對DOM的支持，用戶可用腳本調用DOM API來動態的修改DOM結點，從而達到修改網頁的目的，這種修改在browser中完成，browser會根據DOM的改變重繪改變的DOM結點部分；

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

React實現了DOM diff算法，可高效比對virtual DOM和DOM的差異（類似事務，一塊提交）；

virtual DOM實質是內存中的數據結構；

?

支持JSX語法：

JSX，是一種javascript和xml混寫的語法，是javascript的擴展；不用函數調用，就可知道結構；

JSX語法是XML，要求所有元素必須閉合，如<br />不能寫成<br>；

JSX規范：

首字母小寫就是html標記，首字母大寫就是組件；

要求嚴格的html標記，要求所有標簽必須閉合，如<br />，/前留一空格；

單行省略小括號，多行使用小括號；

元素有嵌套建議多行，注意縮進；

jsx表達式，使用{}括起來，如果大括號內使用了引號，會當作字符串處理，如<div>{'2>1?true:false'}</div>，里面的表達式就為字符串了；

React.render(

? <div>

??? <div>

????? <div>content</div>

??? </div>

? </div>,

? document.getElementById('example')

);

?

state組件狀態：

每一個React組件都有一個狀態變量（各是各的），它是一個javascript對象，可為它定義屬性來保存值，如果狀態變化了，會觸發UI的重新渲染；

state是組件自己內部使用的，是組件私有的屬性；

?

組件是封裝的最小單位；

jsx內只允許表達式，三目運算符即為表達式（換為if...else即為語句）；

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

render()內，一般認為state是變化過的，建議不要再對state作變化；

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

state對象中，屬性的值可以是字符串、對象、數組等，只要這個值發生了變化就可以；

組件間的通信用props；

?

?

例，測試程序：

src/index.js

import React from 'react';?? //導入React模塊，主框架

import ReactDom from 'react-dom';?? //導入ReactDom模塊

?

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

? render() {?? //渲染函數，返回組件中渲染的內容，只能返回唯一一個頂級元素，重要

??? return <div>hello magedu</div>?? //必須返回一個頂級元素，若為<div>aa</div><hr>則報錯，JSX語法是XML，要求所有元素必須閉合

? }

}

?

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

//?? render() {

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

//?? }

// }

?

?

ReactDom.render(<Root />, document.getElementById('root'));?? //第一個參數<Root />是JSXElement對象，第二個參數document.getElementById('root')是DOM的Element元素，將React元素添加到Dom的Element元素中并渲染，此處root要與index.html的<div id="root"></div>對應

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

?

src/index.js保存后，會自動編譯，并重新裝載刷新browser端界面；

?

增加一個子元素：

import React from 'react';

import ReactDom from 'react-dom';

?

class SubEle extends React.Component {

? render() {

??? return <div>sub content</div>;

??? // return <div>{1 + 2}</div>;?? //V

??? // return <div>{1<2?'true':'false'}</div>;?? //V

??? // return <div>{'1<2?true:false'}</div>;?? //X,表格式顯示為字符串

??? // return <div>{1<2?true:false}</div>;?? //X，true和false去掉引號，browser將不會顯示

? }

}

?

class Root extends React.Component {

? render() {

??? return (

????? <div>?? //首字母小寫是html標記

??????? <h3>welcome magedu.com</h3>

??????? <br />

??????? <SubEle />?? //首字母大寫是組件

????? </div>

??? );

? }

}

?

ReactDom.render(<Root />, document.getElementById('root'));

?

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

504 Gateway Timeout?

注：可用于做代理事情；

?

?

例，組件狀態：

import React from 'react';

import ReactDom from 'react-dom';

?

class SubEle extends React.Component {

? render() {

??? return <div>sub content</div>;

? }

}

?

class Root extends React.Component {

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

??? p1:'magedu',

??? p2:'.com'

? };

?

? dealsth() {

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

? }

?

? render() {

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

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

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

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

?

??? return (

????? <div>

??????? <h3>welcome to {this.state.p1}{this.state.p2}</h3>

??????? <br />

??????? <SubEle />

????? </div>

??? );

? }

}

?

ReactDom.render(<Root />, document.getElementById('root'));

?

?

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

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會重繪；

?

?

例，復雜例子：

傳統的html編程方式：

{/* <html>

? <head>

??? <script type="text/javascript">

????? function getEventTrigger(event) {

??????? x = event.target;

??????? alert("trigger's element id is: " + x.id);

????? }

??? </script>

? </head>

? <body>

??? <div id="t1" onmousedown="getEventTrigger(event)">

????? click me,it will be trigger a event,and alert window

??? </div>

? </body>

</html> */}

注：

head與http的響應頭沒關系，head是響應頭中body部分的頭，head中的<script>是不顯示的；可在此head中加title（即browser中標簽部分），另title上一行可加<meta>元信息（給SE或爬蟲看的）；

div的id是t1，鼠標按下事件（onmousedown，另還有onmouseup和onmouseclick）捆綁了一個函數，只要鼠標按下就會觸發調用getEventTrigger函數，瀏覽器會送給它一個參數event（event是瀏覽器送進來的對象），event是事件對象，當事件觸發時，event包含觸發這個事件的對象；

?

用react實現：

import React from "react";

import ReactDom from 'react-dom';

?

class Toggle extends React.Component {

? state = {

??? flag: true

? };

?

? handleClick(event) {

??? console.log(event);

??? console.log(event.target);

??? console.log(event.target.id);

??? console.log(event.target === this);

??? console.log(this);

??? console.log(this.state);

??? let x = event.target;

??? alert("觸發的元素的id是：" + x.id);

??? this.setState({flag:!this.state.flag});

? }

?

? render() {

??? let text = this.state.flag?'true':'flase';

??? return (<div id='t1' onClick={this.handleClick.bind(this)}>?? //onClick小駝峰，一般用這個就夠了，另onMouseUp和onMouseDown要結合；this.handleClick.bind(this)此處是返回函數，在之前的對象模型中解決this指針問題用到的bind最后要函數調用

????? 點擊這句話，會觸發一個事件，并彈出一個警示框<br />

????? flag = {text}

??? </div>);

? }

}

?

class Root extends React.Component {

? render() {

??? return (<div>

????? my first test<hr />?? //此處的<h3>已不完全是html了，可用css控制或js控制

????? <Toggle />

??? </div>);

? }

}

?

ReactDom.render(<Root />, document.getElementById('root'));

注：

傳統方式是分開寫（混著寫，html+css+js都要會），現合到一個class里了；與顯示相關的放到render里了；

鼠標操作都是通過事件來捕捉的，僅是在指定的div上點，在其它地方點和這個div上的事件沒關系；

項目根下的index.html即模板文件，一個網頁即解決所有問題（換底圖除外），即SPA，single page web application只有一張web頁面的應用，在<div>里嵌入不同的內容；

Toggle類，有自己的state屬性；

當render完成后，網頁上有一個div標簽，div標簽對象捆綁了一個click事件的處理函數，div標簽內有文本內容；如果點擊左鍵，就觸發了onClick關聯的handleClick函數，在這個函數里對狀態值改變，狀態值state的改變將引發render重繪；

如果組件自己的state變了，只會觸發自己的render方法重繪；

{this.handleClick.bind(this)}，表達式內不能加引號，要綁定this，否則當觸發捆綁的函數時，this是函數執行的上下文決定的，this已經不是觸發事件的對象了；

console.log(event.target.id)，取回產生事件的對象的id，但是這不是我們封裝的組件對象，所以console.log(event.target===this)為false，所以這里一定要用this，而這個this是通過綁定來的；

?

?

?

?

?

?