React
React官网
- 英文官网: https://reactjs.org/
- 中文官网: react.docschina.org/
React高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
相关JS库
- react.js React核心库
- react-dom.js 提供操作DOM的react扩展库
- babel.min.js 解析JSX语法代码转为JS代码的库
JSX（JavaScript XML）
它是由Javascript + XML所组成的
渲染虚拟DOM
语法
ReactDOM.render(virtualDOM,containerDOM)
作用将虚拟DOM通过babel转换为真实DOM渲染在页面（视图）上
它会将传入的第一个参数——虚拟DOM树（virtualDOM），通过React内部的算法转换并更新到第二个参数指定的实际DOM元素（containerDOM）中，从而反映在页面视图上。这个过程包括创建或更新真实DOM节点以匹配新的虚拟DOM状态，并且React使用高效的差异算法来最小化对DOM的操作。
组件
组件需要满足
- 组件必须以大写字母开头；
- 组件必须有闭合标签；
- 组件只有一个根标签；
渲染组件的基本流程
React会在内部创建实例对象 调用render()得到虚拟DOM，并解析为真实DOM 插入到指定的页面元素内部
首先我们如果用class类来定义组件的话，比如说创建了一个 myComponent的一个组件 它需要继承自React.component,这个React.component内部有很多的方法和属性，例如ref，prop，context等，我们如果想定义自身的方法或者属性，需要在myComponent创建一个构造器来进行定义，然后通过render()来进行渲染成虚拟DOM，并解析成真实DOM,渲染到视图上，此时的属性属于响应式的了
组件三大核心属性
1.state
- state是组件对象中最重要的属性，值是对象（可以包含多个key-value的组合）
- 通过更新组件的state来更新对应的页面显示（重新渲染组件）
- 组件render方法中this指向组件实例对象
- 组件中的自定义方法this为undefined，如何解决
- 强制绑定this，使用对象中的bind( )
- 剪头函数
- 状态数据，不能直接修改或更新
