React-Native（三）：React Native是基于React设计的

React Native是基于React js设计的。

　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

　　由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

　　这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。

如何使用呢？这里引用《阮一峰的网络日志-React 入门实例教程》中的10个react js的用法为例来学习：

关于代码包：https://github.com/ruanyf/react-demos

1）ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

2）HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(

        <div>

        {

          names.map(function (name, index) {

            return <div key={index}>Hello, {name}!</div>

          })

        }

        </div>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var arr = [

        <h1 key="1">Hello world!</h1>,

        <h2 key="2">React is awesome</h2>,

      ];

      ReactDOM.render(

        <div>{arr}</div>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

3）React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.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 <h1>Hello {this.props.name}</h1>;

        }

      });

      ReactDOM.render(

        <HelloMessage name="John" />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

4）this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var NotesList = React.createClass({

        render: function() {

          return (

            <ol>

              {

                React.Children.map(this.props.children, function (child) {

                  return <li>{child}</li>;

                })

              }

            </ol>

          );

        }

      });

      ReactDOM.render(

        <NotesList>

          <span>hello</span>

          <span>world</span>

        </NotesList>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

5）组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var data = 123;

      var MyTitle = React.createClass({

        propTypes: {

          title: React.PropTypes.string.isRequired,

        },

        render: function() {

          return <h1> {this.props.title} </h1>;

        }

      });

      ReactDOM.render(

        <MyTitle title={data} />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

6）组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />

        <input type="button" value="Focus the text input" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

7）this.state：组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var LikeButton = React.createClass({

  getInitialState: function() {

    return {liked: false};

  },

  handleClick: function(event) {

    this.setState({liked: !this.state.liked});

  },

  render: function() {

    var text = this.state.liked ? 'like' : 'haven\'t liked';

    return (

      <p onClick={this.handleClick}>

        You {text} this. Click to toggle.

      </p>

    );

  }

});

ReactDOM.render(

  <LikeButton />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

8）表单：用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var Input = React.createClass({

        getInitialState: function() {

          return {value: 'Hello!'};

        },

        handleChange: function(event) {

          this.setState({value: event.target.value});

        },

        render: function () {

          var value = this.state.value;

          return (

            <div>

              <input type="text" value={value} onChange={this.handleChange} />

              <p>{value}</p>

            </div>

          );

        }

      });

      ReactDOM.render(<Input/>, document.getElementById('example'));

    </script>

  </body>

</html>

，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

9）组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考官方文档。

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var Hello = React.createClass({

        getInitialState: function () {

          return {

            opacity: 1.0

          };

        },

        componentDidMount: function () {

          this.timer = setInterval(function () {

            var opacity = this.state.opacity;

            opacity -= .05;

            if (opacity < 0.1) {

              opacity = 1.0;

            }

            this.setState({

              opacity: opacity

            });

          }.bind(this), 100);

        },

        render: function () {

          return (

            <div style={{opacity: this.state.opacity}}>

              Hello {this.props.name}

            </div>

          );

        }

      });

      ReactDOM.render(

        <Hello name="world"/>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

10）Ajax：组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

    <script src="../build/jquery.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var UserGist = React.createClass({

  getInitialState: function() {

    return {

      username: '',

      lastGistUrl: ''

    };

  },

  componentDidMount: function() {

    $.get(this.props.source, function(result) {

      var lastGist = result[0];

      if (this.isMounted()) {

        this.setState({

          username: lastGist.owner.login,

          lastGistUrl: lastGist.html_url

        });

      }

    }.bind(this));

  },

  render: function() {

    return (

      <div>

        {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.

      </div>

    );

  }

});

ReactDOM.render(

  <UserGist source="https://api.github.com/users/octocat/gists" />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

我们甚至可以把一个Promise对象传入组件。



ReactDOM.render(

  <RepoList

    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}

  />,

  document.body

);

上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

React-Native（三）：React Native是基于React设计的的更多相关文章

[转] 三步将你的 React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势二.基 ...
基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网我猜去全部机翻+个人 ...
为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
React Native 三端同构
React Native 三端同构 https://www.ibm.com/developerworks/cn/web/wa-universal-react-native/index.html rea ...
移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
React Native v0.4 发布，用 React 编写移动应用
React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests ...

随机推荐

利用sfc文件构建网络渗透
收集哈希 SCF(Shell命令文件)文件可用于执行一组有限的操作,例如显示Windows桌面或打开Windows资源管理器,这并不是什么新鲜事.然而,一个SCF文件可以用来访问一个特定的UNC路 ...
PHP中的ArrayAccess用法详解
在Laravel的源码当中,作者多次使用到了PHP SPL中的ArrayAccess接口,那么这个ArrayAccess接口到底有什么作用呢?我会用一个简单的例子跟大家说明. 请看下面的这段代码,Fo ...
EntityFramework Core 运行dotnet ef命令迁移背后本质是什么？（EF Core迁移原理）
前言终于踏出第一步探索EF Core原理和本质,过程虽然比较漫长且枯燥乏味还得反复论证,其中滋味自知,EF Core的强大想必不用我再过多废话,有时候我们是否思考过背后到底做了些什么,到底怎么实现的 ...
MYSQL数据库学习十三使用MySQL常用函数
13.1 字符串函数对于针对字符串位置的操作,第一个位置被标记为1. 函数功能 CONCAT(str1,str2...strn) 连接字符串str1.str2....strn INSERT(str ...
linux --> Event Loop介绍
Event Loop介绍想要理解Event Loop,就要从程序的运行模式讲起.运行以后的程序叫做"进程"(process),一般情况下,一个进程一次只能执行一个任务. 如果有很 ...
Lucene详解
一.lucene原理 Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎.它不是一个完整的搜索应用程序 ...
java中最常用jar包的用途说明
java中最常用jar包的用途说明,适合初学者 jar包用途 axis.jar SOAP引擎包 commons-discovery-0.2.jar 用来发现.查找和实现可插入式接口,提供一些一般类实 ...
发布利用 Qt Assistant来做帮助系统的程序遇到的问题
最近,一直在做反演初始模型可视化建模的软件 model Constraint,最后的步骤就是利用 Qt Assistant为自己的程序制作帮助系统. 1.<Qt Creator快速入门>和 ...
drbd(二)：配置和使用
本文目录:1.drbd配置文件2.创建metadata区并计算metadata区的大小3.启动drbd4.实现drbd主从同步5.数据同步和主从角色切换6.drbd脑裂后的解决办法7.drbd多卷组配 ...
JavaWeb学习笔记七事务
什么是事务?一件事情有n个组成单元 ,要么这n个组成单元同时成功,要么n个单元就同时失败.就是将n个组成单元放到一个事务中. mysql的事务默认的事务:一条sql语句就是一个事务,默认就开启事务并 ...

React-Native（三）：React Native是基于React设计的

React-Native（三）：React Native是基于React设计的的更多相关文章

随机推荐

热门专题