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", 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的语法。

  1. 参考资料React官网
  2. 参考资料React的起因
  3. 参考资料React中文版文档
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值