JSX

JSX构建视图的基础知识

JSX
- javascript and xml(html) 把JS和HTML标签混合在了一起并不是我们之前玩的字符串拼接

vscode如何支持JSX语法格式化、快捷提示.
- 创建的is文件，我们把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法了
- webpack打包的规则中，也是会对jsx这种文件，按照JS的方式进行处理的
- 在HTML中嵌入“JS表达式”，需要基于“{} 语法”

JS表达式
- 执行必须有结果
在ReactDOM.createRoot()的时候，不能直接把HTML/BODY做为根容器，需要指定一个额外的盒子[例如: #root]
每一个构建的视图，只能有一个“根节点”
- 出现多个根节点则报错 Adjacent JSX elements must be wrapped in an enclosing tag.
- React给我们提供了一个特殊的节点(标签):ReactFragment 空文档标记标签既保证了可以只有一个根节点，又不新增一个HTML层级结构!!

基本入口&使用
//React语法核心
import React from 'react'
//构建HTML(WebApp)的核心
import ReactDOM from'react-dom/client'

//获取页面中#root的容器，作为“根”容器
const root = ReactDOM.createRoot(document.getElementById('root'))
//基于render方法渲染我们编写的视图，把染后的内容，全部插入到#root中进行渲染
root.render(
    // ....
)

JSX底层处理机制

第一步: 把我们编写的JSX语法，编译为虚拟DOM对象virtualDOM
虚拟DOM对象
框架自己内部构建的一套对象体系(对象的相关成员都是React内部规定的)，基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征!!
- 基于 babel-preset-react-app 把JSX编译为 React.CreateElement(...) 这种格式!!只要是元素节点，必然会基于createElement进行处理!
  结构
  - React.createElement(ele, props, ..children)
    ele : 元素标签名或组件
    props : 元素的属性集合(对象)如果没有设置过任何的属性，则此值是null
    children : 第三个及以后的参数，都是当前元素的子节点
- 再把 createElement 方法执行，创建出virtualDM虚拟DOM对象也有称之为:JSX元素、JSX对象、ReactChild对象..!!
  转换后的对象结构
```
virtualDOM = {
    $$typeof: Symbol(react.element),
    ref: null,
    key: null,
    type:"标签名或组件", //存储了元素的相关属性 && 子节点信息
    props:{
        // 元素的相关属性，
        // 子节点信息 没有子节点则没有这个属性、
        // 属性值可能是一个值、也可能是一个数组
        children: []
    }
}
```

第二步:把构建的virtualDOM渲染为真实DOM
真实DOM
浏览器页面中，最后染出来，让用户看见的DOM元素!
补充说明
- 第一次染页面是直接从virtualDOM->真实DOM;
- 但是后期视图更新的时候，需要经过一个DOM-DIFF的对比，计算出补丁包PATCH(两次视图差异的部分)，把PATCH补丁包进行染!!
- ReactDOM中的render方法处理
  v16
```
    ReactDOM.render(
        // <>...</>
        document.getElementById('root')
    )
```
  v18
```
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
        // <>...</>
    )
```

JSX构建视图的基础知识​

JSX底层处理机制​

JSX构建视图的基础知识

JSX底层处理机制