原文地址：北雲軟件-初識React
專注於UI
在MVC分層設計模式中，react常被拿來實現視圖層(V)。
React不依賴於技術棧的其他部分，因此可以方便的在現有項目中嘗試用它來實現一個小特性。
虛擬DOM
React從DOM中抽象出來，給出一種更簡潔的編程模型，且性能表現更好。能夠通過NodeJS實現服務端渲染，通過React Native開發原生app。
數據流
React實現單向、響應式數據流，減少boilerplate且比傳統數據綁定更容易理解。
簡潔的組件
React的組件都實現了一個render()方法，它接收輸入的數據並返回要顯示的內容。這個例子中我們使用JSX(類XML語法)來編寫代碼。render()方法通過this.props屬性來訪問輸入的數據。
React並不強制要求開發者使用JSX。在“編譯的JS”中可以查看JSX生成的原始Javascript代碼。
// JSX code
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
// compiled javascript code
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); |
帶狀態的組件
除了可以通過this.props訪問輸入數據之外，組件還可以通過this.state來維持他的內部狀態數據。當一個組件的狀態數據改變時，組件將重新調用render()方法來重繪。
// JSX code
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 javascript code
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); |
React應用
結合使用屬性(props)和狀態(state)，可以構建一個基礎的代辦事項應用。這個例子中使用狀態來跟蹤事項列表和用戶輸入的新事項名稱，即使事件處理程序看起來是內聯的，他們仍將會通過代理被收集和實現。
// JSX code
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText, index) {
return <li key={index + itemText}>{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 javascript code
var TodoList = React.createClass({displayName: "TodoList",
render: function() {
var createItem = function(itemText, index) {
return React.createElement("li", {key: index + itemText}, 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非常靈活，通過鉤子允許與其他的庫和框架對接。這個例子使用外部的Markdown庫來實時轉化文本域中的內容。
// JSX code
var MarkdownEditor = React.createClass({
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: React.findDOMNode(this.refs.textarea).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: marked(this.state.value, {sanitize: true})
}}/>
</div>
);
}
});
React.render(<MarkdownEditor />, mountNode);
// compiled javascript code
var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: React.findDOMNode(this.refs.textarea).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: marked(this.state.value, {sanitize: true})
}
})
)
);
}
});
React.render(React.createElement(MarkdownEditor, null), mountNode); |