export/import導(dǎo)出/導(dǎo)入模塊

模塊功能主要由兩個(gè)命令構(gòu)成：export和import椿胯。export命令用于規(guī)定模塊的對(duì)外接口涣澡，import命令用于輸入其他模塊提供的功能辐脖。

ES6模塊不是對(duì)象棱诱，而是通過export命令顯式指定輸出的代碼臼疫，輸入時(shí)也采用靜態(tài)命令的形式砰琢。

// ES6模塊

import { stat, exists, readFile } from  'fs';

上面代碼的實(shí)質(zhì)是從fs模塊加載3個(gè)方法仰坦，其他方法不加載履植。這種加載稱為“編譯時(shí)加載”，即ES6可以在編譯時(shí)就完成模塊加載悄晃，效率要比CommonJS模塊的加載方式高玫霎。當(dāng)然，這也導(dǎo)致了沒法引用ES6模塊本身妈橄，因?yàn)樗皇菍?duì)象庶近。

由于ES6模塊是編譯時(shí)加載，使得靜態(tài)分析成為可能眷蚓。有了它鼻种，就能進(jìn)一步拓寬JavaScript的語法，比如引入宏（macro）和類型檢驗(yàn)（type system）這些只能靠靜態(tài)分析實(shí)現(xiàn)的功能沙热。

除了靜態(tài)加載帶來的各種好處叉钥，ES6模塊還有以下好處。

• 不再需要UMD模塊格式了篙贸，將來服務(wù)器和瀏覽器都會(huì)支持ES6模塊格式投队。目前，通過各種工具庫爵川，其實(shí)已經(jīng)做到了這一點(diǎn)敷鸦。

• 將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對(duì)象的屬性雁芙。

• 不再需要對(duì)象作為命名空間（比如Math對(duì)象）轧膘，未來這些功能可以通過模塊提供。

默認(rèn)情況下兔甘，JavaScript中在模塊內(nèi)的所有聲明都是本地的谎碍，外部無法訪問。如果需要公開模塊中部分聲明的內(nèi)容洞焙，并讓其它模塊加以使用蟆淀，這個(gè)時(shí)候就需要導(dǎo)出功能拯啦，最簡單的方式是添加export關(guān)鍵字導(dǎo)出模塊。

可以導(dǎo)出的內(nèi)容包括類熔任、函數(shù)以及var褒链、let和const修飾的變量。export命令可以出現(xiàn)在模塊的任何位置疑苔，只要處于模塊頂層就可以甫匹。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)惦费，import命令也是如此兵迅。

使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過import命令加載這個(gè)模塊薪贫。

import命令具有提升效果恍箭，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行瞧省。由于import是靜態(tài)執(zhí)行扯夭，所以不能使用表達(dá)式和變量，這些只有在運(yùn)行時(shí)才能得到結(jié)果的語法結(jié)構(gòu)鞍匾。

import后面的from指定模塊文件的位置交洗，可以是相對(duì)路徑，也可以是絕對(duì)路徑候学，.js路徑可以省略藕筋。如果只是模塊名，不帶有路徑梳码，那么必須有配置文件隐圾，告訴 JavaScript 引擎該模塊的位置。

導(dǎo)入單個(gè)導(dǎo)出

給定一個(gè)名為myExport的對(duì)象或值掰茶，它已經(jīng)從模塊my-module導(dǎo)出（因?yàn)檎麄€(gè)模塊被導(dǎo)出）或顯式地導(dǎo)出（使用export語句）暇藏，將myExport插入當(dāng)前作用域。

import  {myExport}  from  '/modules/my-module.js';

導(dǎo)入多個(gè)導(dǎo)出

這將foo和bar插入當(dāng)前作用域濒蒋。

import  {foo, bar}  from  '/modules/my-module.js';

export default 和 export 區(qū)別：

1.export與export default均可用于導(dǎo)出常量盐碱、函數(shù)、文件沪伙、模塊等
2.你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式瓮顽，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用
3.在一個(gè)文件或模塊中围橡，export暖混、import可以有多個(gè)，export default僅有一個(gè)
4.通過export方式導(dǎo)出翁授，在導(dǎo)入時(shí)要加{ }拣播，export default則不需要

