React使用了響應(yīng)式渲染，將狀態(tài)從展現(xiàn)給用戶的UI中分離出來。它超越了數(shù)據(jù)綁定，克服了其缺陷并且在使用上更加容易。它用一種聲明的方式來定義組件的外觀和行為，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，React會(huì)在概念上重新渲染整個(gè)用戶界面。（這里就引入了虛擬DOM的概念）
在一個(gè)React應(yīng)用中，一切都由組件組成。組件就是應(yīng)用 程序中的自包含的，關(guān)注特定用途的基礎(chǔ)構(gòu)件。比使用模板有巨大的好處。
一個(gè)React組件就是一個(gè)帶有render的方法，并且返回組件UI描述的JavaScript類
正規(guī)的開發(fā)流程：
編寫JSX并隨時(shí)將它轉(zhuǎn)換成標(biāo)準(zhǔn)的JavaScript代碼
使用模塊化模式編寫代碼
管理依賴性
打包多個(gè)JavaScript文件并使用source maps進(jìn)行調(diào)用
項(xiàng)目的基礎(chǔ)結(jié)構(gòu)
一個(gè)source文件夾，包含了所有的JavaScript模塊
一個(gè)index.html，幾乎是一個(gè)空頁面，只是用來加載應(yīng)用程序的JavaScript，并提供一個(gè)div來讓React在該元素中渲染出應(yīng)用程序的組件
一個(gè)package.json文件，它是一個(gè)獨(dú)立的npm清單文件
一個(gè)模塊打包或build工具，用來實(shí)現(xiàn)JSX轉(zhuǎn)換和模塊/依賴項(xiàng)打包。比如webpack
the sample code to let user create a project quickly
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
部署的時(shí)候使用
npm run build
上面的命令可以完成所有初始化工作，但是具體的步驟可以分為
在終端上運(yùn)行npm init 生成package.json
index.html中使用boudle.js 它是react編譯的標(biāo)準(zhǔn)輸出
配置webpack.config.js
在package.json中創(chuàng)建啟動(dòng)本地服務(wù)的命令
第一個(gè)React組件
import React
extends React.Component
實(shí)現(xiàn)render() 方法，在方法里return JSX語句
技巧：可以使用解構(gòu)賦值來直接訪問模塊內(nèi)部的函數(shù)和類，類似于python的from *** import ***
import React, { Component } from 'react';
在React中使用js，可以在React的component中直接寫js的代碼，
不過要在render的函數(shù)中寫，而不能寫到return語句中。
可以使用 {}，在{}中的值被被當(dāng)作一個(gè)JS表達(dá)式進(jìn)行求值，并被渲染到HTML標(biāo)記中
將組建組合起來：React的好處就是可以創(chuàng)建簡(jiǎn)單的可重用的組件，然后通過將組進(jìn)行嵌套和組合來創(chuàng)建復(fù)雜的UI
props是React中的一種從父組件向子組件傳輸數(shù)據(jù)的餓機(jī)制，
它們?cè)谧咏M件中不能被修改
props由父組件傳輸，也由父組件擁有
接收props的組件（子組件）是無法改變props的值的。
子組件通過props可以獲取到從父組件通過<*** a="b">這樣語法傳給子組件的值
組件的常用函數(shù)：
render()
constructor()
定義組件的層級(jí)關(guān)系
每個(gè)組件都應(yīng)當(dāng)小巧且只關(guān)注單個(gè)功能
分析項(xiàng)目的外觀框架和布局
每個(gè)組件創(chuàng)建為一個(gè)單獨(dú)的JavaScript文件，但是有點(diǎn)要注意就是每個(gè)文件要加上export default GroceryList;
State 一種可以體現(xiàn)狀態(tài)的可變數(shù)據(jù)
調(diào)用方式是this.state
對(duì)于組件是私有的，通過 this.setState()來進(jìn)行修改。
當(dāng)state被修改時(shí)，組件會(huì)觸發(fā)響應(yīng)式渲染，此時(shí)組件和其子組件都會(huì)被重新渲染。
可以在任何時(shí)刻為組件添加state，比如在constructor中
組件可以使用constructor()來進(jìn)行初始化
react中的事件
回調(diào)函數(shù)的作用域是組件，需要顯示的將函數(shù)綁定到上下文中
this.onClickButton = this.onClickButton.bind(this)
對(duì)內(nèi)聯(lián)樣式友好，可以使用組件的方式來定義樣式
const counterStyle = {
margin: "16px"
}
return(
<div style={counterStyle}>
一個(gè)包含值和一選定屬性的表單組件稱為受控組件在一個(gè)受控組件中元素內(nèi)部所有渲染的值將一直反應(yīng)屬性的紙。
非受控組件不設(shè)置value屬性，任何用戶輸入都會(huì)立刻反應(yīng)到渲染后的元素上。
key特性,他是一個(gè)唯一標(biāo)識(shí)符允許你在需要進(jìn)行插入，刪除，替換和移動(dòng)操作時(shí)。快速找到元素。創(chuàng)建組建時(shí)需要為每一個(gè)子元素提供一個(gè)key.可以是 任何靜態(tài)且唯一的值
當(dāng)需要操作真實(shí)DOM時(shí)，可以使用refs
類構(gòu)造函數(shù)屬性，如果初始化時(shí)沒有被滿足，就會(huì)打印出警告信息
propTypes校驗(yàn)器，可以用來校驗(yàn)初始化時(shí)傳入的值。
有狀態(tài)的組件和單純組件
讓一個(gè)應(yīng)用程序的大部分組件都是無狀態(tài)的單純組價(jià)是一個(gè)最佳實(shí)踐
