這篇文章主要講述的就是關於react該如何學習的介紹，現在讓我們一起來看文章的正文內容吧
React根本上其實就是一個JavaScript函式庫。
它體現了前後分離的思想，將部分組裝頁面的工作轉交給瀏覽器來完成；不像JSP文件，頁面的佈局和填入數據是在伺服器完成後發送給瀏覽器的的。
這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模組(元件)，這些元件的可重複使用性很強，不僅如此，元件也可以讓測試和關注分離變得簡單。其次，當資料變化的時候，React能夠自動更新使用者介面，並且僅更新需要更新的部分。
核心函數1:render
這個函數的功能就是提供一個模組，它就像是樂高玩具的一塊積木，用來組裝頁面。
簡單範例：（先給的是html程式碼，後面給的是JSX程式碼。JSX就是JavaScript XML的意思）
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/ReactDOM.render(
<p>Hello, world!</p>,
document.getElementsByClassName('firstContainer')[0]
);登入後複製
可以看到class 為firstContainer 的p的內容被替換掉了，替換成了我們在render中寫入的程式碼：hello world！
另外document.getElementsByClassName('firstContainer')[0]可以替換成任何原生的JavaScript獲取**單獨某一個（一定是一個Node，因此如果你使用document.getElementsByClassName這樣的方法必須要加上[n]）**DOM元素的方法：document.getElementById或document.getElementsByTagName等都可以。
更複雜一點的例子，我們可以來將這裡的<p>Hello, world!</p> 擴充。
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
<p>
{
(function(){ return <p>Hello, {name}!</p>
})()
}
</p>,
document.getElementById('container')
);登入後複製
我們可以看到JSX語法的神奇之處了，在程式碼中，JS和DOM可以說是混雜在一起的。而JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到程式碼區塊（以 { 開頭），就用 JavaScript 規則解析。
核心函數2:React.createClass
這個函數允許我們自己定義需要的元件，定義好的元件可以作為像p這樣的標籤一樣，直接應用於render函數中。
一個簡單的栗子：
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
render: function() { return (
<p className="helloWorldBox">
Hello, world! I am a helloWorldBox.
</p>
);
}
});
ReactDOM.render(
<HelloWorldBox />,
document.getElementById('container')
);登入後複製
在這個栗子裡，HelloWorldBox就是一個最簡單的元件。
關於這個元件，我們還可以獲得更多資訊。例如，使用props
（實例來自React官網）
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
render: function() { return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</p>
);
}
});var CommentList = React.createClass({
render: function() { return (
<p className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</p>
);
}
});
ReactDOM.render(
<CommentList />,
document.getElementById('container')
);登入後複製
在這個栗子中，我們使用React.createClass方法建立了兩個元件，我們可以看到，在元件CommentList中，嵌套了Comment：也就是說，CommentList是由多個Comment組成的。我們在CommentList中為Comment定義了一個屬性：author。那麼，在Comment元件中，就可以透過{this.props.author}讀到這個屬性，而透過{this.props.children}，則可以讀到這個元件的子節點。
存取外部數據：
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
render: function() { return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</p>
);
}
});var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<p>
{
names.map(function (name) { return <Comment author={name}>is an author~</Comment>
})
}
</p>,
document.getElementById('container')
);登入後複製
在這裡，數組names是外部數據，我們透過建立元件，將這些數據嵌入了網頁的DOM中。
元件state
每個元件都有一個屬性：state，開發者可以透過呼叫this.setState()來改變元件的狀態。當狀態更新之後，元件就會重新渲染自己。 state和props都是一個元件的特性，但是不同的是，props是不變的，但是state是可以改變的。
getInitialState()可以設定元件的初始化狀態，而這個函數在元件的生命週期中只執行一次。
更新狀態：
註：componentDidMount函數是元件的生命週期函數，它是一個在元件被渲染的時候React自動呼叫的方法，後面會詳細講到。
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<p className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
</p>
);
}
});登入後複製
這個栗子中，我們透過ajax取得數據，並透過函數this.setState將取得的數據設定為this.state.data。然後，在CommentList中，設定data={this.state.data}，就可以將從伺服器取得的資料顯示出來。 （想看更多就到PHP中文網React參考手冊欄位學習）
元件的生命週期
元件的生命週期分為以下三種：
Mounting：已插入真實DOM
#Updating：正在重新渲染
- ##Unmounting：已移出真實DOM
在元件的生命週期中，有生命週期函數會被自動呼叫。它們分別是：
componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()
登入後複製
另外還有兩個特殊狀態的處理函數：
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
登入後複製
下面這個栗子來自於阮一峰大神的博客：
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 (
<p style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</p>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);登入後複製
componentDidMount函數在元件插入真實DOM以後調用，在這個函數裡，我們設定了一個定時器，每100毫秒改變一次透明度，直到元件完全透明後，將透明度再設定成1(初始的透明度設定為1)。這樣，這個元件聚會不停在被渲染。這樣，我們就在頁面上得到了一個不停閃爍的hello world字串。如果我們寫函數：
componentDidUpdate:function(){
console.log("did update");
}登入後複製
我們就可以在控制台看到不斷的輸出。
React根本上其實就是一個JavaScript函式庫。
它體現了前後分離的思想，將部分組裝頁面的工作轉交給瀏覽器來完成；不像JSP文件，頁面的佈局和填入數據是在伺服器完成後發送給瀏覽器的的。
這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模組(元件)，這些元件的可重複使用性很強，不僅如此，元件也可以讓測試和關注分離變得簡單。其次，當資料變化的時候，React能夠自動更新使用者介面，並且僅更新需要更新的部分。
這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。
以上是react的函數有哪些？ react函數的詳細解析（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
