1. 使用React腳手架創(chuàng)建一個(gè)React應(yīng)用
1). react腳手架
- xxx腳手架: 用來(lái)幫助程序員快速創(chuàng)建一個(gè)基于xxx庫(kù)的模板項(xiàng)目
- 包含了所有需要的配置
- 指定好了所有的依賴
- 可以直接安裝/編譯/運(yùn)行一個(gè)簡(jiǎn)單效果
- react提供了一個(gè)專門(mén)用于創(chuàng)建react項(xiàng)目的腳手架庫(kù): create-react-app
- 項(xiàng)目的整體技術(shù)架構(gòu)為: react + webpack + es6 + babel + eslint
2). 創(chuàng)建項(xiàng)目并啟動(dòng)
npm install -g create-react-app
create-react-app react-app
cd react-app
npm start
ReactNews
|--node_modules---第三方依賴模塊文件夾
|--public
|-- index.html-----------------主頁(yè)面
|--scripts
|-- build.js-------------------build打包引用配置
|-- start.js-------------------start運(yùn)行引用配置
|--src------------源碼文件夾
|--components-----------------react組件
|--index.js-------------------應(yīng)用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----應(yīng)用包配置文件
|--README.md-------應(yīng)用描述說(shuō)明的readme文件
3). 使用腳手架開(kāi)發(fā)的項(xiàng)目的特點(diǎn)
模塊化: js是一個(gè)一個(gè)模塊編寫(xiě)的
組件化: 界面是由多個(gè)組件組合編寫(xiě)實(shí)現(xiàn)的
工程化: 實(shí)現(xiàn)了自動(dòng)構(gòu)建/運(yùn)行/打包的項(xiàng)目
4). 組件化編寫(xiě)項(xiàng)目的流程
拆分組件
實(shí)現(xiàn)靜態(tài)組件--->靜態(tài)頁(yè)面
實(shí)現(xiàn)動(dòng)態(tài)組件
動(dòng)態(tài)顯示初始化數(shù)據(jù)
交互
2. app1: 實(shí)現(xiàn)一個(gè)評(píng)論管理功能
1). 拆分組件:
應(yīng)用組件: App
添加評(píng)論組件: CommentAdd
評(píng)論項(xiàng)組件: CommentItem
評(píng)論列表組件: CommentList
2). 確定組件的state和props:
App:
* state: comments/array
CommentAdd
* state: username/string, content/string
* props: add/func
commentList
* props: comments/array, delete/func
CommentItem
* props: comment/object, delete/func, index/number
3). 編寫(xiě)靜態(tài)組件
拆分頁(yè)面
拆分css
4). 實(shí)現(xiàn)動(dòng)態(tài)組件
- 動(dòng)態(tài)展示初始化數(shù)據(jù)
- 初始化狀態(tài)數(shù)據(jù)
- 傳遞屬性數(shù)據(jù)
- 響應(yīng)用戶操作, 更新組件界面
- 綁定事件監(jiān)聽(tīng), 并處理
- 更新state
3. app2: 實(shí)現(xiàn)github用戶搜索功能
1). react應(yīng)用中的ajax請(qǐng)求
axios: 包裝XMLHttpRequest對(duì)象, promise風(fēng)格, 支持瀏覽端/node服務(wù)器端
fetch: 瀏覽器內(nèi)置語(yǔ)法, promise風(fēng)格, 老瀏覽器不支持, 可以引入fetch.js兼容包
2). 拆分組件
App
* state: searchName/string
Search
* props: setSearchName/func
List
* props: searchName/string
* state: firstView/bool, loading/bool, users/array, errMsg/string
3). 編寫(xiě)組件
編寫(xiě)靜態(tài)組件
編寫(xiě)動(dòng)態(tài)組件
componentWillReceiveProps(nextProps): 監(jiān)視接收到新的props, 發(fā)送ajax
使用axios庫(kù)發(fā)送ajax請(qǐng)求
4. 組件間通信總結(jié)
1). 方式一: 通過(guò)props傳遞
共同的數(shù)據(jù)放在父組件上, 特有的數(shù)據(jù)放在自己組件內(nèi)部(state)
一般數(shù)據(jù)-->父組件傳遞數(shù)據(jù)給子組件-->子組件讀取數(shù)據(jù)
函數(shù)數(shù)據(jù)-->子組件傳遞數(shù)據(jù)給父組件-->子組件調(diào)用函數(shù)
問(wèn)題: 多層傳遞屬性麻煩, 兄弟組件通信不方便
2). 方式二: 使用消息訂閱(subscribe)-發(fā)布(publish)機(jī)制: 自定義事件機(jī)制
工具庫(kù): PubSubJS
下載: npm install pubsub-js --save
使用:
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(msg, data){ }); //訂閱
PubSub.publish('delete', data) //發(fā)布消息
優(yōu)點(diǎn): 可以支持任意關(guān)系組件之間的通信
3). 事件監(jiān)聽(tīng)理解
- DOM事件
- 綁定事件監(jiān)聽(tīng)
- 事件名(類型): 只有有限的幾個(gè), 不能隨便寫(xiě)
- 回調(diào)函數(shù)
- 用戶操作觸發(fā)事件(event)
- 事件名(類型)
- 數(shù)據(jù)
- 綁定事件監(jiān)聽(tīng)
- 自定義事件
- 綁定事件監(jiān)聽(tīng)
- 事件名(類型): 任意
- 回調(diào)函數(shù): 通過(guò)形參接收數(shù)據(jù), 在函數(shù)體處理事件
- 觸發(fā)事件(編碼)
- 事件名(類型): 與綁定的事件監(jiān)聽(tīng)的事件名一致
- 數(shù)據(jù): 會(huì)自動(dòng)傳遞給回調(diào)函數(shù)
- 綁定事件監(jiān)聽(tīng)
5. ES6新語(yǔ)法總結(jié)
定義變量/常量: const/let
解構(gòu)賦值: let {a, b} = this.props import {aa} from 'xxx'
對(duì)象的簡(jiǎn)潔表達(dá): {a, b}
箭頭函數(shù):
組件的自定義方法: xxx = () => {}
map/filter的回調(diào)方法: (item, index) => {}
優(yōu)點(diǎn):
* 簡(jiǎn)潔
* 沒(méi)有自己的this,使用引用this查找的是外部this
擴(kuò)展運(yùn)算符: ...
拆解對(duì)象: const MyProps = {}, <Xxx {...MyProps}>
類: class/extends/constructor/super
ES6模塊化: export default | import
6. 項(xiàng)目打包運(yùn)行
npm run build //生成打包文件
npm install -g serve //全局下載服務(wù)器包
serve build //通過(guò)服務(wù)器命令運(yùn)行打包項(xiàng)目
訪問(wèn): http://localhost:5000 //瀏覽器訪問(wèn)