嚴(yán)格模式

ES6的模塊自動(dòng)采用嚴(yán)格模式晾咪，不管你有沒有在模塊頭部加上"use strict";。

嚴(yán)格模式主要有以下限制贮配。

-變量必須聲明后再使用

• 函數(shù)的參數(shù)不能有同名屬性谍倦，否則報(bào)錯(cuò)

• 不能使用with語句

• 不能對(duì)只讀屬性賦值，否則報(bào)錯(cuò)

• 不能使用前綴0表示八進(jìn)制數(shù)泪勒，否則報(bào)錯(cuò)

• 不能刪除不可刪除的屬性昼蛀，否則報(bào)錯(cuò)

• 不能刪除變量delete prop，會(huì)報(bào)錯(cuò)圆存，只能刪除屬性delete global[prop]

• eval不會(huì)在它的外層作用域引入變量

• eval和arguments不能被重新賦值

• arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局對(duì)象

• 不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧

• 增加了保留字（比如protected曹洽、static和interface）

Components and Props

參考資料：https://reactjs.org/docs/components-and-props.html

function formatDate(date) {

 return date.toLocaleDateString();

}

function Avatar(props) {

 return (

 <img

 className="Avatar"

 src={props.user.avatarUrl}

 alt={props.user.name}

 />

 );

}

function UserInfo(props) {

 return (

 <div className="UserInfo">

 <Avatar user={props.user} />

 <div className="UserInfo-name">{props.user.name}</div>

 </div>

 );

}

function Comment(props) {

 return (

 <div className="Comment">

 <UserInfo user={props.author} />

 <div className="Comment-text">{props.text}</div>

 <div className="Comment-date">

 {formatDate(props.date)}

 </div>

 </div>

 );

}

const comment = {

 date: new Date(),

 text: 'I hope you enjoy learning React!',

 author: {

 name: 'Hello Kitty',

 avatarUrl: 'http://placekitten.com/g/64/64',

 },

};

ReactDOM.render(

 <Comment

 date={comment.date}

 text={comment.text}

 author={comment.author}

 />,

 document.getElementById('root')

);

前面三段較為冗余的寫法：

function Comment(props) {

 return (

 <div className="Comment">

 <div className="UserInfo">

 <img

 className="Avatar"

 src={props.author.avatarUrl}

 alt={props.author.name}

 />

 <div className="UserInfo-name">

 {props.author.name}

 </div>

 </div>

 <div className="Comment-text">{props.text}</div>

 <div className="Comment-date">

 {formatDate(props.date)}

 </div>

 </div>

 );

}

頁面效果：

image.png

Hello Kitty

I hope you enjoy learning React!

6/4/2018

React Props

state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變辽剧。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 props 來傳遞數(shù)據(jù)税产。

Classes

constructor

構(gòu)造函數(shù)**constructor **是用于創(chuàng)建和初始化類中創(chuàng)建的一個(gè)對(duì)象的一種特殊方法怕轿。

語法

constructor([arguments]) { ... }

描述

• 在一個(gè)類中只能有一個(gè)名為 “constructor” 的特殊方法。 一個(gè)類中出現(xiàn)多次構(gòu)造函數(shù) (constructor)方法將會(huì)拋出一個(gè) SyntaxError 錯(cuò)誤辟拷。
• 在一個(gè)構(gòu)造方法中可以使用super關(guān)鍵字來調(diào)用一個(gè)父類的構(gòu)造方法撞羽。
• 如果沒有顯式指定構(gòu)造方法，則會(huì)添加默認(rèn)的 constructor 方法衫冻。
• 如果不指定一個(gè)構(gòu)造函數(shù)(constructor)方法, 則使用一個(gè)默認(rèn)的構(gòu)造函數(shù)(constructor)诀紊。

ES5的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對(duì)象this隅俘，然后再將父類的方法添加到this上面（Parent.apply(this)）邻奠。ES6的繼承機(jī)制完全不同，實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對(duì)象this（所以必須先調(diào)用super方法）为居，然后再用子類的構(gòu)造函數(shù)修改this碌宴。

