很久就期待学习react了，惰性，一直都没有去翻阅react的资料，最近抽空，简单的了解了一下react，先记录一下，后续慢慢的学习。

一、ReactJS简介

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

　　ReactJS官网地址：http://facebook.github.io/react/

　　Github地址：https://github.com/facebook/react

二、ReactJS特点

　　React 的核心思想是：封装组件。

　　各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。
　　基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。基于这些概念：组件，JSX，Virtual DOM，Data Flow

　　组件

　　React 应用都是构建在组件之上。
　　上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。
props 是组件包含的两个核心概念之一，另一个是 state（这个组件没用到）。可以把 props 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。+

　　JSX

　　从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。
　　好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要“编译”输出 JS 代码才能使用的，之后就会讲到开发环境。

　　Virtual DOM

　　当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。
当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

　　Data Flow

　　“单向数据绑定”是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。

　　注意，这四类，我们使用时类名必须大写。

三、ReactJS简单例子

<!DOCTYPE html>

<html>

  <head>

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

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

  </head>

  <body>

    <div id="container"></div>

    <script type="text/jsx">

      var mountNode = document.getElementById("container");

      var HelloMessage = React.createClass({

          render: function() {

            return <div>Hello {this.props.name}</div>;

          }

        });

        React.render(<HelloMessage name="John" />, mountNode);

    </script>

  </body>

</html>

　　jsx编译后出现（React部分）：

var HelloMessage = React.createClass({displayName: "HelloMessage",

  render: function() {

    return React.createElement("div", null, "Hello ", this.props.name);

  }

});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

　　JSXTransformer.js是来编译jsx的，jsx与js不兼容，所以我们要在script标签里面加text/jsx，已示区别，由于babel.js能更好的是将 JSX 语法转为 JavaScript 语法（也可以把ES6转换为ES5）。编译转换，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

　　安装babel

npm install -g babel  babel-cli

　　转换：

$ babel src --out-dir build

　　上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

　　例子还有还有一种写法：通过browser.js将jsx语法转换为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">

      // ** Our code goes here! **

    </script>

  </body>

</html>　　

　　上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
　　其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

　

　　参考学习资料：

　　也许，DOM 不是答案（解释dom导致了web页面性能低下）

　　React 入门实例教程

　　React中文官网api

　　React中文api(非官网)

　　基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用

　　babel中文编译示例

　　gulp入门+ES6

　　react-demos

　　React官方JSX 语法

　　Babel 在线工具

　　React.cn中文

初始react的更多相关文章

  1. 初始React Native

    1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...

  2. 初始react native遇到的问题

    转载自Andriod 使用react native时遇到的问题     打开现有项目报错: 从第一行Error可以知道是一个zip的压缩文件打不开,往下看应该是下载的Gradle文件有问题,提示也是让 ...

  3. 初学React，setState后获取到的thisstate没变，还是初始state？

    问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...

  4. react初始（1）

    前言:react框架的出现是因为Facebook在建设Instagram交流平台的时候要处理大量的数据流,但是行业流行的MVC框架并不能适合Facebook公司的要求,他们就组织了自己的人力来开发re ...

  5. react初始（2）

    既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力.我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接 ...

  6. react初始

    一.一些基础概念 1.框架:基于整个项目的 2.库:在某个模块中单独使用,轻量级的 在vue中,DOM的操作时DOM指令调用js 在react中,所有的DOM 渲染都是由JS完成的 组件基于视图 模块 ...

  7. react开发初始配置和一些问题

    1.npm run build之后,打开网页显示为空白的解决方案 初始使用的开发者应该都会使用create-react-app,初次尝试,启动没有问题,然后就测试一下build,结果发现本地文件ind ...

  8. React中如何实现模态框每次打开都是初始界面

    问题描述如下 解决方案:每次点击打开模态框的时候为,当前模态框设置一个独立的key值,代码如下: /* * 上传文件的模块框控制 * */ showFileModal = () => { thi ...

  9. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

随机推荐

  1. Android学习之——GridView

    背景知识 GridView在Android开发中和ListView一样经常被使用.如我们经常使用的快图浏览,里面就有将图片的布局改为网格(即GridView)的选项.还有约X神器——陌陌的搜索界也是用 ...

  2. srv.exe蠕虫病毒~

    你是否在电脑使用过程中遇到过这样的问题: 1.文件运行后,同目录下会出现一个原名 srv.exe的文件 2.文件运行后会把浏览器打开 3.电脑上的html文件末尾会增加一大堆东西 完了,电脑中了srv ...

  3. C#静态构造函数调用机制

    https://blog.csdn.net/cjolj/article/details/56329230 若一个类中有静态构造函数,在首次实例化该类或任何的静态成员被引用时,.NET自动调用静态构造函 ...

  4. WPF设置样式的几种方式

    第一种方式是直接使用Setter来进行,可以对Background等进行设置. <Window.Resources> <Style TargetType="Button&q ...

  5. MySQL存储过程的创建及调用

    阅读目录:MySQL存储过程_创建-调用-参数 存储过程:SQL中的“脚本” 1.创建存储过程 2.调用存储过程 3.存储过程体 4.语句块标签 存储过程的参数 1.in:向过程里传参 2.out:过 ...

  6. Python爬虫学习笔记-2.Requests库

    Requests是Python的一个优雅而简单的HTTP库,它比Pyhton内置的urllib库,更加强大. 0X01 基本使用 安装 Requests,只要在你的终端中运行这个简单命令即可: pip ...

  7. Failed to resolve

    一: 把//classpath 'com.android.tools.build:gradle:2.2.2'改成classpath 'com.android.tools.build:gradle:3. ...

  8. 客户端远程连接linux下mysql数据库授权

    mysql默认状态是只支持localhost连接,这样远程服务器都输入IP地址去连接你的服务器是不可以的,下面我来介绍怎么让mysql允许远程连接配置方法,有需要的朋友可参考.   方法一,直接利用p ...

  9. 解决3 字节的 UTF-8 序列的字节 3 无效

    maven项目编译正常,运行时候报以下错误: 3 字节的 UTF-8 序列的字节 3 无效 仔细看这个错误的详细信息,会发现是某个xml文件中字符识别的问题,解决办法如下: 在pom.xml中添加以下 ...

  10. RunLoop 总结及应用

      什么是RunLoop 注释:和ppt上总结的一样 和代码一块去理解 从字面上看 运行循环 跑圈 循环 基本作用 保持程序的持续运行(比如主运行循环) 处理App中的各种事件(比如触摸事件.定时器事 ...