一、初識React
1.特點
- 基于組件达舒，組件里面有自己的state只嚣，用組件來做復(fù)雜的UI灿渴；
- 用JavaScript語言邏輯而不是模板洛波；
- 當(dāng)你改變數(shù)據(jù)的時候它可以快速更新；
- React不是一個完整的MVC骚露，MVVM框架奋岁；
- React跟Web Components不沖突；
- React的特點是“輕”荸百，渲染闻伶、響應(yīng)非常快够话；
- 組件化的開發(fā)思路蓝翰，高度可重用。
2.看看一個簡單的組件例子
react組件用render（）方法傳入數(shù)據(jù)和返回女嘲。下面這個例子用了一種長得像XML的語法——jsx畜份。輸入的數(shù)據(jù)可以通過render()的this.props來傳進組件。
class HelloMessage extends React.Compontent {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Jane" />,mountNode);
二欣尼、各種例子
1. HTML模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="script/react.js"></script>
<script src="script/react-dom.js"></script>
<script src="script/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//這里寫你的react代碼爆雹，使用jsx語法
</script>
</body>
</html>
body內(nèi)的<script>標(biāo)簽停蕉，是寫入react代碼，由于react獨有的jsx語法钙态，跟js不兼容慧起，所以使用jsx的地方，type類型為type="text/babel"册倒。
head標(biāo)簽內(nèi)引用了三個庫：react.js 蚓挤、react-dom.js 和 Browser.js，它們必須首先加載驻子。其中灿意，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關(guān)的功能崇呵，Browser.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法缤剧，這一步很消耗時間，實際上線的時候域慷，應(yīng)該將它放到服務(wù)器完成荒辕。
eg：將一個 h1 標(biāo)題，插入 example 節(jié)點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="script/react.js"></script>
<script src="script/react-dom.js"></script>
<script src="script/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
運行結(jié)果截圖：
Paste_Image.png
- ReactDOM.render 是 React 的最基本方法芒粹，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點大溜。render()方法的第一個參數(shù)是你要插入的模板化漆，第二個參數(shù)是指定插入的節(jié)點的位置。
2. 遍歷一個數(shù)組插入節(jié)點中
<body>
<div id="example"></div>
<script type="text/babel">
var names = ['Mingming','XiaoHong','Baby'];
ReactDOM.render(
<div>
{
names.map(function(name) {
return <h1>Hello {name} !</h1>
})
}
</div>,
document.getElementById("example"));
</script>
</body>
- 對names中的每一個元素都執(zhí)行一個匿名函數(shù)钦奋，這個匿名函數(shù)的參數(shù)name就是當(dāng)前的遍歷到的names的某一個元素座云，用這個元素替換“Hello {name}”的name位置芝雪，然后返回這個“h1”元素诅福，將每一個返回的h1元素都插入到由document.getElementById("example")指定的節(jié)點位置，即插入到id值為“example”的div節(jié)點中孽文。
Paste_Image.png
3. 插入JavaScript變量
<body>
<div id="example"></div>
<script type="text/babel">
var arr = [
<h1>I am Array1!</h1>,
<h1>I am Array2!</h1>
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example"));
</script>
</body>
Paste_Image.png
4. 封裝組件
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function() {
return <h1>Hello {this.props.name} !</h1>
}
});
ReactDOM.render(<HelloMessage name="Qiapi"/>,document.getElementById("example"));
</script>
</body>
Paste_Image.png
- 格式：
var 組件名(首字母一定大寫) = React.createClass({
render:function() {
return 返回的模板
}
});
-
this.props.name傳入?yún)?shù) - 組件類只能包含一個頂層標(biāo)簽厌衔，即return 只能返回一個標(biāo)簽璧帝，不可以像下面這樣的return：
return <h1>haha</h1><p>hehe</p>//這是錯誤的
- 添加組件屬性，有一個地方需要注意富寿，就是 class 屬性需要寫成 className 睬隶，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字页徐。
5. this.props.children
<body>
<div id="example"></div>
<script type="text/babel">
var NoteList = React.createClass({
render:function() {
return (
<ol>
{
React.Children.map(this.props.children,function(child) {
return <li>{child}</li>
})
}
</ol>
)
}
});
ReactDOM.render(
<NoteList>
<span>Hello</span>
<span>World</span>
</NoteList>,
document.getElementById("example"));
</script>
</body>
6. PropsType
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,//這句的意思是要求title的屬性是string
},
render:function() {
return <h1>I say: {this.props.title}</h1>
}
});
ReactDOM.render(
<HelloMessage title="Here is a title"/>,
document.getElementById("example"));
</script>
</body>
Paste_Image.png
- propTypes用來設(shè)置屬性類型苏潜，上例中設(shè)置了string類型，所以在為組件設(shè)置title值的時候必須為string類型变勇，如果將其設(shè)置為數(shù)字恤左，則會報錯，例如：
Paste_Image.png
Paste_Image.png
可以這樣：
Paste_Image.png
Paste_Image.png
- 注意不要直接把123寫到title里：
Paste_Image.png
- 設(shè)置默認(rèn)的title值：
QQ圖片20161124235909.png
Paste_Image.png
7.refs 和 this.state
<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
getInitialState:function() {
return({text:''});
},
handleClick:function() {
this.setState({text:this.refs.myTextInput.value});
},
render:function() {
return (
<div>
<input type="text" ref="myTextInput"/>
<input type="button" onClick={this.handleClick} value="click me!" />
<p>{this.state.text}</p>
</div>
)
}
})
ReactDOM.render(
<MyComponent/>,document.getElementById("example"));
</script>
</body>
- getInitialState:設(shè)置初始的state值；
- handleClick:自定義的一個方法飞袋，用來處理點擊事件戳气。為按鈕設(shè)置了onClick={this.handleClick}后，當(dāng)點擊按鈕時就會調(diào)用這個方法授嘀，進行相應(yīng)的處理物咳；
- this.setState():設(shè)置this.state;
- this.refs.myTextInput:ref值為myTextInput的元素；
- 動態(tài)的數(shù)據(jù)不用 this.props 獲取蹄皱，用 this.state;
8. 表單
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value:'hello'};
},
handleChange: function(event) {
this.setState({value:event.target.value});
},
render:function() {
var value = this.state.value;
return (
<div>
<input value={value} type="text" onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>,document.getElementById("example"));
</script>
</body>
三览闰、組件的生命周期
組件的生命周期分成三個狀態(tài)：
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
React 為每個狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進入狀態(tài)之前調(diào)用巷折，did 函數(shù)在進入狀態(tài)之后調(diào)用压鉴，三種狀態(tài)共計五種處理函數(shù)。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
React 還提供兩種特殊狀態(tài)的處理函數(shù):
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時調(diào)用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調(diào)用
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if(opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100);
},
render:function () {
return (
<div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>
);
}
});
ReactDOM.render(<Hello name="world"/>,document.getElementById("example"));
</script>
</body>