如果子類沒有定義constructor方法，這個(gè)方法會(huì)被默認(rèn)添加蒙畴，代碼如下贰镣。也就是說，不管有沒有顯式定義膳凝，任何一個(gè)子類都有constructor方法碑隆。

constructor(...args) {

  super(...args);

}

另一個(gè)需要注意的地方是，在子類的構(gòu)造函數(shù)中蹬音，只有調(diào)用super之后上煤，才可以使用this關(guān)鍵字，否則會(huì)報(bào)錯(cuò)祟绊。這是因?yàn)樽宇悓?shí)例的構(gòu)建楼入，是基于對(duì)父類實(shí)例加工哥捕，只有super方法才能返回父類實(shí)例。

extends

**extends**關(guān)鍵字用于類聲明或者類表達(dá)式中嘉熊，以創(chuàng)建一個(gè)類遥赚，該類是另一個(gè)類的子類。

語法

class ChildClass extends ParentClass { ... }

描述

extends關(guān)鍵字用來創(chuàng)建一個(gè)普通類或者內(nèi)建對(duì)象的子類阐肤。

繼承的.prototype必須是一個(gè)Object 或者 null凫佛。

類的prototype屬性和proto屬性

大多數(shù)瀏覽器的ES5實(shí)現(xiàn)之中，每一個(gè)對(duì)象都有__proto__屬性孕惜，指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性愧薛。Class作為構(gòu)造函數(shù)的語法糖，同時(shí)有prototype屬性和__proto__屬性衫画，因此同時(shí)存在兩條繼承鏈毫炉。

（1）子類的proto屬性，表示構(gòu)造函數(shù)的繼承削罩，總是指向父類瞄勾。
（2）子類prototype屬性的proto屬性，表示方法的繼承弥激，總是指向父類的prototype屬性进陡。

class  A {

}

class  B  extends  A {

}

B.__proto__ === A // true

B.prototype.__proto__ === A.prototype // true

上面代碼中，子類B的proto屬性指向父類A微服，子類B的prototype屬性的proto屬性指向父類A的prototype屬性趾疚。

這兩條繼承鏈，可以這樣理解：作為一個(gè)對(duì)象以蕴，子類（B）的原型（proto屬性）是父類（A）糙麦；作為一個(gè)構(gòu)造函數(shù)，子類（B）的原型（prototype屬性）是父類的實(shí)例舒裤。

B.prototype = new A();

// 等同于

B.prototype.__proto__ = A.prototype;

static

static關(guān)鍵字為一個(gè)類定義了一個(gè)靜態(tài)方法喳资。

類相當(dāng)于實(shí)例的原型，所有在類中定義的方法腾供，都會(huì)被實(shí)例繼承仆邓。如果在一個(gè)方法前，加上static關(guān)鍵字伴鳖，就表示該方法不會(huì)被實(shí)例繼承节值，而是直接通過類來調(diào)用，這就稱為“靜態(tài)方法”榜聂。

為什么要保存至PACKAGE.JSON搞疗？

因?yàn)閚ode插件包非常大，版本龐雜须肆，所以不加入package信息匿乃，模塊間的依賴變得非常困難桩皿，將配置信息寫入package.json并將其加入版本管理，其他開發(fā)者對(duì)應(yīng)下載即可（命令提示符執(zhí)行npm install幢炸，則會(huì)根據(jù)package.json下載所有需要的包）泄隔。 每個(gè)項(xiàng)目的根目錄下面，一般都有一個(gè)package.json文件宛徊，定義了這個(gè)項(xiàng)目所需要的各種模塊佛嬉，以及項(xiàng)目的配置信息（比如名稱、版本闸天、許可證等元數(shù)據(jù)）暖呕。npm install 命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊苞氮，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境湾揽。

PACKAGE.JSON 屬性說明：

