1 認(rèn)識React
1.1 React是Facebook內(nèi)部的一個JavaScript類庫,于2013年開源,可用于創(chuàng)建web用戶界面
1.2 react是一個庫,不是一個框架
1.3 react用來創(chuàng)建web用戶界面,不做其他的事情
中文網(wǎng)站 http://www.reactjs.cn/
英文網(wǎng)站http://facebook.github.io/react/
2 React優(yōu)勢
2.1 傳統(tǒng)方法
功能 對DOM進(jìn)行大量的操作,注冊大量的事件,完成相應(yīng)的功能
缺點(diǎn) 需求可以使用,但是隨著事件的增多,邏輯會越來越復(fù)雜,且性能不是很好
2.2 現(xiàn)代方法
React引用了虛擬DOM,基于React進(jìn)行開發(fā)時所有的DOM結(jié)構(gòu)都通過虛擬DOM進(jìn)行,
每當(dāng)數(shù)據(jù)發(fā)生改變,React都會從新構(gòu)建整個DOM樹,然后將當(dāng)前整個DOM樹和上一次
的DOM樹進(jìn)行對比,得到DOM結(jié)構(gòu)的區(qū)別,然后僅僅對變化發(fā)部分進(jìn)行實(shí)際的瀏覽器
DOM更新,由于虛擬DOM是內(nèi)存數(shù)據(jù),**性能極高**
注意!
1 在使用了React,既不必使用jQuery了
2 虛擬DOM的概念,講我們從頻繁的DOM操作中解放出來
3 React的質(zhì)疑
對于react經(jīng)常會聽到一些反面說法,但是優(yōu)點(diǎn)值得分析
- react不是MVC框架,它只專注于視圖,也就是說V
- react是一種思想,提倡"learn once,write anywhere",分web版的react.js和原聲app的react natvie
- 虛擬DOM / 組件化 / 狀態(tài)機(jī) / 單向數(shù)據(jù)流 是React的主要特性
- 核心思想:一個應(yīng)用程序在不同的時間點(diǎn),當(dāng)?shù)讓訑?shù)據(jù)改變,react會自動化處理所有用戶界面的更新
4 React入門
4.1 React是一種思想,基于這個思想,有兩大實(shí)現(xiàn)
?React.js 針對web開發(fā),使用的是html,css和js進(jìn)行web UI 的開發(fā)
?React Native 針對原生app開發(fā),包括iOS平臺,Android平臺
1 官網(wǎng)下載 http://www.reactjs.cn/react/downloads.html/
react-15.3.1.zip(壓縮包)
主要文件
1 react.min.js//react的核心文件
2 react-dom.min.js//針對web頁面的DOM操作
3 browser.min.js//使得瀏覽器中支持jsx語法(需要單獨(dú)下載)
代碼如下
<html>
<head>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//定義一個組件
var Hello = React.createClass({
//組件要渲染的內(nèi)容
render : function(){
return (
<h2>這是react.js</h2>
);
}
});
//實(shí)例化一個Hello組件對象,渲染到頁面的div#app中去
ReactDOM.render(<Hello />,document.getElementById("app"));
</script>
</body>
</html>
注意事項(xiàng)!
一 script標(biāo)簽的type屬性需要變成text/babel(jsx語法解析使用)
二 創(chuàng)建組件的時候,使用的是react.createClass方法//構(gòu)造器的方式(首字母是大寫)
三 參數(shù)是一個對象,在render方法中,可以使用html標(biāo)簽和js的混合
四 return 返回的內(nèi)容有且僅有一個根標(biāo)簽
五 在全部的代碼中,凡是出現(xiàn)標(biāo)簽,都必須關(guān)閉
六 在ReactDOM.render方法第二個參數(shù),必須使用DOM的原生方法獲取節(jié)點(diǎn)
七 定義組件類的時候,類名必須是首字母大寫
5 JSX(JavaScript+XML)
5.1 在react組件內(nèi)部構(gòu)建標(biāo)簽的類XML語法
- 在定義組件類的render方法中,return部分使用
- 在應(yīng)用組件 ReactDOM.render方法中的第一個參數(shù)
- 只要使用了jsx語法就要設(shè)置script標(biāo)簽的type屬性值為text/babel
注意事項(xiàng)!
?如果是在HTML標(biāo)簽,直接使用XML標(biāo)簽語法
?如果是js代碼,需要使用 { } 括起來
XML 語法規(guī)定
1 必須擁有唯一的根元素
2 嚴(yán)格區(qū)分大小寫
3 所以的元素都必須關(guān)閉
4 所有的元素都必須正確嵌套
5 所有的屬性都應(yīng)該有屬性值
6 推薦使用XMLspy工具(檢查語法)
5.4 JSX優(yōu)點(diǎn)
簡單 對于熟悉XML發(fā)開發(fā)人員都能輕松紅掌握J(rèn)SX
更加直觀,可讀性強(qiáng)
更加具有語法化
關(guān)注分離點(diǎn),JSX干凈的方式確保標(biāo)簽與業(yè)務(wù)邏輯相分離
5.5 JSX語法
屬性設(shè)置(靜態(tài),動態(tài))
1 靜態(tài)屬性,HTML標(biāo)簽固有的屬性, W3C規(guī)定1 屬性名的更改(兩個)
- class =>> className
- for =>> htmlFor
2 行內(nèi)樣式
- 在HTML中也可以使用行內(nèi)樣式(使用js中的對象方式來設(shè)置)
- 使用js的對象方式來進(jìn)行設(shè)置(不能使用CSS來進(jìn)行設(shè)置//會報(bào)錯)
ps { { } } 使用花括號來嵌套,外面的花括號表示解析js代碼,內(nèi)部表示js對象 - 注釋 針對JSX語法而言,不同于js注釋
ps 注釋方式 {/注釋內(nèi)容/}
2 動態(tài)屬性,自定義屬性,由用戶定義
**在js中直接書寫HTML代碼 其實(shí)就是react.js中的jsx語法
6 組件
6.1 組件其實(shí)就是具備獨(dú)立功能的一個模塊(UI部件),MVC是對數(shù)據(jù)和顯示相分離,組件化則是對模塊之間UI功能的分離
組件化的思想（類似于搭積木）
6.2 定義組件
在react中,所有的UI都是基于組件的,最基本的組件就是HTML標(biāo)簽(只需要將它們組合到一起,形成一個復(fù)雜的組件)
- 定義組件的方法:react對象中的createClass方法
- react對象是在react.js中定義好的,可以直接使用
**定義組件
在react中元潘，所有的UI都是基于組件的
//定義一個CommentItem組件類
var CommentItemComponent = React.createClass({
getDefaultProps : function() {
return {
title : '默認(rèn)標(biāo)題',
content : '默認(rèn)內(nèi)容'
};
},
render : function(){
return (
<li>
<h3>{this.props.title}</h3>
<p>{this.props.content}</p>
<ButtonComponent operate="reply" />
</li>
);
}
});
//定義一個CommentList組件類
var CommentListComponent = React.createClass({
render : function(){
return (
<ul>
<CommentItemComponent title="自己定義的標(biāo)題"/>
<CommentItemComponent title="標(biāo)題1" content="組件征讲！" />
<CommentItemComponent title="標(biāo)題2" content="組件!" />
<CommentItemComponent title="標(biāo)題3" content="組件"/>
</ul>
);
}
});
6.3 渲染組件
