【前端知识】React 基础巩固(十四)——JSX 的转换过程和声明式编程

React 基础巩固(十四)——JSX 的转换过程和声明式编程

JSX 的本质

• jsx 仅仅只是 React.createElement(component, props, …children)函数的语法糖
  • 所有的 jsx 最终都会被转换成 React.createElement 的函数调用
• createElement 需要传递三个参数：
  • type
    • 当前 ReactElement 的类型
    • 如果是标签元素，那么就使用字符串表示 “div”
    • 如果是组件元素，那么就直接使用组件的名称
  • config
    • 所有 jsx 中的属性都在 config 中以对象的属性和值的形式存储
    • 比如传入 className 作为元素的 class
  • children
    • 存放在标签中的内容，以 children 数组的方式进行存储
• 默认 jsx 是通过 babel 进行语法转换的，所以需要依赖 babel
• 快速查看转换过程

虚拟 dom 到真实 dom 过程

• 通过 React.createElement 最终创建出一个 ReactElement 对象

• 这个 ReactElement 对象的作用是什么？为什么要创建它？

  • 原因是 React 利用 ReactElement 对象组成了一个 JavaScript 的对象树
  • JavaScript 的对象树就是虚拟 DOM

• 如何查看 ReactElement 的树结构？

  • 将之前的 jsx 返回结果进行打印

声明式编程

• 虚拟 dom 帮助我们从命令式编程转到声明式编程的模式
• 官方说法：Virtual DOM 是一种编程理念，在这个理念中，UI 以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的 JavaScript 对象。我们可以通过 ReactDOM。render 让虚拟 DOM 和真实 DOM 同步起来，这个过程叫做协调（Reconciliation）
• 这种编程方式赋予了 React 声明式的 API
  • 只需要告诉 React 希望让 UI 是什么状态
  • React 来确保 DOM 和这些状态是匹配的
  • 不需要直接进行 DOM 操作，可以从手动更改 DOM、属性操作、事件处理中解放出来