认识React

与VueJs的区别

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

React生态圈

• jsx:扩展了js自身的语法，是React的基础
• Flux:React的数据流组件
• Redux:比Flux更加简单，易用
• React-Native:用react编写原生移动应用
• React-Server:服务端渲染React组件

JSX

jsx是一门独立的语言，希望能改进js的很多问题，但是ES6出现后，包含了jsx的大部分特性，所以很少独立使用

• babel可以编译jsx
• react是基于jsx语法

JSX的主要特色

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

//普通元素创建
let oDiv = document.createElement('div');
oDiv.title = 'DarkCode';
oDiv.innerHtml = "box";

//jsx方式
let oDiv = 
box
  

注意：jsx并不会真正的创建DOM元素(内部名称:Node),jsx只是解析模板语法，创建 虚拟DOM节点需经由ReactDOM渲染才会成为真正的DOM元素

关于虚拟DOM

直接操作DOM元素非常缓慢(资源开销是普通数据操作的数千倍),所以很多框架(Vue、React)都具备虚拟DOM特性，我们直接操作的是虚拟DOM,而非真实节点，React会在合适的时机批量更新DOM节点(一般是主进程空闲时)，从而提高性能

能否单独使用JSX

不能，React强依赖JSX用于解析jsx语法，但jsx强依赖于React用于解析模板语法

第一个Rect程序

• browser:babel，用于编译jsx
• react:react核心库
• react-dom:用于渲染组件

特殊属性

在react中的"html代码"，其实并不是真正的html,而是一种jsx语法，绝大部分标签一样用，但有两个属性需要注意：

• class:className
• for:htmlFor

单标签

React中单标签必须闭合(html标签和自定义组件都是)

• 错误
• 正确