React学习笔记（一）React与Vue比较、初识JSX

React与Vue比较

React 相对于 Vue 灵活性和协作要更好，适合大型团队开发，Vue插件和框架都非常丰富，实现起来更快速易用。

React和Vue都使用虚拟DOM、组件等，React使用JSX，不如Vue代码好理解。

虚拟DOM，简单来说就是根据数据动态生成实体DOM，无论是Vue还是React都有很优秀的Diff算法，能够保证当数据更改后，尽可能少的重排重绘DOM。

JSX相关

JavaScript XML简称为JSX，它不能直接被浏览器读取，需要通过babel转换（babel的作用：1) ES6转ES5；2) JSX转JS）。

为什么要使用JSX

如果不使用JSX，虚拟DOM需要使用React手动创建，比如创建一个div标签需要这样写：

const myh1 = React.createElement('h1', {title: '1',id:'myh1'}, '这是一个dada的h1')
// 在父元素的虚拟dom中 传入子节点
const mydiv = React.createElement('div', {title: '2',id:'mydiv'}, '包裹myh1的div', myh1)

如果div中存在多个嵌套的话，这样的写法显然非常不友好。以上代码对应的JSX写法可读性就好了很多：

const VDOM = (
  <div title="2" id="mydiv">
    包裹myh1的div
    <h1 title="1" id="myh1">这是一个dada的h1</h1>
  </div>
);

JSX语法规则：

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要使用{}
3. 样式的类名指定不要使用class，要使用className
4. 内联样式要用style={{key:value,key1:value1}}的形式写，类似font-size这样的样式，需要使用小驼峰命名 fontSize
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
   1). 若小写字母开头，则将标签转换为html中同名元素，若html中无该标签对应的同名元素，则报错。
   2). 若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。
8. 注释方法 {/*内容*/}

一定要注意区分：【js语句（代码）】与【js表达式】

1. 表达式：一个表达式会产生一个值，可以放到任何一个需要值的地方，下面这些都是表达式：
   1）a
   2）a+b
   3）demo()
   4）arr.map()
   5）function test(){}
2. 语句（代码），下面这些都是语句（代码）：
   1）if(){}
   2）for(){}
   3）switch(){case:xxx}

事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写）
   1）React使用的是自定义（合成）事件，而不是使用的原生DOM事件，为了更好的兼容性
   2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素），为了高效
2. 通过event.target得到发生事件的DOM元素对象。不要过度使用ref。