React横向技术整理_react tree横向-CSDN博客

本文链接：https://blog.csdn.net/qq_29334605/article/details/123040205

React 扩展

DOM、虚拟DOM

DOM （Document Object Model，文档对象模型）定义了访问和操作文档的标准方法。根据 W3C DOM 规范,DOM是一种与浏览器、平台、语言无关的接口，使得你可以访问页面其他的标准组件。

XML、HTML

XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。

DOM树

DOM树的表示

根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。例如，document.body 是表示 <body> 标签。

自动修正

如果浏览器遇到格式不正确的 HTML，它会在形成 DOM 时自动更正它。
例如，顶级标签总是 <html>。即使它不存在于文档中 — 它也会出现在 DOM 中，因为浏览器会创建它。对于 <body> 也是一样。
例如，如果一个 HTML 文件中只有一个单词 “Hello”，浏览器则会把它包装到 <html> 和 <body> 中，并且会添加所需的 <head>，DOM 将会变成下面这样

节点类型

一共有 12 种节点类型。实际上，我们通常用到的是其中的 4 种：
document — DOM 的“入口点”。
元素节点 — HTML 标签，树构建块。
文本节点 — 包含文本。
注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它

虚拟dom

virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。J
有以下好处。

可以维护视图和状态之间的关系
复杂视图情况下提升渲染性能
虚拟DOM除了可以渲染成DOM节点，还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用（weex/rn）、小程序等，增加了跨平台能力

jsx

JSX表示JavaScript XML，通过Babel转化为普通js代码。
react17后出现了新的jsx，不需要引入react也可以使用。
老的缺点是

要写jsx必须随时引入react
React.createElement无法做一些优化

例如，老的jsx转化是

import React from 'react';
React.createElement('h1', null, 'Hello world');

// 由编译器引入（禁止自己引入！）
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

虚拟DOM库

snabbdom

snabbdom是一个简单而强大的虚拟DOM库，Vue使用了它。

virtual-dom

一个基于js的 DOM模型，支持元素创建、差异计算和补丁操作，以实现高效的重新渲染

抽象语法书AST

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

用途

编辑器的错误提示、代码格式化、代码高亮、代码自动补全；
elint、pretiier 对代码错误或风格的检查；
webpack 通过 babel 转译 javascript 语法。
学会之后，可以写babel插件。

js的AST标准

estree - EcmaScript AST的标准;
shift - designed with transformation in mind, not compatible with estree;
babel - supports language features which is have not yet become a standard, but have a proposal.

JavaScript parsers:

esprima 第一代
acorn 用的多、快、稳定
espree based on acorn, used in eslint;
@babel/parser based on acorn, supports all new language features
shfit-ast parser produces Shift AST
typescript can parse JavaScript and TypeScript, producing it’s own AST format for this