React_Image.svg
React 是 Facebook 推出的一個用來構(gòu)建用戶界面的 JavaScript 庫卸伞。具備以下特性：
- 不是一個 MVC 框架
- 不使用模板
- 響應(yīng)式更新非常簡單
- HTML5 僅僅是個開始
僅僅是 UI
許多人使用 React 作為 MVC 架構(gòu)的 V 層。 盡管 React 并沒有假設(shè)過你的其余技術(shù)棧仔燕， 但它仍可以作為一個小特征輕易地在已有項目中使用
虛擬 DOM
React 為了更高超的性能而使用虛擬 DOM 作為其不同的實現(xiàn)沪蓬。 它同時也可以由服務(wù)端 Node.js 渲染 － 而不需要過重的瀏覽器 DOM 支持
數(shù)據(jù)流
React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流双吆，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單绷落。
一個簡單的組件
React 組件通過一個render()方法，接受輸入的參數(shù)并返回展示的對象始苇。
以下這個例子使用了 JSX砌烁，它類似于XML的語法
輸入的參數(shù)通過render()傳入組件后，將存儲在this.props
JSX 是可選的催式，并不強制要求使用函喉。
點擊 "Compiled JS" 可以看到 JSX 編譯之后的 JavaScript 代碼
Live JSX Editor
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode)
Hello John
Compiled JS
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
一個有狀態(tài)的組件
除了接受輸入數(shù)據(jù)（通過 this.props ），組件還可以保持內(nèi)部狀態(tài)數(shù)據(jù)（通過 this.state ）荣月。當(dāng)一個組件的狀態(tài)數(shù)據(jù)的變化管呵，展現(xiàn)的標記將被重新調(diào)用 render() 更新。
Live JSX Editor
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer />, mountNode);
Compiled JS
var Timer = React.createClass({displayName: "Timer",
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)
);
}
});
React.render(React.createElement(Timer, null), mountNode);
一個應(yīng)用程序
通過使用props和state, 我們可以組合構(gòu)建一個小型的 Todo 程序哺窄。
下面例子使用state去監(jiān)測當(dāng)前列表的項以及用戶已經(jīng)輸入的文本捐下。 盡管事件綁定似乎是以內(nèi)聯(lián)的方式，但他們將被收集起來并以事件代理的方式實現(xiàn)萌业。
Live JSX EditorCompiled JS
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.render(<TodoApp />, mountNode);
Compiled JS
var TodoList = React.createClass({displayName: "TodoList",
render: function() {
var createItem = function(itemText) {
return React.createElement("li", null, itemText);
};
return React.createElement("ul", null, this.props.items.map(createItem));
}
});
var TodoApp = React.createClass({displayName: "TodoApp",
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
React.createElement("div", null,
React.createElement("h3", null, "TODO"),
React.createElement(TodoList, {items: this.state.items}),
React.createElement("form", {onSubmit: this.handleSubmit},
React.createElement("input", {onChange: this.onChange, value: this.state.text}),
React.createElement("button", null, 'Add #' + (this.state.items.length + 1))
)
)
);
}
});
React.render(React.createElement(TodoApp, null), mountNode);
一個使用外部插件的組件
React 是靈活的坷襟，并且提供方法允許你跟其他庫和框架對接。
下面例子展現(xiàn)了一個案例生年，使用外部庫 Markdown 實時轉(zhuǎn)化 textarea 的值婴程。
Live JSX Editor
var converter = new Showdown.converter();
var MarkdownEditor = React.createClass({
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: this.refs.textarea.getDOMNode().value});
},
render: function() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<textarea
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value} />
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={{
__html: converter.makeHtml(this.state.value)
}}
/>
</div>
);
}
});
React.render(<MarkdownEditor />, mountNode);
Compiled JS
var converter = new Showdown.converter();
var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: this.refs.textarea.getDOMNode().value});
},
render: function() {
return (
React.createElement("div", {className: "MarkdownEditor"},
React.createElement("h3", null, "Input"),
React.createElement("textarea", {
onChange: this.handleChange,
ref: "textarea",
defaultValue: this.state.value}),
React.createElement("h3", null, "Output"),
React.createElement("div", {
className: "content",
dangerouslySetInnerHTML: {
__html: converter.makeHtml(this.state.value)
}}
)
)
);
}
});
React.render(React.createElement(MarkdownEditor, null), mountNode);
本教程部分內(nèi)容來源于 React 中文網(wǎng) - reactjs.cn
React 官網(wǎng)：http://facebook.github.io/react/
| 更新日期 | 更新內(nèi)容 |
|---|---|
| 2015-04-10 | React 中文版發(fā)布 |
版本信息
書中演示代碼基于以下版本：
| 語言/框架 | 版本信息 |
|---|---|
| react | 0.13.1 |
課程目錄
- 快速入門 - QUICK START
- 指南 - GUIDES
- 參考 - REFERENCE
- 溫馨提示 - TIPS
- 簡介
- 行內(nèi)樣式
- JSX 中的 If-Else
- 自閉合標簽
- JSX 根節(jié)點的最大數(shù)量
- 在樣式props中快速制定像素值
- 子 props 的類型
- Controlled Input 值為 null 的情況
- Mounting 后 componentWillReceiveProps 未被觸發(fā)
- getInitialState 里的 Props 是一個反模式
- 組件的 DOM 事件監(jiān)聽
- 通過 AJAX 加載初始數(shù)據(jù)
- JSX 的 false 處理
- 組件間的通信
- 公開組件功能
- 組件的引用
- this.props.children undefined
- 與其他類庫并行使用React
- Dangerously Set innerHTML
