React 基础巩固(十四)——JSX 的转换过程和声明式编程
JSX 的本质
- jsx 仅仅只是 React.createElement(component, props, …children)函数的语法糖
- 所有的 jsx 最终都会被转换成 React.createElement 的函数调用
- createElement 需要传递三个参数：
- type
- 当前 ReactElement 的类型
- 如果是标签元素，那么就使用字符串表示 “div”
- 如果是组件元素，那么就直接使用组件的名称
- config
- 所有 jsx 中的属性都在 config 中以对象的属性和值的形式存储
- 比如传入 className 作为元素的 class
- children
- 存放在标签中的内容，以 children 数组的方式进行存储
- type
- 默认 jsx 是通过 babel 进行语法转换的，所以需要依赖 babel
- 快速查看转换过程
虚拟 dom 到真实 dom 过程
-
通过 React.createElement 最终创建出一个 ReactElement 对象
-
这个 ReactElement 对象的作用是什么？为什么要创建它？文章来源：https://www.toymoban.com/news/detail-489522.html
- 原因是 React 利用 ReactElement 对象组成了一个 JavaScript 的对象树
- JavaScript 的对象树就是虚拟 DOM
-
如何查看 ReactElement 的树结构？文章来源地址https://www.toymoban.com/news/detail-489522.html
- 将之前的 jsx 返回结果进行打印
声明式编程
- 虚拟 dom 帮助我们从命令式编程转到声明式编程的模式
- 官方说法：Virtual DOM 是一种编程理念，在这个理念中，UI 以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的 JavaScript 对象。我们可以通过 ReactDOM。render 让虚拟 DOM 和真实 DOM 同步起来，这个过程叫做协调（Reconciliation）
- 这种编程方式赋予了 React 声明式的 API
- 只需要告诉 React 希望让 UI 是什么状态
- React 来确保 DOM 和这些状态是匹配的
- 不需要直接进行 DOM 操作，可以从手动更改 DOM、属性操作、事件处理中解放出来
到了这里，关于【前端知识】React 基础巩固(十四)——JSX 的转换过程和声明式编程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