• name - 包名。（不要把node或者js放在名字中）
• version - 包的版本號(hào)笼吟。
• dependencies - 項(xiàng)目運(yùn)行所依賴的模塊
• devDependencies - 項(xiàng)目開發(fā)所需要的模塊
• bin - 這需要在你的package.json中提供一個(gè)bin字段钝腺，它是一個(gè)命令名和本地文件名的映射。在安裝時(shí)赞厕，如果是全局安裝，npm將會(huì)使用符號(hào)鏈接把這些文件鏈接到prefix/bin定硝，如果是本地安裝皿桑，會(huì)鏈接到./node_modules/.bin/

使用npm卸載插件：npm uninstall < name > [-g] [--save-dev] PS：不要直接刪除本地插件包

查看當(dāng)前目錄已安裝插件：npm list

CNPM介紹：

官方網(wǎng)址：http://npm.taobao.org

安裝：命令提示符執(zhí)行npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤

Q:全局安裝和本地安裝的區(qū)別蔬啡？

A:因?yàn)槿帜Ｊ桨惭b,包可以供所有的程序使用诲侮。本地安裝則不可以。 npm 默認(rèn)會(huì)把包安裝到當(dāng)前目錄下箱蟆。這反映了 npm 不同的設(shè)計(jì)哲學(xué)沟绪。如 果把包安裝到全局,可以提高程序的重復(fù)利用程度,避免同樣的內(nèi)容的多 份副本,但壞處是難以處理不同的版本依賴。如果把包安裝到當(dāng)前目錄, 或者說本地,則不會(huì)有不同程序依賴不同版本的包的沖突問題,同時(shí)還減 輕了包作者的 API 兼容性壓力,但缺陷則是同一個(gè)包可能會(huì)被安裝許多次空猜。

Q:為什么進(jìn)行了全局安裝還要進(jìn)行本地安裝

1绽慈、在js實(shí)例代碼中，默認(rèn)下node.js會(huì)在NODE_PATH和目前js所在項(xiàng)目下的node_modules文件夾下去尋找模塊辈毯，因此坝疼，如果只是全局安裝，不能直接通過require()的方式去引用模塊谆沃，需要手動(dòng)解決包路徑的配置問題钝凶，當(dāng)然你也可以復(fù)制全局安裝的node_modules文件夾到項(xiàng)目下，還有辦法可以選擇將環(huán)境變量的NODE_PATH設(shè)置為C:\Program Files\nodejs唁影。

2.對(duì)于包的更新不好管理耕陷，可能你需要為每個(gè)包重新命名掂名，如gulp@3.8.1、gulp@3.9.1...哟沫，為了區(qū)別不同項(xiàng)目使用指定的包饺蔑，保證模塊之間的相互依賴，區(qū)別每個(gè)項(xiàng)目正常運(yùn)行

Q：如何在package.JSON的dependencies和devDependencies寫入信息

npm install --save babel-cli和npm install -dev babel-cli使用這兩個(gè)命令安裝后可自動(dòng)寫入文件

npm install --save-dev babel-cli也可以在一起用

參考文獻(xiàn)：http://www.reibang.com/p/f581cf9360a2

React Demo

class Square extends React.Component {

 render() {

 return (

 <button className="square">

 {this.props.value}

 </button>

 );

 }

}

class Board extends React.Component {

 renderSquare(i) {

 return <Square value={i}/>;

 }

 render() {

 const status = 'Next player: X';

 return (

 <div>

 <div className="status">{status}</div>

 <div className="board-row">

 {this.renderSquare(0)}

 {this.renderSquare(1)}

 {this.renderSquare(2)}

 </div>

  <div className="board-row">

 {this.renderSquare(3)}

 {this.renderSquare(4)}

 {this.renderSquare(5)}

 </div>

 <div className="board-row">

 {this.renderSquare(6)}

 {this.renderSquare(7)}

 {this.renderSquare(8)}

 </div>

 </div>

 );

 }

}

class Game extends React.Component {

 render() {

 return (

 <div className="game">

 <div className="game-board">

 <Board />

 </div>

 <div className="game-info">

 <div>{/* status */}</div>

 <ol>{/* TODO */}</ol>

 </div>

 </div>

 );

 }

}

// ========================================

