记录自己学习React学习
定义：react 用于构建用户界面的 JavaScript库 只提供了 UI层面的解决方案
开发：由Facebook开发且开源
优点
- 采用组件化模块，声明式编码，提高开发效率及组件复用率
- 在react native中可以使用react语法进行移动端开发
- 使用虚拟dom+优秀的diffing算法，尽量减少与真实dom的交互
在学习途中我发现 react 也有diff 算法 而且vue中也使用，两者之间的区别，我简单总结了下
react和vue的diff算法的区别
相同点：
- 都是两组虚拟dom的对比
- 只对同级节点进行对比，简化了算法复杂度
- 都用key作为唯一标识，进行查找，只有key和标签类型相同才会复用老节点
- 遍历前都会根据老的节点构建一个map，方便根据key快速查找
不同点
- React 在diff遍历的时候，只对需要修改的节点进行了记录，形成了effect list最后才根据effect list 进行真实dom的修改，修改时先删除，然后进行更新和移动，最后插入
- Vue 在遍历的时候就用真实dom方法，修改了真实dom，最后做的删除操作
- React 采用单指针从左先右进行遍历
- vue采用双指针，从两头向中间进行遍历
- react的虚拟diff比较简单，vue中做了一些优化处理，相对复杂，但效率更高
关于虚拟dom：
- 本质是object类型的对象(一般对象)
- 虚拟dom比较轻，真实dom比较重，虚拟dom是react内部在用，无需真实dom上那么多属性
- 虚拟dom最终会被react转化为真实dom，呈现在页面上
关于jsx的语法规则
全称：javaScript xml
React 定义的一种类似于xml的js扩展语法
本质是react创建元素的语法糖
开始第一次 react的体验 ！
使用 html 时必须引入 react 的相关包 如果不想用可以去官网使用脚手架下载
JS表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}
JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值
*/
//1.定义虚拟DOM，不能使用“”
//2.标签中混入JS表达式的时候使用{}
//3.样式的类名指定不要使用class，使用className
//4.内敛样式要使用style={{样式:"值"}}
//5.不能有多个根标签，只能有一个跟标签
//6.标签必须闭合
//7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
// 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
