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 ...

随机推荐

python import自定义模块方法
转自:http://www.cnitblog.com/seeyeah/archive/2009/03/15/55440.html python包含子目录中的模块方法比较简单,关键是能够在sys.pat ...
基于Ubuntu的LNMP环境搭建
装备的工具 Ubuntu16.04 , Xshell 使用Xshell链接到Ubuntu 使用xshell链接Ubuntu不是必须的,只是为了操作的方便,同时默认是你的Ubuntu已经安装好了在Ub ...
研华ADAM 6000系列型号枚举值
public enum Adam6000Type { Non = 0, Adam6015 = 6015, Adam6017 = 6017, ...
[译文] SQL JOIN，你想知道的应该都有
介绍这是一篇阐述SQL JOINs的文章. 背景我是个不喜欢抽象的人,一图胜千言.我在网上查找了所有的关于SQL JOIN的解释,但是没有找到一篇能用图像形象描述的. 有些是有图片的但是他们没有覆 ...
centos文件系统变为只读的解决处理
简单粗暴:重启 Linux系统重启或无故变为只读造成网站无法正常访问的简单临时的做法: 一. 1.mount: 用于查看哪个模块输入只读,一般显示为: /dev/hda1 on / type ext3 ...
Aizu - 0531 Paint Color
白书例题,直接用书上的暴力压缩坐标是可以的,但是看了别人的博客的写法,大概是理解了思想但是看不懂为什么那么压缩,先放这,等明白了补上 #define debug #include<stdio.h ...
『开源重编译』System.Data.SQLite.dll 自适应 x86 x64 AnyCPU 重编译
背景: > System.Data.SQLite.dll 程序集不能良好的支持 AngCPU 格式 System.Data.SQLite.dll 在适应 x86 和 x64 有三个方案: & ...
北京工业大学耿丹学院2016下C作业学习总结
北京工业大学耿丹学院2016下C的班级地址在https://edu.cnblogs.com/campus/bjgygd/Sixteen-One . 第一次作业:两部分第一部分:新建博客,书写第一篇随 ...
android context获取目录详解
获取 sqlite系统数据库路径方式1: ApkInfo apkInfo = new ResourceUtil(context).getApkInfo(); APP_PATH = new Strin ...
【iOS】swift 让程序挂起后，能在后台继续运行任务
1,程序的挂起和退出由于iOS设备资源有限.当用户点击了home键,或者另一个应用程序启动了.那么原先那个程序便进入后台被挂起,不是退出,只是停止执行代码,同时它的内存被锁定.当应用程序恢复时,它会 ...

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

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

随机推荐

热门专题