React Native系列之-React.js介绍
2015-10-06 11:28
471 查看
由于React Native是拿React.js来开发的，那么我们就需要了解下React.js，并学习下React.js的语法 。 以下内容为官网介绍： React是Facebook推出的一个用来构建用户界面的JavaScript库。具备以下特性： 1.仅仅是UI，在使用React的时候，许多人仅仅是当做MVC的V层。 2.虚拟DOM（virtual DOM），React为了更高超的性能而使用虚拟DOM作为其不同的实现。他同事也可以由服务器Node.js渲染-而不需要过重的浏览器DOM支持。 以下内容来自[简书](http://www.jianshu.com/p/ae482813b791) Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。解决这个问题需要“以某种方式组织代码，使其更加可预测”，这通过他们(Facebook)提出的Flux和React已经完成。 接下来我们继续看下官网上的一些简单介绍吧。
一个简单地组件
React组件通过一个render()方法，接受输入的参数并返回展示的对象。使用JSX语法(类似于XML语法)，输入的参数通过render()传入组件后，将存储在this.props。JSX是可选的，并不强制使用。
Live JSX Editor
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage =React.createClass({
render:function(){
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="quanshijie" />,
document.getElementById('example')
)
</script>
</body>
</html>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: "quanshijie"}), document.getElementById('example'));显示结果：
一个有状态的组件
-除了接受输入数据(通过this.props)，组件还可以保持内部状态数据(通过this.state)，当一个组件的状态数据变化时，展现的标记将被重新调用render()更新。
Live JSX Editor
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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--quanshijie:{this.state.secondsElapsed}</div>
}
});
React.render(<Timer />,
document.getElementById('example')
)
</script>
</body>
</html>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--quanshijie ", this.state.secondsElapsed)
);
}
});
React.render(React.createElement(Timer, null), document.getElementById('example'));运行结果下图：（计时器的效果）
一个应用程序
通过使用props和state，我们可以组合构建一个小型的Todo程序。下面的例子使用state去监测当前列表的项以及用户已经输入的文本。尽管时间绑定似乎是内联的方式，但他们将被收集起来并以时间代理的方式实现。
Live JSX Editor
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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 />,
document.getElementById('example')
)
</script>
</body>
</html>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), document.getElementById('example'));运行结果下图：
一个使用外部插件的组件
React是灵活的，并且提供方法允许你跟其他库和框架对接。下面例子展现一个案例，使用外部库Markdown实时转化textarew的值。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/browser.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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>
</div>
);
}
});
React.render(<MarkdownEditor />,
document.getElementById('example')
)
</script>
</body>
</html>注意，这里引用了showdown.js。
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), document.getElementById('example'));运行效果下图：
到这里，简单的介绍就算完了。下一篇将带给大家React的语法。
参考资料React官网
参考资料React的起因
参考资料React中文版文档
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 超级给力的JavaScript的React框架入门教程
- 由ReactJS的Hello world说开来
- 深入理解JavaScript的React框架的原理
- 7月国外最新技术文章翻译汇总（IT技术）
- React Native for Android 官方文档中文版(最新)全国首发
- React.js在ios设备上onClick事件失效的解决办法
- React-Native-Android集成问题总汇
- React从零开始
- react组件生命周期过程
- React入门指南
- 初识React
- react--hello,word
- react-native学习
- React 互动表单
- React 实例-深入理解
- 颠覆式前端UI开发框架：React
- ReactJS读书笔记一：深入理解JSX
- ReactJS读书笔记二：组件生命周期
- ReactJS读书笔记三：组件的组合和通信