字数

1422 字

阅读时间

6 分钟

proxy运用

immerjs和vue3

Immer.js 是一个简化不可变状态管理的 JavaScript 库，它通过**代理（Proxy）**的机制，帮助开发者轻松地以“可变”的方式编写不可变的代码。其核心思想是允许你“修改”状态对象的草稿（draft），而 Immer 会确保原始状态不会被改变，并且会生成一个新的不可变状态。下面是 Immer.js 的底层原理的几个关键点：

1. 代理（Proxy）机制

Immer.js 使用 JavaScript 的 Proxy 对象来实现状态的跟踪。Proxy 可以拦截对对象的操作，如读取、写入、删除等。通过这种方式，Immer 能够捕捉到对状态的所有更改，并记录这些操作。

• 当你“修改”一个状态对象时，实际的操作发生在这个对象的代理草稿上，代理会拦截每个属性的读写操作，并记录所有的写操作。
• Proxy 是 ECMAScript 6（ES6）引入的特性，它允许在访问对象时执行自定义的逻辑，如捕获属性读取（get）、写入（set）、删除（deleteProperty）等。

2. 记录状态变更

Immer.js 的代理草稿对象在拦截状态变更时，会记录这些变更，但不会立即对原始状态进行修改。这个过程允许你在不改变原始对象的前提下，通过草稿进行“可变”操作。

这种代理机制会跟踪：

• 读取哪些属性；
• 修改了哪些属性；
• 添加或删除了哪些属性。

React是怎么运行的

可以从主要概念讲

1. JSX 语法

React 使用 JSX 来编写组件。JSX 是 JavaScript 的语法扩展，允许你在 JavaScript 中编写类似 HTML 的代码。React 在底层会将 JSX 转换为 React.createElement() 调用，并最终生成 JavaScript 对象。

2. 虚拟 DOM（Virtual DOM）

React 通过虚拟 DOM 提高性能。虚拟 DOM 是 React 在内存中对真实 DOM 的抽象表示。当组件的状态或 props 发生变化时，React 先更 3. React Fiber

React 的新渲染引擎 Fiber 允许它将渲染工作分成多个小任务，以便在处理复杂 UI 时不会阻塞浏览器的主线程。React Fiber 提供了更好的可控渲染，支持中断任务并在需要时恢复渲染。

4. 事件处理

React 使用合成事件系统（Synthetic Events）来处理事件。这是一个跨浏览器的事件系统，确保所有事件在不同浏览器中的行为一致。合成事件是对原生 DOM 事件的包装，同时减少了跨浏览器兼容性问题。

也可以从react库和reactdom库分别的功能来讲

1. react 库的功能

react 库是 React 的核心库，专注于定义组件、管理状态、处理 JSX 等。它包含了构建用户界面所需的核心功能。

• 组件的创建与管理：react 库提供了 React 组件的核心定义。无论是函数组件（Functional Component）还是类组件（Class Component），都是通过 react 库来定义的。-

• JSX 转换：react 库处理 JSX 语法，它将 JSX 转换为 JavaScript 的 React.createElement() 函数调用，最终生成虚拟 DOM 对象。

  JSX 的代码：

  jsx

  复制代码

  const element = <h1>Hello, world!</h1>;

  会被转换为：

  javascript

  复制代码

  const element = React.createElement('h1', null, 'Hello, world!');

• 虚拟 DOM 操作：react 库负责创建和管理虚拟 DOM。当组件渲染时，它生成虚拟 DOM 树，但不会直接操作真实的 DOM。它仅仅维护虚拟 DOM 树的结构。

react-dom 库的功能

react-dom 库是专门用于在浏览器环境下渲染 React 组件和处理 DOM 相关的任务的库，它主要负责将 React 组件挂载到浏览器的真实 DOM 上。

• 组件的渲染（挂载）：react-dom 提供了一个关键的 API——ReactDOM.render()，用于将 React 组件渲染为真实的 DOM 并插入到浏览器的某个节点中。

  jsx

  复制代码

  import React from 'react'; import ReactDOM from 'react-dom'; const element = <h1>Hello, world!</h1>; ReactDOM.render(element, document.getElementById('root'));

  在这个例子中，ReactDOM.render() 将 element 渲染到页面中 ID 为 root 的 DOM 节点上。它负责将虚拟 DOM 转化为实际的浏览器 DOM。

• 处理 DOM 交互：react-dom 库不仅仅负责初次挂载组件，还处理 React 组件的更新逻辑。当组件的状态或属性发生变化时，react-dom 通过对比虚拟 DOM 和真实 DOM，最小化地更新浏览器的真实 DOM，避免性能开销。

• ReactDOM.createPortal()：这是 react-dom 提供的一个特殊功能，它允许你将组件渲染到 DOM 树的不同位置，而不是默认的父组件 DOM 结构中。这在实现模态框、对话框等场景时非常有用。

合成事件

是事件委托(利用事件冒泡机制), 将所有事件监听绑定到同一个react根组件中,减少性能 在 React 17 及更高版本中，React 进一步优化了事件委托机制。在之前的版本中，React 将事件监听器绑定在 document 上，而在 React 17 中，事件监听器绑定到了 React 应用的根节点。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名