ReactJS介绍
简介
ReactJS是为了解决构建随着时间数据不断变化的大规模应用程序而设计的用来构建用户界面的JavaScript库，是MVC中的V（视图）
React设计思想
React设计思想很独特，属于革命性创新，性能独特，代码逻辑却非常简单。很有可能会成为将来Web开发的主流工具。这个项目本身也越来越大，从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。其衍生出来的React Native项目，希望用Web APP的方式去native app，从而实现同一组人只需写一次UI，就能同时运行在服务器，浏览器和手机。随着在2015年发布了Android版本，把web和原声平台的js开发技术扩展到了Android平台，以后很有可能出现同一组人只需要写一次UI，就能运行在三端（service，mobile，browser）
React两个主要思想：简单，表达能力
简单
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新
表达能力
当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。
注意事项：
@H_502_35@React特性与原理
特性
@H_502_35@原理
旧模式问题
Web开发中总需要将变化的数据实时反映到UI上，就需要对DOM进行操作。旧模式下频繁or复杂的DOM操作通常是性能瓶颈产生的原因===>>如何高性能地进行复杂DOM操作也成为衡量一个Web前端开发人员的重要指标。，React则是直接改造了，在浏览器端用JavaScript实现了一套DOM AP，引入了一套虚拟DOM的机制。
虚拟DOM（react 精髓）
虚拟DOM的精髓所在有两点：性能和抽象
@H_502_35@所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新;
React**能够批处理虚拟DOM的刷新**，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
@H_502_35@
@H_502_35@JS业务逻辑代码完全可以借助Node移植到任意平台上 虚拟DOM在不同平台上的抽象有不同实现，不能完全移植，但是用法基本一致 最底层的UI调用我们就不用关心了 以上这些也是React Native的实现，这是一次学习，到处编写的体验
JSX语法
JSX 语法就是：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，它允许 HTML 与 JavaScript 的混写
注意：在使用webstorm的时候，js要做下修改才不会报错，setting里的language 里的js要选成 JSX Harmony
语法规则
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析，允许在模板中插入变量：
ReactDOM.render(
<h1>Hello,world!</h1>,document.getElementById('example') );
ReactJS组件
React 都是关于构建可复用的组件。事实上，通过 React 唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离，更加简单。====》》》这也就引出了组件化开发
基本组件例子
React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>demo4</title>
<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> //组件类的第一个字母需要大写，否则会报错 var HelloMessage = React.createClass({ //所有组件必须有自己的render方法，用于输入组件 render : function(){ return <div><h1>I am {this.props.name}</h1><h2>My age is:{this.props.age}</h2></div>; } }); ReactDOM.render( <HelloMessage name="sqliang" age="23"/>,document.getElementById('example') ); </script>
</body>
</html>
组件化
React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。MVC让我们实现了表现，数据，控制的分离，开发中从技术的角度对UI进行了拆分；React启发开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装
