React Native系列之-React.js介绍

最新推荐文章于 2024-09-01 09:30:55 发布

_StriveG

最新推荐文章于 2024-09-01 09:30:55 发布

阅读量1.5k

点赞数

分类专栏： React Native 文章标签： React

本文链接：https://blog.csdn.net/qq_21430549/article/details/48930469

版权

React Native 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

    由于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'));