框架優(yōu)點(diǎn)：
1.方便開(kāi)發(fā)垢油、快速寫(xiě)功能
2.統(tǒng)一開(kāi)發(fā)方式
3.調(diào)試壹瘟、測(cè)試方便
前端三大框架：
Angular.js-前端三大框架之1
vue.js-前端三大框架之2
react.js-前端三大框架之3
大家都知道，我們web開(kāi)發(fā)會(huì)和后臺(tái)配合，之前不分前后臺(tái)，一直是一起锰镀，后來(lái)為了方便和高效，就分離了咖刃。
MVC：前后臺(tái)分離
M-Model 模型：數(shù)據(jù) 后臺(tái)
V-View 視圖：表現(xiàn)層 前臺(tái)
C-Controller 控制器：業(yè)務(wù)邏輯
mvc很多衍生概念：mvvc泳炉、mvvp、mvn嚎杨、mvvcp等花鹅，其中angular和vue都是這一類(lèi)。
但是今天主講的不是他倆枫浙，是目前比較火的react刨肃，這個(gè)一般適用于中大型項(xiàng)目，當(dāng)核心框架來(lái)使用箩帚，而且可以和別的框架完美的配合之景。
不啰嗦，直接開(kāi)始正題React：
重點(diǎn)：組件膏潮、狀態(tài)
核心：狀態(tài)
1.JSX(babel、browser)
JSX：可以把HTML直接寫(xiě)JS里
2.react
React特點(diǎn)：虛擬DOM
react主要就是使用jsx語(yǔ)法满力，是白了就是在js中直接編寫(xiě)html焕参，是不是很方便很溜。油额。下面直接開(kāi)始寫(xiě)法：
使用react首先需要引三個(gè)文件：
browser.js 它的作用是使瀏覽器支持babel
react.js 這個(gè)不用說(shuō)叠纷，react主體文件
react-dom.js 這個(gè)是react的虛擬DOM的文件編譯dom的
1.定義組件——組件（這個(gè)就用到了ES6中的class的寫(xiě)法）：
class 名字 extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <span>aaa</span>; //return出去你要在頁(yè)面展示的標(biāo)簽
}
}
2.使用組件
就跟標(biāo)簽一樣用
ReactDOM.render(
<span>111</span>, //可以直接寫(xiě)標(biāo)簽，（渲染什么東西）
oDiv ×仕弧（要放到哪里）
);
ReactDOM.render(
<Comp/>, //也可以使用class涩嚣，注意，使用的時(shí)候直接把class當(dāng)做標(biāo)簽來(lái)用掂僵。
oDiv
);
比如先寫(xiě)一個(gè)簡(jiǎn)單的例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Box extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <div> //注意 最外層元素有且只有一個(gè)（必須有航厚，而且只能有一個(gè)）
<span>我的名字是李鵬</span><br/>
<span>我今年24歲</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box/>, //注意：需要和上面class的名字一樣
oDiv
)
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
注意：定義的時(shí)候 render出去的最外層元素有且只有一個(gè)（必須有，而且只能有一個(gè)）使用的時(shí)候直接把組件名字當(dāng)做標(biāo)簽來(lái)用锰蓬，需要和上面class的名字一樣幔睬。
那么有人會(huì)說(shuō)了，那么能往組件身上存放一些數(shù)據(jù)嗎芹扭？答案是可以麻顶，
使用的時(shí)候赦抖，直接往組件標(biāo)簽身上加入屬性即可，定義的時(shí)候使用就直接調(diào)用辅肾，注意是在this.props的身上：
class Box extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <div>
<span>我的名字是{this.props.name}</span><br/>
<span>我今年{this.props.age}歲</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box name="李鵬" age="24"/>,
oDiv
)
};
那么react比如我往一個(gè)元素節(jié)點(diǎn)身上加入數(shù)據(jù)怎么做队萤，正常一個(gè)組件中的數(shù)據(jù)，不可能是不變的吧矫钓，肯定是從后臺(tái)過(guò)來(lái)的要尔，這就關(guān)系到狀態(tài)的變化。
注意：狀態(tài)是活的份汗，會(huì)變化的盈电，怎么用呢？
定義：constructor里面——this.state={};
變化：方法里面——this.setState({});
使用的時(shí)候：直接用模板即可:{} 注意是單括號(hào)杯活。比如：
<span>輸入框輸入的是：{this.state.value}</span>
在React中怎么往組件this身上加入一些數(shù)據(jù)呢匆帚？
答案：使用 this.state={value:'',name:''} 注意是={} 一個(gè)json 多了就往后加
class Box extends React.Component{
constructor(...args){
super(...args);
this.state={value:''};
}
}
正常我們修改this的屬性，直接改就行旁钧，但是react中你要修改必須設(shè)置狀態(tài)：this.setState({this.value='',this.name=''});
this.setState({
value:ev.target.value
});
那么怎么在React組件中加入事件呢吸重，直接加即可，不過(guò)注意：
比如：正常的 onclick 我們要寫(xiě)成 onClick歪今，正常的onchange 寫(xiě)成 onChange 等嚎幸。
那么組件中事件怎綁定函數(shù)呢毕匀？直接告訴你吧：onChange={this.fn.bind(this)} 注意加上bind垮斯，為了防止this指向錯(cuò)亂怜浅。
比如寫(xiě)一個(gè)吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Box extends React.Component{
constructor(...args){
super(...args);
this.state={value:''};
}
fn(ev){
this.setState({
value:ev.target.value
});
}
render(){
return <div>
<input type="text" onChange={this.fn.bind(this)} />
<span>輸入框輸入的是：{this.state.value}</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box/>,
oDiv
)
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
下面就寫(xiě)一個(gè)比較簡(jiǎn)單的例子吧唱歧，用react做一個(gè)時(shí)鐘吧：
不過(guò)介紹這個(gè)之前要介紹幾個(gè)東西逊谋，因?yàn)樽鰰r(shí)鐘的話峦椰，肯定要用定時(shí)器吧衩辟，間隔是1000绎晃，也就是1s泊柬，所以也沒(méi)會(huì)有一個(gè)間隔椎镣，這樣不完美，正常我們寫(xiě)的話兽赁，肯定直接先把函數(shù)調(diào)用一遍吧状答，但是在react中不行，因?yàn)榻M件是有生存周期的刀崖，如果你在組件沒(méi)有渲染到頁(yè)面就直接調(diào)用惊科，那樣是沒(méi)辦法的，因?yàn)榇a是一步一步往下走的亮钦，所以介紹幾個(gè)東西吧：
componentWillMount() 創(chuàng)建之前
componentDidMount() 創(chuàng)建之后
componentWillUpdate() 更新之前
componentDidUpdate() 更新之后
componentWillUnmount() 卸載之前
componentWillReceiveProps() 組件參數(shù)更新
直接看例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Close extends React.Component{
constructor(...args){
super(...args);
this.state={
h:0,
m:0,
s:0
};
setInterval(()=>{
this.fn();
},1000)
}
toDub(a){
return a<10?"0"+a:a+'';
}
componentDidMount(){ //在組件創(chuàng)建之后直接調(diào)用這個(gè)方法一次译断，省的頁(yè)面出現(xiàn)00:00:00的情況
this.fn();
}
fn(){
var oDate=new Date();
this.setState({
h:this.toDub(oDate.getHours()),
m:this.toDub(oDate.getMinutes()),
s:this.toDub(oDate.getSeconds())
})
}
render(){
return <div>
<span>{this.state.h}</span>:
<span>{this.state.m}</span>:
<span>{this.state.s}</span>
</div>
}
}
window.onload=function(){
var oDiv=document.querySelector("#div1");
ReactDOM.render(
<Close/>,
oDiv
)
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上，基本把react框架中的創(chuàng)建組件或悲，使用組件孙咪，以及組件身上使用屬性堪唐，以及狀態(tài)都簡(jiǎn)單的說(shuō)了一下，那么工作中很多時(shí)候翎蹈，我們都會(huì)從后臺(tái)獲得一組數(shù)據(jù)淮菠，然后把數(shù)據(jù)的每一項(xiàng)放到一個(gè)標(biāo)簽中，那么在react中該怎么做呢荤堪？
比如說(shuō)有這樣一組數(shù)據(jù)：
constructor(...args){
super(...args);
//this.arr=[1, 5, 8, 9];
this.state={arr: [12, 5, 8, 9]};
}
首先合陵，肯定有人會(huì)想到：我直接render出去對(duì)應(yīng)數(shù)量的標(biāo)簽，然后把數(shù)據(jù)通過(guò)模板放進(jìn)去澄阳，但是我們不可能手動(dòng)寫(xiě)很多標(biāo)簽把每一項(xiàng)數(shù)據(jù)填進(jìn)去拥知，然后把標(biāo)簽render出去吧，而且數(shù)據(jù)個(gè)數(shù)你也不知道碎赢，還是變化的低剔，所以我們可以直接循環(huán)創(chuàng)建，然后存到一個(gè)數(shù)組中：
render(){
var result=[];
var arr=this.state.arr;
for(var i=0;i<arr.length;i++){
result.push(<Item key={i} value={arr[i]}/>); //這個(gè)Item標(biāo)簽是一個(gè)小的組件肮塞，我們把數(shù)據(jù)放到屬性身上吧襟齿。
}
return <ul>
<input type="button" value="按鈕" onClick={this.fn.bind(this)} /> //為了看看狀態(tài)變化了，頁(yè)面DOM有沒(méi)有直接循環(huán)加上
枕赵。
{result}
</ul>;
}
//其中Item標(biāo)簽是一個(gè)小的組件：
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.value}</li>;
}
}
上面的代碼意思就是說(shuō)猜欺，我先申明一個(gè)數(shù)組，然后通過(guò)循環(huán)把我們從后臺(tái)獲得的數(shù)據(jù)放到一個(gè)標(biāo)簽中拷窜，并且push到數(shù)組中去开皿，最后把數(shù)組render出去，不過(guò)要放到模板里面篮昧，不能直接把數(shù)組render出去副瀑，{存放標(biāo)簽的數(shù)組名}，那么很多人會(huì)問(wèn)恋谭，那組件標(biāo)簽上面的key是什么東西呢，這個(gè)你就把他理解錯(cuò)id就行挽鞠，唯一疚颊，而且這個(gè)是必須要寫(xiě)的，就相當(dāng)于告訴他信认，這個(gè)我已經(jīng)創(chuàng)建了材义，不需要重復(fù)創(chuàng)建了：
fn(){
this.setState({
arr: this.state.arr.concat([Math.random()])
});
}
這個(gè)例子整體代碼，大家看一下吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Item extends React.Component{ //這個(gè)組件方便我們下面使用
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.value}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
//this.arr=[12, 5, 8, 9];
this.state={arr: [12, 5, 8, 9]};
}
fn(){
this.setState({
arr: this.state.arr.concat([Math.random()]) //隨便往數(shù)組最后添加一項(xiàng)嫁赏，隨機(jī)數(shù),注意其掂，不要使用push之類(lèi)的，直接用數(shù)
組拼接潦蝇。下面點(diǎn)擊測(cè)試用款熬。
});
}
render(){
var result=[];
var arr=this.state.arr;
for(var i=0;i<arr.length;i++){
result.push(<Item key={i} value={arr[i]}/>);
}
return <ul>
<input type="button" value="按鈕" onClick={this.fn.bind(this)} /> //點(diǎn)擊執(zhí)行一個(gè)函數(shù)深寥，讓數(shù)據(jù)最后添加一項(xiàng)，看看數(shù)
據(jù)變化了贤牛，這個(gè)組件渲染的頁(yè)面變化沒(méi)惋鹅。
{result}
</ul>;
}
}
window.onload=function (){
var oDiv=document.getElementById('div1');
ReactDOM.render(
<List />,
oDiv
);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
以上，結(jié)束殉簸。
