React 内容前置知识

React是什么？(谈谈对React的理解)

1. React是一个网页UI框架，通过组件化的方式解决视图层开发复用的问题，本质是一个组件化框架。
2. 核心思路：声明式，组件化，通用性
3. 声明式的优势在于直观与组合
4. 组件化的优势在于视图的拆分与模块复用，可以更容易做到高内聚低耦合
5. 通用性在于一次学习，随处编写：React Native，React 360等，主要靠VDom来保证实现
6. 使用React的使用范围更广，如Web，Native，VR，Shell应用
7. 劣势：技术选型和学习使用有比较高的成本，在开发大型前端应用时，需要向社区寻找并整合解决方案。

PS：React优化的看法，VDom的看法，React相关的工程架构与设计模式，主导过的React项目

什么是JSX?

JSX是一种javaScript的语法扩展，React使用JSX来描述用户的UI界面，语法上JSX像HTML，但是它是JS，在React执行之前，babel会将JSX编译为React API.

<div className='container'>
  <h1>Hello React</h1>
  <p>React</p>
</div>

上述JSX代码，最终会被编译成React.createElement的函数调用

React.createElement(
  'div',
  {
    className: 'container',
  },
  React.createElement('h1', null, 'Hello React')
  React.createElement('p', null, 'React')
)

React.createElement接受的参数：标签名，标签属性：如class类，style等，子元素（可能还是一个是VDom：递归调用React.createElement）

React中的VDom

React中是创建了一个createElement函数方法来创建每一个VDom对象。
React中的所有JSX语法内容，最后都会被babel编译成React.createElement函数调用，返回一个VDom对象。

/*
 * type 元素的类型 div
 * props 元素的属性 class等
 * 元素中的子节点
 * @return 描述一个标签的对象  vdom
 */
function createElement(type, props, ...children) {

}