ReactOne—Origin,Installation,jsx

ReactOrigin官网：https://doc.react-china.org/d...Facebook出品，因为对市面上所有的JavaScriptMVC框架都不满意，所以我决定自己写一套来建立Instagram网站。做了之后发现这套东西很好用，然后2013年就出来了，2014年引入国内。因为React的设计思路极其独特，是一次革命性的创新，具有突出的性能，但是代码逻辑很简单。与此同时，github也受到了很多关注，国内各大公司都会投入专门的人力物力进行研究和使用。基于HTML的前端界面开发起点越来越复杂，其本质问题基本上可以归结为：如何高效地将来自服务器或用户输入的动态数据反映到复杂的用户界面中。Facebook的React框架就是完全面向这个问题的解决方案。根据官网描述，其出发点是：开发随时间变化的数据的大型应用程序（Buildinglargeapplicationswithdatathatchangedovertime）。相对于传统的前端开发，React开辟了一条相当另类的途径来实现前端接口的高性能、高效率开发。安装脚手架cnpmicreate-react-app-gb.创建项目create-react-appreact-appc。安装后src中只剩下index.js入口文件react和react-domreact:React代码构建react-dom:将react代码渲染到页面//渲染主键挂载点ReactDom.render(

,document.getElementById('root'))d.index.jsimportReactfrom'react'importReactDomfrom'react-dom'React概念React并不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React也不是很认可MVC的开发模式；因为MVC耦合度高，性能不是很好好项目：数据不断变化的大型应用？为什么？优点：高性能、高效率React是一个轻量级的视图层前端JS框架无状态组件和有状态组件（高阶组件）1.无状态组件：如consttest=function(){//情况1return//显示js逻辑letx='test'return//显示js逻辑2letx='test'return()}ReactDom.render(test(),document.getElementById('root'))可以看到stateless组件没有定义类React.createClass或者classNameextendsReact.Component直接创建自己的功能组件简称render函数，省去了实例化组件类的过程。无法实现组件的生命周期方法。它不支持“ref”，因为在React调用无状态组件的方法之前没有实例化过程。所以，也就没有所谓的“ref”2.Statefulcomponents（高阶组件）我们平时写的组件都可以叫做statefulcomponentsReact的特点和优势JSX语法糖叫做javascriptxml，帮助React构建虚拟dom结构，如果不使用JSX，则需要使用React.createElement(tagName,options:(id,className),contents..)例如：varchild1=React.createElement('li',null,'FirstText内容');varchild2=React.createElement('li',null,'第二个文本内容');varroot=React.createElement('ul',{className:'my-list'},child1,child2);使用jsx语法会让react的开发更简单，xml参考了一些XML语法，标签必须封闭，最外层必须用节点包裹。常用语法：1.定义属性和元素varnode=({person?欢迎回来，{person.firstName}{person.lastName}！:请登录}