一 React

1 React定义

　　React的GitHub地址是 https://github.com/facebook/react。它的官方介绍是 A JavaScript Library for Building user interfaces.可以看出React提出的是一个新的开发模式和理念，它强调的"用户界面".

2. React 特点

　　React主要有3个特点：

1) 作为UI (Just the UI).

　　React只是作为视图(View)在MVC 中使用，

2) 虚拟DOM(Virual Dom )

　　这是React 的一个亮点，可以很好的优化视图的渲染和刷新。虚拟DOM是React最重要的一个特性。

　　以前跟新视图时，需要先清空DOM容器的内容，然后将最新的DOM和数据追加到容器中，现在React将这已操作放进了内存。React认为内存的操作远比视图全部更新来的高效。

随着浏览器的迭代，内存比视图刷新更新来的高效。

　　虚拟DOM的比较，计算出最小更新的视图，然后将差异部分更新放进内存进行比较已完成整个组件的渲染，这就是React如此高效的原因。

3) 数据流(Data Flow)

　　React实现了单向的数据流，相对于传统的数据绑定而言，React更加高效，便捷。

3 学习React需要掌握的知识

　　现在我们对React有了初步的了解，学习React还需要掌握以下的知识。

  • JSX语法知识
  • ES6相关知识
  • 前端基础知识

二 React 例子

　　开发的IDE可以选择 webStrom , sublineText ,Atom .网上有很多React的例子可以参考， 更多 React 例子可以参考 React Demos 。

1 简单组件和数据传递

　　使用 this.props来做简单的数据传递，具体代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

         <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="xinping" />,

        document.getElementById("example")

      );

    </script>

    </body>

</html>

　　上面的代码主要做了两件事情：

　　1）使用React.createClass定义了一个组件HelloMessage。HelloMessage可以传入name属性，同时可以讲内容用h1标签渲染。

　　2）使用React.render方法将组件渲染到id为example的div内。render方法有两个参数，第一个参数就是要渲染的组件内容，第二个就是要渲染到的目标节点。

　　打开Chrome浏览器，可以看到如下效果，打开Chrome console工具，看到渲染后的文档内容如下图所示。

2 非DOM属性

在JSX中存在3个特殊：key、ref、dangerouslySetInnerHTML

1）键（key）：
　　可以是一个可选的唯一标识符。在程序运行的过程中，一个组件可能会在组件树中调整位置，比如当前用户在进行所有操作时，或者当一个列表中的物品被增加、删除时。这种情况下组件可能不需要被销毁并重新创建。
　　通过给组件设置唯一的key。确保渲染周期内保持一致，使React能够更智能的决定应该重用一个组件，还是销毁并重新创建一个组件，今儿提升渲染的性能，当两个已经存在DOM中的组建交换位置时，可以不用重新渲染DOM而是移动。

2）引用（ref）：
　　ref允许父组件在render方法之外保持对子组件的一个引用。

　　在jSX中，可以通过属性中设置期望的引用名定义一个引用。例如：

render：function（）{

    return  <div><input ref='myInput'.../></dib>

}

　　然后，你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了。通过或者这个对象呗成为支持实例。并不是真的DOM，而是React在需要的是有用来穿件DOM的一个描述对象。可以使用this.refs.myInput.getDOMNode()访问真实的DOM节点。

3）设置原始的HTML(dangerouslySetInnerHTML)
　　有时候需要将HTML内容设置为字符串，尤其是使用通过字符串操作DOM的第三方库时，为了提升React的互操作性，这个属性允许你使用HTML字符串，然而如果你可以避免使用的话那就尽量不要使用。要使用这个作用要把字符串设置到逐渐为html_的对象里，像这样：

render：function（）{

           var htmlString={

         _html:"<span>an htmlstring</span>“

    }；

    return <div dangerouslySetInnerHTML={htmString}</div>

}

　　综合例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

         <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() {

        console.log( this.refs.myTextInput.value )

      },

      render: function() {

        return (

          <div>

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

            <input type="button" value="Clicke Me" onClick={this.handleClick} />

          </div>

        );

      }

    });

    ReactDOM.render(

      <MyComponent />,

      document.getElementById('example')

    );

    </script>

    </body>

</html>

资料参考：

http://sowm.cn/css88/article/q6fiAf.html

http://www.cocoachina.com/webapp/20150721/12692.html

https://github.com/ruanyf/react-demos

React Native 开发之 (06) JSX的更多相关文章

  1. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  2. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  4. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  5. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  6. React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

    Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...

  7. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  8. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  9. React Native开发的通讯录应用

    React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...

随机推荐

  1. suggest插件实现下拉选择筛选

    实现的效果展示: 代码如下: 1.需要引入jquery,bootstrap-suggest.js,bootstrap.min.css 2.html页面代码: <!DOCTYPE html> ...

  2. PC互联网和移动互联网的本质差别

    网一代,我们先称为PC互联网,这大约可以从2010年作为分界,然后就是基于手机,及可穿戴的移动互联网. 在PC时代,软件都很庞大复杂,甚至客端端和网页混合,比如常见的桌面软件,Office及Photo ...

  3. matlab中的卷积——filter，conv之间的区别

    %Matlab提供了计算线性卷积和两个多项式相乘的函数conv,语法格式w=conv(u,v),其中u和v分别是有限长度序列向量,w是u和v的卷积结果序列向量. %如果向量u和v的长度分别为N和M,则 ...

  4. tomcat设置端口号和默认webapp

    tomcat一下载,解压之后webapps目录下自带几个webapp: * docs文档:这是一个静态页面集,不用启动tomcat也可以阅读 * examples样例 * hostmanager主机管 ...

  5. Android出现错误后改正后仍显示错误

    今天编Android的时候,layout.xml出现了错误,改正后仍显示错误.试了很多方法. 后来,将原来的复制并删掉,然后再粘贴上去就可以了.

  6. 屠龙之路_坚持就是胜利_NinthDay

    狭小的空间里,屠龙天团的少年们和alpha恶龙苦苦对峙了一夜!这恶龙还挺能熬的,厉害了word龙.无奈之下,五更天的时候,我们的屠龙少年只能先退出战场养精蓄锐,为了不让恶龙再次逍遥法外,机智的屠龙队长 ...

  7. springMvc接受日期类型参数处理

    这个问题,也即是springMvc如何进行参数类型的转换 以把client传过来一个String类型,转换为日期类型为例: 1.controller /** * 接收日期类型参数 * 注意: * sp ...

  8. linux 配置 crontab

    linux中的crontab是定时用的,下面的cron服务就是定时器的意思 crontab -l 列举所有的cron服务 crontab -e 修改cron服务 crontab -r 删除cron服务 ...

  9. 本机ubuntu链接阿里云服务器（也是ubuntu）

    首先在本机安装ssh工具,并修改配置文件(参考:http://www.cnblogs.com/herd/p/5009067.html) 第一步:ssh 100.121.156.32(即:服务器的ip地 ...

  10. ScrollView中嵌套ListView显示

    想要ScrollView中嵌套显示ListView 需要自定义ListView 并重写onMeasure方法 重新计算  heightMeasureSpec的高度 int newHeight = Me ...