學習react入門demo的總結。

最後更新：2015-07-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

在github上找到react入門學習比較好的demo，下面是那個連結：

https://github.com/ruanyf/react-demos

然後接下來是每個demo的學習筆記：

demo1:

<body>
<div id="example"></div>
<script type="text/jsx"> //jsx類型可html和javasript一起寫，遇到 HTML 標籤,就用 HTML 規則解析；遇到代碼塊,就用 JavaScript 規則解析。
React.render(　　　　　　//React.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點
<h1>HelloWorld! My name is BlackBirch. So happy to see you.</h1>,
document.getElementById(‘example‘)//將一個 h1 標題，插入exmaple節點
);
</script>
</body>

demo2:

//js: array.map(callback[,thisArg])對數組的每個元素調用定義的回呼函數並返回包含結果的數組。傳回值：一個新數組，其中的每個元素均為關聯的原始數組元素的回呼函數傳回值。

<body>
<div id="example"></div>
<script type="text/jsx">//jsx類型可html和javasript一起寫，遇到 HTML 標籤,就用 HTML 規則解析；遇到代碼塊,就用 JavaScript 規則解析。
var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];

React.render(
<div>
{
names.map(function (name) {　　
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById(‘example‘)　　　　//將<div>裡面的內容插入example節點
);
</script>
</body>

demo3:

<body>
<div id="example"></div>
<script type="text/jsx">
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
React.render(
<div>{arr}</div>,　　　　　　　　//arr會全部遍曆出現。
document.getElementById(‘example‘)
);
</script>
</body>

demo4:

<body>
<div id="example"></div>
<script type="text/jsx">
var HelloMessage = React.createClass({//建立React組件對應的類HelloMessage
render: function() {　　　　　　////當組件被渲染(使用到)時需要輸出的內容的render介面是必須實現的
return <h1>Hello {this.props.name}</h1>;//.props是通過組件的屬性來傳遞資料,name是屬性。
}
});

React.render(
<HelloMessage name="John" />,
document.getElementById(‘example‘)//HelloMessage 的執行個體插入到example節點。
);
</script>
</body>

1.React.createClass() 建立React組件對應的類，描述你將要建立組件的各種行為，其中只有當組件被渲染時需要輸出的內容的render介面是必須實現的.

2.變數 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動產生 HelloMessage 的一個執行個體（下文的"組件"都指組件類的執行個體）。

??重點：所有組件類都必須有自己的 render 方法，用於輸出組件。

3.組件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如 <HelloMessage name="John" /> ，就是 HelloMessage 組件加入一個 name 屬性，值為 John。組件的屬性可以在組件類的 this.props 對象上擷取，比如 name 屬性就可以通過 this.props.name 讀取。

demo5:

React.render(
<NotesList>
<span>hello</span>
<span>world</span>

</NotesList>,
document.body　　　　//將<NotesList>的案例插入到body裡。
);
</script>

注意??：只有當子節點多餘1個時，this.props.children 才是一個數組，否則是不能用 map 方法的，會報錯。

demo6:

<body>
<div id="example"></div>
<script type="text/jsx">
var MyComponent = React.createClass({
handleClick: function() {//事件點擊後處理函數
React.findDOMNode(this.refs.myTextInput).focus();//findDOMNode擷取真實的DOM，this.refs.myTextInput就指向這個虛擬 DOM 的子節點myTextInput
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />//ref屬性
<input type="button" value="Focus the text input" onClick={this.handleClick} />//onClick單擊事件。調用handleClick方法
</div>
);
}
});

React.render(
<MyComponent />,
document.getElementById(‘example‘)//將MyComponent執行個體化插入example中。
);
</script>
</body>

html DOM:focus() 方法用於設定焦點。

1.組件並不是真實的 DOM 節點，而是存在於記憶體之中的一種資料結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以後，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然後再將實際發生變動的部分，反映在真實 DOM上，這種演算法叫做DOM diff，它可以極大提高網頁的效能表現。

2.組件 MyComponent 的子節點有一個文本輸入框，用於擷取使用者的輸入。這時就必須擷取真實的 DOM 節點，虛擬 DOM 是拿不到使用者輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然後 this.refs.[refName] 就指向這個虛擬 DOM 的子節點，最後通過 React.findDOMNode 方法擷取真實 DOM 的節點。

注意?：由於 React.findDOMNode 方法擷取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以後，才能使用這個方法，否則會返回 null 。上面代碼中，通過為組件指定 Click 事件的回呼函數，確保了只有等到真實 DOM 發生 Click 事件之後，才會調用 React.findDOMNode 方法。

3.React 組件支援很多事件，除了 Click 事件以外，還有 KeyDown 、Copy、Scroll、change 等

demo7:

將組件看成是一個狀態機器，一開始有一個初始狀態，然後使用者互動，導致狀態變化，從而觸發重新渲染 UI

this.state狀態機器

<body>
<div id="example"></div>
<script type="text/jsx">
var LikeButton = React.createClass({//建立組件的類 LikeButton
getInitialState: function(){　　　　　//getInitialState定義初始狀態state
return {liked: false};
},
handleClick: function(event) {　　　//點擊事件
this.setState({liked: !this.state.liked});　　　　//設定狀態 this.setState 方法就修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件

},
render: function() {
var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;////this.state對象提取state會隨著使用者互動而改變。props不會。
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

React.render(
<LikeButton />,
document.getElementById(‘example‘)
);
</script>
</body>

demo8:

使用者在表單填入的內容，屬於使用者跟組件的互動，所以不能用 this.props 讀取

<body>
<script type="text/jsx">
var Input = React.createClass({
getInitialState: function() {//定義初始化
return {value: ‘Hello!‘};
},
handleChange: function(event) {//改變事件調用的方法
this.setState({value: event.target.value});//event.target.value擷取使用者輸入的值
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} /> //onChange 事件會在域的內容改變時發生。
<p>{value}</p>
</div>
);
}
});

React.render(<Input/>, document.body);
</script>
</body>

上面代碼中，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回呼函數，通過 event.target.value 讀取使用者輸入的值。textarea 元素、select元素、radio元素都屬於這種情況。

demo9:

組件的生命週期分成三個狀態：

Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，did 函數在進入狀態之後調用，三種狀態共計五種處理函數。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

componentWillReceiveProps(object nextProps)：已載入組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

<body>
<script type="text/jsx">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {//組件被插入DOM後執行
this.timer = setInterval(function () {//timer定時器，setInterval()方法可以使一段代碼每過指定時間就運行一次
var opacity = this.state.opacity;　　　　
opacity -= .05;　　　　//.05我不懂是什麼意思，難道是0.05？
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({　　//this.setState 方法就修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件
opacity: opacity
});
}.bind(this), 100);//.bind 改變函數內部的this指向,詳情見下面：
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>　　//{{opacity: this.state.opacity}}因為React組建樣式是一個對象，所以第一重大括弧表示這是 JavaScript 文法，第二重大括弧表示樣式對象。
Hello {this.props.name}
</div>
);
}
});

React.render(
<Hello name="world"/>,
document.body
);
</script>
</body>

1.bind方法會建立一個新函數,稱為綁定函數.當調用這個綁定函數時,綁定函數會以建立它時傳入bind方法的第一個參數作為this,傳入bind方法的第二個以及以後的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數.

demo10:

Ajax

組件的資料來源，通常是通過 Ajax 請求從伺服器擷取，可以使用 componentDidMount 方法設定 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI

<body>
<script type="text/jsx">
var UserGist = React.createClass({
getInitialState: function() {
return {
username: ‘‘,
lastGistUrl: ‘‘
};
},

componentDidMount: function() {
$.get(this.props.source, function(result) {　　//$.get()jquery裡的get請求。第一個參數是連結，result是請求返回的值
var lastGist = result[0];　　　
if (this.isMounted()) {　　　　//isMounted判斷組件是否存在。
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
})
}
}.bind(this));
},

render: function() {
return (
<div>
{this.state.username}‘s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});

React.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
</script>
</body>

參考教程：http://www.ruanyifeng.com/blog/2015/03/react.html

謝謝各位大神帶路。

學習react入門demo的總結。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More