React Native系列之-React.js介绍

由于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","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",itemText);
    };
    return React.createElement("ul",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});
  },React.createElement("h3","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",'Add #' + (this.state.items.length + 1))
        )
      )
    );
  }
});

React.render(React.createElement(TodoApp,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});
  },{className: "MarkdownEditor"},"Input"),React.createElement("textarea",{
          onChange: this.handleChange,ref: "textarea",defaultValue: this.state.value}),"Output"),React.createElement("div",{
          className: "content",dangerouslySetInnerHTML: {
            __html: converter.makeHtml(this.state.value)
          }}
        )
      )
    );
  }
});

React.render(React.createElement(MarkdownEditor,document.getElementById('example'));

运行效果下图：

到这里，简单的介绍就算完了。下一篇将带给大家React的语法。

参考资料React官网
参考资料React的起因
参考资料React中文版文档

React Native系列之-React.js介绍

相关推荐