本文共 4383 字，大约阅读时间需要 14 分钟。

由于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

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

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

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的值。

注意，这里引用了showdown.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的语法。

1. 参考资料
2. 参考资料
3. 参考资料

转载地址：https://blog.csdn.net/qq_21430549/article/details/48930469 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！