React基础(未完结)

在这个网址中，有对react学习资料的汇总。

观看ReactJS中文基础视频教程中关于react的教程，做了如下笔记。

React是由工作在Facebook的优秀程序员开发出来的用于开发用户交互界面的JS库，React带来了很多新的东西如组件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快，让我们从频繁操作DOM的繁重工作之中解脱。了解React的人都知道，它做的工作更多偏重于MVC中的V层，结合其它如Flux等一起，你可以非常容易构建强大的应用。

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

1. 初识ReactJS
react是一个用于创建可复用，可聚合web组件的js库。
React用来创建显示组件，创建好后会按照设计显示，当组件上面的数据发生改变会使用一种有效的方法来自动更新这些数据。
React框架中使用了ES6的一些用法，这时就需要一些工具去让浏览器支持ES6的一些功能，如Bable，japm，webpack。

为什么要用react：

• 组件化，而不是写一大堆HTML
  JS逻辑与HTML标签紧密相连并且极易理解

angularJS组件示例和reactJS组件示例对比：

//angular
app.directive('messageBox',function(){
    return{
        restrict:'E',
        template:'<div>\
                  <h1 ng-click="alert()">你好世界！</h1>\
                  <p>每次都是hello world，你丫烦不烦</p>\
                  </div>',
        link:function($scope){
            $scope.alert=function(){
                alert('没事干嘛点我？');
            }
        }
    }
});
//react
var MessageBox=React.createClass({
    alert:function(){
        alert('没事点我干嘛？');
    },
    render:function(){
        return(
                <div>
                    <h1 onClick={this.alert()}">你好世界！</h1>
                    <p>每次都是hello world，你丫烦不烦</p>
                </div>
        );
    }
});

• 单向数据流
  数据一旦更新，就直接重新渲染整个app

一般情况下，管理UI的状态并不简单，主要：
->修改DOM树
->修改数据
->接收用户的输入
->异步API数据请求

react和传统的服务器端渲染相似
传统方式：
->浏览器请求页面
->服务器请求数据库将数据传给模板
->模板渲染页面
react的渲染方式：
->用户输入
->从API获取数据
->将数据传给顶层组件
->react将每个组件渲染出来

react的这种方法不再有：
->魔法般的双向数据绑定
->数据模型的肮脏检查（dirty checking）
->确切的DOM操作

这样做的好处有什么：
->每个组件是干啥的，很直观
->结果更可以预测
->组件之间的关系更清晰

一个react组件可以理解成一个独立的函数，它可以接受参数（props），可复用，可以传递，返回结果（渲染组件）

• 虚拟DOM树

在每次更新时：react重建DOM树，然后找到与上个版本的DOM的差异，然后计算出罪行的DOM并更新操作，最后从操作队列中批量地执行DOM跟新操作。

它可以在node.js中运行（服务器端）
->服务器与客户端公用逻辑（lsomorphic javascript）
->SEO友好，便于生成缓存的单页应用
->直接渲染特定页面而不用渲染整个app

什么是JSX？
其实就是JavaScript的XML语法扩展。它采用你所熟悉&易理解的语法来定义DOM树。
http://www.runoob.com/react/react-jsx.html在这个网址中简单介绍了JSX。

示例：

var HelloWold=React.createClass({
    render:function(){
         return <p>Hello {this.props.name}</p>;
     } 
});
React.render(
      <HelloWorld name="John"/>,
      document.getElementById("app")
);