ReactDOM.render(

 <Game />,

 document.getElementById('root')

);

Next player: X

012

345

678

參考文獻(xiàn)：https://reactjs.org/tutorial/tutorial.html

常用代碼注釋

改進(jìn)1：setState

上面的代碼改成這樣：

class Square extends React.Component {

  **constructor(props) {**

 **super(props);**

 **this.state = {**

 **value: null,**

 **};**

 **}**

 render() {

 return (

 <button className="square" **onClick={() => this.setState({value: 'X'})**}>

 {this.state.value}

 </button>

 );

 }

}

每當(dāng) this.setState 被調(diào)用時(shí)南用，都會(huì)計(jì)劃對(duì)組件的更新膀钠，導(dǎo)致 React 合并傳遞的 state(狀態(tài)) ，更新和渲染組件及其子組件裹虫。 當(dāng)組件渲染完成時(shí)肿嘲，this.state.value 的值將是 'X' ，所以你會(huì)在網(wǎng)格中看到一個(gè) X 筑公。

如果您點(diǎn)擊任何方格雳窟，它里面應(yīng)該會(huì)出現(xiàn)一個(gè) X 。

State(狀態(tài)) 提升

當(dāng)重構(gòu) React 組件時(shí)匣屡，提升 state(狀態(tài)) 是非常常見的. 當(dāng)您要聚合來自多個(gè)子節(jié)點(diǎn)的數(shù)據(jù) 或 使兩個(gè)子組件之間相互通信時(shí)封救，提升 state(狀態(tài)) ，使其存儲(chǔ)在父組件中捣作。父組件可以通過 props(屬性) 把 state(狀態(tài)) 傳遞回子組件誉结，以使子組件始終與父組件同步。

由于組件的 state(狀態(tài)) 被認(rèn)為是私有的券躁，我們不能從 Square(方格) 組件直接更新 Board(棋盤) 的 state(狀態(tài)) 惩坑。

通常的模式是將一個(gè)函數(shù)從 Board(棋盤) 組件 傳遞到 Square(方格) 組件上，該函數(shù)在方格被點(diǎn)擊時(shí)調(diào)用也拜。 再次修改 Board(棋盤) 組件中 renderSquare 以舒，修改為：

renderSquare(i) {

  return (

  <Square

  value={this.state.squares[i]}

  onClick={() =>  this.handleClick(i)}

  />

 );

 }

我們把 Board(棋盤) 組件中 2 個(gè)props(屬性) 傳遞給 Square(方格) 組件：value 和 onClick。后者是一個(gè)函數(shù)慢哈，Square(方格) 組件 可以調(diào)用該函數(shù)蔓钟。

遇到的問題

1．’create-react-app' is not recognized as an internal or external command.

是環(huán)境變量問題。需要增加npm的環(huán)境變量路徑卵贱。

C:\Users\e******\AppData\Roaming\npm;

2. React 中的 registerServiceWorker是干什么的滥沫？

用于在生產(chǎn)環(huán)境中為用戶在本地創(chuàng)建一個(gè)service worker 來緩存資源到本地，提升應(yīng)用的訪問速度.

service worker是在后臺(tái)運(yùn)行的一個(gè)線程键俱，可以用來處理離線緩存佣谐、消息推送、后臺(tái)自動(dòng)更新等任務(wù)方妖。registerServiceWorker就是為react項(xiàng)目注冊了一個(gè)service worker狭魂，用來做資源的緩存，這樣你下次訪問時(shí)，就可以更快的獲取資源雌澄。而且因?yàn)橘Y源被緩存斋泄，所以即使在離線的情況下也可以訪問應(yīng)用（此時(shí)使用的資源是之前緩存的資源）。注意镐牺，registerServiceWorker注冊的service worker 只在生產(chǎn)環(huán)境中生效（process.env.NODE_ENV === 'production'）

常用命令

打開命令行 win+R cmd

打開環(huán)境變量：start-〉自己的圖標(biāo)-〉Change 沒有environment variables-〉上面的path炫掐。

查找環(huán)境變量path路徑：echo %PATH%