jsx
是JavaScript的一种语法扩展，jsx最终会被babel编译为React.createElement()，创建出虚拟dom
特点：
- 花括号{}中可以放任何有效的表达式
- 属性中使用变量，花括号外不能包引号
- 因为jsx接近js，所以属性定义采用驼峰命名
- 可以单标签自闭合也可以双标签，必须闭合
const vm = <h1 className="title">Hello React</h1>
// 等同于
// const vm = React.createElement('h1', {className: 'title'}, 'Hello React')
// 1. ReactDOM.render()：用于将虚拟DOM渲染到浏览器的真实DOM上
ReactDOM.render(vm, document.getElementById('root'))
// 2. ReactDOM.findDOMNode()：获取真实DOM，组件挂载之后使用，componentDidMount和componentDidUpdate方法中获取
// 3. ReactDOM.unmountCompoentAtNode()：用于执行卸载操作，在componentWillMount之前
// 4. ReactDOM.creatPortal(child, container)：将子结点挂载到指定Dom中，并不直接渲染DOM元素，不同于render
虚拟dom与真实dom的区别
- 虚拟dom属性少，真实dom属性多（虚拟dom是React内部用，无需真实dom那么多属性）
- 虚拟dom最终会被react转为真实的dom呈现在页面上
- 二者本质上都是object对象
虚拟dom的属性
- sel:选择器
- data:绑定的数据(attribute/props/eventlistner/class/dataset/hook)
- children:子节点数组
- text:当前text节点内容
- elm: 对真实dom element的引用
- key:用于优化DOM操作