溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。由于 React 的設計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發(fā)的主流工具。
ReactJS官網(wǎng)地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
React認為一個組件應該具有如下特征：
（1）可組合（Composeable）：一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。如果一個組件內(nèi)部創(chuàng)建了另一個組件，那么說父組件擁有（own）它創(chuàng)建的子組件，通過這個特性，一個復雜的UI可以拆分成多個簡單的UI組件；
（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；
（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；
我們新建一個html文件，引用react.js和JSXTransformer.js這兩個js文件。html模板如下(js路徑改成自己的):
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body></html>
script的type是text/babel,這是因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
下面開始看react該怎么寫，還是傳統(tǒng)的老規(guī)矩 hello word:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h2>hello word</h2>,document.getElementById('example'));
</script>
</body>
</html>在上例的body中，有一個div，id是example, 然后由react的渲染器把h2標簽渲染到該div中。
ReactDOM.render（DOM節(jié)點，被插入的父節(jié)點）;
這一句代碼是最常用也是非常必要的一句。 這句中有個很重要的地方就是html語法和js語法的混寫，這是jsx語法的特點，在jsx語法里，遇到 尖括號就按照html來解析，遇到花括號就按照js語法去解析。下面這個例子更能說明jsx語法的寫法：
var list = ["word","man","boy"];
ReactDOM.render(
<div>
{
list.map(function (name){
return <div> hello {name}</div>
})
}
</div>,document.getElementById('example'));
</script>最終的結(jié)果是：
hello word
hello man
hello boy
這里有一點需要說明的是 ReactDOM.render 渲染器的第一個參數(shù)里，有且只能有一個頂級節(jié)點，不能有多個并列，否則會報錯。JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數(shù)組，則會展開這個數(shù)組的所有成員。
var list = [<h2>word</h2>,<h2>man</h2>,<h2>boy</h2>];
ReactDOM.render(<div>{list}</div>,document.getElementById('example'));
</script>最終結(jié)果是：
React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網(wǎng)頁中插入這個組件。React.createClass 方法就用于生成一個組件類：
var HelloWord = React.createClass({
render:function(){
return <p>hello {this.props.name}</p>
}
});
ReactDOM.render(<HelloWord name="喵星人"/>,document.getElementById('example'));最終結(jié)果是：
hello 喵星人
上例中用React.createClass創(chuàng)建了一個組件類HelloWord,這里有一點需要注意：組件類名字的首字母必須是大寫的,否則會報錯。React.createClass接收一個對象，對象中必須有render屬性，render屬性的值一般都是寫成一個函數(shù)，然后返回一個DOM對象，別忘了上面說的，這個DOM對象有且只能有一個頂級節(jié)點，否則會報錯。
我們在上面的代碼的return 里會看到有這么一段：this.props.name，然后在ReactDom.render中的第一個參數(shù)里會看到標簽有一個屬性name="喵星人",這里需要記住的一點是name="喵星人"看上去就像在對函數(shù)傳參數(shù)，而this.props.name就是對參數(shù)的接收。
添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點。
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
this.props.children.map(function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}});ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
<p>main</p>
</NotesList>,
document.getElementById('example'));最終運行結(jié)果：
hello
world
3. main
2 和3之間的換行是因為p標簽會自帶一個換行，li標簽也會有一個換行，所以中間就有了一個空白行.
組件免不了要與用戶互動，React 的一大創(chuàng)新，就是將組件看成是一個狀態(tài)機，一開始有一個初始狀態(tài)，然后用戶互動，導致狀態(tài)變化，從而觸發(fā)重新渲染 UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}});ReactDOM.render(
<LikeButton />,
document.getElementById('example'));最終結(jié)果：
You haven't liked this. Click to toggle.
當在文字上點擊時會變成：
You like this. Click to toggle.
然后一直點擊就會在兩句英文之間來回切換。
這里需要注意的是 getInitialState 是React默認的屬性，需要返回一個對象，可以是NULL或者其他，表示初始狀態(tài)，返回的對象中可以不止有一個屬性，修改這些狀態(tài)可以使用react提供的方法this.setState(對象), 這里的對象可以只修改初始狀態(tài)中的某一個屬性，也可以同時修改多個。當任何一個狀態(tài)改變的時候react就會重新調(diào)用 render屬性所指向的函數(shù)，也就意味著會重新渲染該組件。
組件的生命周期分成三個狀態(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)用
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.body);上面代碼在hello組件加載以后，通過 componentDidMount 方法設置一個定時器，每隔100毫秒，就重新設置組件的透明度，從而引發(fā)重新渲染。這里需要注意的地方是在setInterval的第一個參數(shù)也就是計時器觸發(fā)函數(shù)后使用了bind(this)，計時器函數(shù)中不能直接使用this來獲取react的狀態(tài)或?qū)傩?，需要綁定this。
小結(jié)：
react提供的屬性：
getInitialState 設置默認狀態(tài)
setState 修改狀態(tài)
render 返回組件
componentWillMount() 插入真實DOM之前調(diào)用
componentDidMount() 插入真實DOM之后調(diào)用
componentWillUpdate(object nextProps, object nextState) 重新渲染之前調(diào)用
componentDidUpdate(object prevProps, object prevState) 重新渲染之后調(diào)用
componentWillUnmount() 移出真實DOM之前調(diào)用
propTypes 驗證組件實例的屬性是否符合要求
getDefaultProps 設置組件屬性的默認值。
最后兩個屬性本文中沒有介紹，詳細介紹請參閱http://www.ruanyifeng.com/blog/2015/03/react.html
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
