現(xiàn)在我們可以在HelloWorld的基礎(chǔ)上開(kāi)始練習(xí)官網(wǎng)首頁(yè)上的幾個(gè)例子籽前。
A Stateful Component
一個(gè)可以處理State（狀態(tài)）的組件：
在App.js組件中通過(guò)<Timer>標(biāo)簽引入到App組件的顯示布局中枝哄。
最終效果如下：
在這個(gè)小練中，我們學(xué)到：props和state侨赡，當(dāng)通過(guò)setState()函數(shù)重新設(shè)置state的值時(shí)羊壹，rander()方法會(huì)被調(diào)用重新繪制組件的界面油猫。
還有一些window的內(nèi)置函數(shù)setInterval：
Window.prototype.setInterval = function(code,delay) {};
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)情妖，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉毡证。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)料睛。
JavaScript中的class
ES6提供了更接近傳統(tǒng)語(yǔ)言的寫法摇邦，引入了Class（類）這個(gè)概念涎嚼，作為對(duì)象的模板挑秉。通過(guò)class關(guān)鍵字犀概，可以定義類姻灶〔恚基本上，ES6的class可以看作只是一個(gè)語(yǔ)法糖这嚣，它的絕大部分功能姐帚，ES5都可以做到障涯，新的class寫法只是讓對(duì)象原型的寫法更加清晰唯蝶、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已粘我。
JavaScript語(yǔ)言的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù)涂滴，定義并生成新對(duì)象晴音。
問(wèn)題
用懂了靜態(tài)語(yǔ)言锤躁，在看上面的代碼時(shí)有一點(diǎn)感到奇怪的地方，Timer.js的“this.tick()”調(diào)用霸琴，我們看到tick的代碼：
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed +1
}));
}
tick()方法并沒(méi)有傳參數(shù)梧乘，prevState是形參选调，那么它的值是怎么來(lái)的仁堪？
請(qǐng)看setState的說(shuō)明：https://facebook.github.io/react/docs/react-component.html#setstate
setState(nextState, callback)
setState也接授一個(gè)這種簽名的函數(shù)：“function(state, props) => newState” 做為它的參數(shù)填渠，正是我們上面這個(gè)例子所使用的莺葫，只是沒(méi)有使用props。
this.setState((prevState, props) => {
return {myInteger: prevState.myInteger + props.step};
});
An Application
使用props和state創(chuàng)建一個(gè)Todo應(yīng)用徙融。在Hello-world項(xiàng)目的src下添加TodoApp.js文件欺冀。
代碼如下：
import React from 'react';
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {items: [], text: ''};
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.text}/>
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
var newItem = {
text: this.state.text,
id: Date.now()
};
this.setState((prevState) => ({
items: prevState.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
export default TodoApp;
然后修改index.js，把引用的組件換成TodoApp职车，這里界面上就只需要TodoApp中的render()內(nèi)容鹊杖。
最終效果如下：
這一節(jié)有幾個(gè)新的東西：
this.handleChange = this.handleChange.bind(this);
要理解清楚JavaScript中bind和this的意思积瞒。這里是使用bind函數(shù)茫孔，把期望的this值傳遞給handleChange()函數(shù)。JavaScript中數(shù)組的map和concat方法馍悟。
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組锣咒。該方法不會(huì)改變現(xiàn)有的數(shù)組宠哄，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本毛嫉。preventDefault：取消事件的默認(rèn)動(dòng)作承粤。該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）辛臊。例如彻舰，如果type屬性是"submit"刃唤，通過(guò)調(diào)用該方法白群，可以阻止提交表單笼裳。
箭頭函數(shù)和this：箭頭函數(shù)沒(méi)有它自己的this值粱玲，箭頭函數(shù)內(nèi)的this值繼承自外圍作用域抽减。在箭頭函數(shù)出現(xiàn)之前，每個(gè)新定義的函數(shù)都有其自己的this值（例如昧廷，構(gòu)造函數(shù)的this指向了一個(gè)新的對(duì)象木柬；嚴(yán)格模式下的函數(shù)的this值為 undefined眉枕；如果函數(shù)是作為對(duì)象的方法被調(diào)用的，則其this指向了那個(gè)調(diào)用它的對(duì)象）速挑，在面向?qū)ο箫L(fēng)格的編程中，這被證明是非常惱人的事情腊满。
A Component Using External Plugins
如何在React的組件中使用外部的插件碳蛋，這個(gè)例子要使用Markdown的一個(gè)插件來(lái)把輸入的文字轉(zhuǎn)換成Markdown格式肃弟。
先在Hello-world的項(xiàng)目上安裝Markdwon需要用到的插件：
npm install remarkable --save
然后在src下新建一個(gè)MarkdownEditor.js組件：
代碼如下：
import React from 'react';
import Remarkable from 'remarkable';
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {value: 'Type some *markdown* here!'};
}
handleChange() {
this.setState({value: this.refs.textarea.value});
}
getRawMarkup() {
var md = new Remarkable();
return {
__html: md.render(this.state.value)
};
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<textarea onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
export default MarkdownEditor;
暫時(shí)忽略render()方法中用到css樣式，如div className的屬性零蓉，不要影響我們學(xué)習(xí)的主要目標(biāo)笤受。
之后同樣把?index.js中顯示的組件替換成MarkdownEditor。最終效果如下：
