React Native系列之-React.js介绍

来源：互联网发布：wpf编程宝典c 编辑：程序博客网时间：2024/05/20 04: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

<!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中文版文档

0 0