React01

React用于构建用户界面的JavaScript库，是一个将数据渲染为HTML视图的开源JavaScript库，就是拿到数据进行视图的一个渲染。
React由Facebook开发的开源项目。
在我们使用原生的DOM-API和JQuery来操作元素的时候，每一次操作都可能会引起页面的重绘绘制重排，效率极低。


在我们原生的JavaScript和JQuery中，都是直接对DOM进行真正意义上的操作，但是React和Vue提出来了一个虚拟DOM的概念，即使用虚拟DOM和Diffing算法，可以减少和真实DOM的操作。
虚拟DOM：不是页面上真实的DOM节点，是专门用来给react使用的，没有放在页面上，而是在代码运行的时候，放在电脑的内存里。

进行虚拟DOMDL比较：如果新生成的虚拟DOM和原来的虚拟DOM一样，那么我就不再生成真实的DOM了，直接拿之前的一样的真实DOM进行使用。

这个虚拟DOM就是react和Vue高效的原因。
第一段react代码

虚拟DOM的两种创建方式
JSX创建虚拟DOM就是用JS创建虚拟DOM的一个语法糖，让我们在书写起来更简单了。

虚拟DOM和真实DOM
关于虚拟DOM：

• 本质是Object类型的对象（一般对象）；
• 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性；
• 虚拟DOM最终会被React转换为真实DOM，呈现在页面上。
  JSX语法规则
• 定义虚拟DOM时，不要用引号，而是要使用（）；
• 标签中混入JS表达式时要用{}；
• 样式的类名指定不要用class，要用className；
• 内联样式要用style={{key:value}}的形式去写；
• 虚拟DOM必须只有一个根标签；
• 标签必须闭合；
• 标签首字母：
  （1）如果以小写字母开头，则将该标签转换为HTML中同名元素，若HTML中无该标签对应的同名元素，则报错。
  （2）如果以大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错。
  组件与模块
  函数式组件
  
  在Demo函数中的this是undefined，因为babel编译后开启了严格模式。
  类式组件：
  
  state状态
  
  组件的状态里存放着数据，数据的改变驱动页面的展示。
  严重注意：状态（state）不可直接更改，要借助一个内置的API去更改。
  状态必须通过setState进行更改更新，且更新是一种合并，不是替换。
  
  props属性
  props的基本使用：
  
  
  
  补充：展开运算符不能展开对象。
  props是只读的。
  refs属性
  字符串形式的ref：
  
  回调函数形式的ref：
  
  React中的事件处理
  通过onXxx属性指定事件处理函数，注意大小写。
  React使用的是自定义（合成）事件，而不是使用的原生DOM事件–为了更好的兼容性。
  React中的事件是通过事件委托方式处理的（委托给组件最外层元素）。
  通过event.target得到发生事件的DOM元素对象。
  发生事件的元素就是要触发的元素，就可以省略不写ref：（不要过度的使用ref）
  
  高阶函数–函数柯里化
  高阶函数：如果一个函数符合下面2个规范中的任何一个，不用同时满足，那么该函数就是高阶函数。
• 如果A函数，接收的参数是一个函数，那么A就可以称为高阶函数。
• 如果A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。
  常见的高阶函数：Promise、定时器、数组的一些常用方法。
  函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。