好的程序员web学习路线，初步了解react框架，react的起源与发展。最开始facebook在做instagram（图片分享）的时候，因为涉及到一个东西，叫做数据流。为了处理数据流，同时也考虑性能问题，facebook开始研究市面上各种前端MVC框架，但是都不喜欢，所以facebook觉得还是自己开发最好自己一个，于是他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，自己开发了一个。果然，大牛的创造力还是很强的。React的出发点是基于HTML的前端界面开发变得越来越复杂，其本质问题基本上可以归结为如何高效地将来自服务器或用户输入的动态数据反映到复杂的用户界面中。Facebook的React框架就是完全面向这个问题的解决方案。根据官网描述，其出发点是：开发随时间变化的数据的大型应用程序（Buildinglargeapplicationswithdatathatchangedovertime）。相对于传统的前端开发，React开辟了一条相当另类的途径来实现前端接口的高性能、高效率开发。React与传统MVC的关系React并不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React也不是很认可MVC开发模型；React高性能的体现：虚拟DOMReact的高性能原理：在Web开发中，我们总是需要将变化的数据实时反映到UI上，然后才需要对DOM进行操作。复杂或频繁的DOM操作通常是性能瓶颈的原因（如何高性能地执行复杂的DOM操作通常是衡量前端开发人员技能的重要指标）。React为此引入了虚拟DOM（VirtualDOM）机制：在浏览器端用Javascript实现了一套DOMAPI。基于React开发时，所有的DOM构建都是通过虚拟DOM进行的。每当数据发生变化时，React都会重建整棵DOM树，然后React将当前整棵DOM树与之前的DOM树进行比较，得到DOM结构。区别，然后只有需要改变的部分才会在浏览器DOM中真正更新。而且，React可以批量刷新虚拟DOM，在一个事件循环（EventLoop）中将两次数据变化合并。比如你不断的从A-B，B-A改变节点内容，React会认为A变成了B，然后UI从B变成A就没有变化了，而如果是手动控制的话，这个逻辑通常是极其复杂的.虽然每次都需要构建一个完整的虚拟DOM树，但是由于虚拟DOM是内存数据，性能极高，只对实际DOM进行Diff点操作，就可以达到提升性能的目的。这样一来，在保证性能的同时，开发者不再需要关注某个数据变化如何更新到一个或多个特定的DOM元素，而只需要关心整个界面在任何数据状态下是如何呈现的。数据驱动，声明式React特性和优势VirtualDOM以前我们操作dom的方式是通过document.getElementById()。这个过程其实是先读取html的dom结构，将结构转化为变量，然后去操作，reactjs以变量的形式定义了一套dom模型。所有的操作和转换都直接在变量中进行，减少了对真实dom的操作，性能相当高。它与主流的MVC框架有本质区别，不与dom打交道。组件系统react的核心思想是将页面中的任何区域或元素都视为一个组件组件。那么什么是组件呢？组件是指同时包含html、css、js、image元素的聚合体。用react开发的核心是把页面拆分成几个组件，react的一个组件同时耦合css、js、image。这种模式整体颠覆了过去传统的单向数据流。其实reactjs的核心内容就是数据绑定。所谓数据绑定，就是只要将服务器端的一些数据绑定到前端页面，开发者只需要专注于实现业务即可。JSX语法在Vue中，我们使用render函数来构建组件的DOM结构，性能更高，因为省去了查找和编译模板的过程，但是使用createElement创建时代码可读性较差，也比较复杂structureinrender这时候可以使用jsx语法在render中创建dom来解决这个问题，但是前提是你需要使用编译jsx的工具JSX语法糖JSX是一种语法，全称：javascriptxmlJSXsyntaxisnot强制性的，但是因为使用了JSX语法会降低我们开发的难度，所以这种语法被称为句法糖。不使用JSX时，需要使用React.createElement来创建组件的dom结构，但是这种写法不需要编译，但是维护和开发难度很高，可读性很差varworld=React.createElement('h1',{className:'abc',id:'haha'},[React.createElement('span',null,'Hello'),React.createElement('mark',null,'React')])//使用ReactDOM对象的render方法将组件渲染成一个节点ReactDOM.render(world,document.getElementById("app1"))`及时使用JSX语法后，还需要编译成原生的createElement。JSX是js中使用的xml。不过这里的xml并不是真正的xml，只能参考一些xml语法的介绍，例如：最外层必须有根节点，标签必须关闭
