react学习之认识react

认识react和Vue.js的区别

vue和react没有本质的区别：

• vue更注重视图的自动同步，使用习惯偏向于前端人员
• react更注重组件及其状态的管理，使用习惯偏向于程序员
  

相对于vue，React更加透明，没有更多的隐含逻辑（好比vue的指令就是一种隐含逻辑），更便于程序员理解程序的执行过程；固然，也更复杂强大

react生态圈

• JSX：扩展JS自身的语法，是React的基础
• Flux：React的数据流组件
• Redux：比Flux更加简单，易用
• React-Narive：用react编写原生移动应用（专门用来编写移动端，写出来的是原生）
• Reavt-Server：服务器端渲染React组件（1.利于seo；2.有些逻辑是须要隐藏的）

JSX

jsx是一门独立的语言，但愿能改进js的不少问题，可是ES6出现后，包含了JSX的大部分特性，因此不多独立使用

• babel能够编译JSX
• react是基于JSX的语法

JSX的主要特点

提供模板式建立元素的方法

关于虚拟DOM

直接操做DOM元素很是缓慢（资源开销是普通数据操做的数千倍），因此不少框架（Vue，React）都具有虚拟DOM特性，咱们直接操做的是虚拟DOM，而非真实节点，React会在适合的时机批量更新DOM节点（通常是主进程空闲时），从而提升性能

可否单独使用JSX？

不能，React强依赖JSX（browser）用于解析JSX语法，但JSX也强依赖React用于解析模板语法

第一个React程序

• browser.js: babel,用于编译JSX
• react.js ：react核心库
• react-dom.js：用于渲染组件

       必须先引入react.js ，而后引入react-dom.js

特殊属性

React中的"html代码"，其实不是真正的html，而是一种JSX语法，绝大部分标签同样用，但有两个属性须要修改

• class：className
• 不能拿class直接用。 class要用className代替
• for：htmlFor

单标签

React中的单标签必须闭合（html标签和自定义组件都是）

• <img src="">;错误
• <img src="" />;正确

注意⚠️JSX不能单独用，JSX渲染的时候必须有且仅有一个最顶出dom，标签必须有结束标签，单标签必须闭合'/'