React 組件
React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標(biāo)簽一樣仰冠，在網(wǎng)頁中插入這個(gè)組件。React.createClass 方法就用于生成一個(gè)組件類
接下來我們封裝一個(gè)輸出 "Hello World蝶糯！" 的組件洋只，組件名為 HelloMessage：
//組件類的第一個(gè)字母必須大寫
var HelloMessage = React.createClass({
//所有組件類都必須有自己的 render 方法，用于輸出組件昼捍。
render: function() {
// 注意：組件類只能包含一個(gè)頂層標(biāo)簽识虚，否則也會(huì)報(bào)錯(cuò)。
return <h1>Hello World妒茬！</h1>;
}
});
// ReactDOM.render 是 React 的最基本方法担锤，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點(diǎn)乍钻。
ReactDOM.render(
//模板插入 <HelloMessage /> 時(shí)肛循，會(huì)自動(dòng)生成 HelloMessage 的一個(gè)實(shí)例
<HelloMessage />,
document.getElementById('example')
);
代碼解析
React.createClass 方法用于生成一個(gè)組件類 HelloMessage。
<code><HelloMessage /> </code>實(shí)例組件類并輸出信息银择。
注意：們我這里用大寫字母開頭育拨，以區(qū)別組件與html元素
復(fù)合組件
我們可以通過創(chuàng)建多個(gè)組件來合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離欢摄。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 實(shí)例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
{/*獲取React.render上的屬性 */}
<Name nameComponent={this.props.name} />
<Link siteComponent={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<!-- 組件的屬性可以在組件類的this.props 對(duì)象上獲取 -->
<h1>{this.props.nameComponent}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.siteComponent}
</a>
);
}
});
React.render(
<WebSite name="學(xué)哥" site=" http://www.xuege.com" />,
document.getElementById('example')
);
</script>
</body>
</html>
實(shí)例中 WebSite 組件使用了 Name 和 Link 組件來輸出對(duì)應(yīng)的信息熬丧，也就是說 WebSite 擁有 Name 和 Link 的實(shí)例。
組件中的React State(狀態(tài))
React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）怀挠。通過與用戶的交互析蝴，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI绿淋，讓用戶界面和數(shù)據(jù)保持一致闷畸。
React 里，只需更新組件的 state吞滞，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）佑菩。
以下實(shí)例中創(chuàng)建了 LikeButton 組件，getInitialState 方法用于定義初始狀態(tài)裁赠，也就是一個(gè)對(duì)象殿漠，這個(gè)對(duì)象可以通過 this.state 屬性讀取。當(dāng)用戶點(diǎn)擊組件佩捞，導(dǎo)致狀態(tài)變化绞幌，this.setState 方法就修改狀態(tài)值，每次修改以后一忱，自動(dòng)調(diào)用 this.render 方法莲蜘，再次渲染組件谭确。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鳥教程 React 實(shí)例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//創(chuàng)建LikeButton組件
var LikeButton = React.createClass({
//初始化狀態(tài)
getInitialState: function() {
return {liked: false};
},
//設(shè)置點(diǎn)擊事件的函數(shù)，用來切換狀態(tài)
handleClick: function() {
this.setState({liked: !this.state.liked});
},
//render函數(shù)用于輸出組件
render: function() {
var text = this.state.liked ? '喜歡' : '不喜歡';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我票渠。點(diǎn)我切換狀態(tài)逐哈。
</p>
);
}
});
//ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言问顷，并插入指定的 DOM 節(jié)點(diǎn)鞠眉。
React.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>
組件中的this.props 對(duì)象
state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變择诈。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)械蹋。 而子組件只能通過 props 來傳遞數(shù)據(jù)。
組件中的this.props 對(duì)象組件傳遞參數(shù)
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="xuege" />,
document.getElementById('example')
);
默認(rèn) Props
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'xuege'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
props與state對(duì)比Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鳥教程 React 實(shí)例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "學(xué)哥",
site: "http://www.xuege.com"
};
},
render: function() {
return (
<div>
{/*這里要使用初始化的數(shù)據(jù)羞芍，所以不能使用props屬性 */}
<Name nameComponent={this.state.name} />
<Link siteComponent={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
//子組件中使用props屬性獲取父組件中的state獲取到的數(shù)據(jù)
<h1>{this.props.nameComponent}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.siteComponent}
</a>
);
}
});
React.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
