preact原理解析

一. preact介绍

preact是前端框架,开发体验与React相似,使用JSX语法,提供与React相同的API。本文主要解析preactreact的渲染流程差和preactsignals机制。

preact使用示例

javascript 复制代码
import { render } from 'preact'
import { useState } from 'preact/hooks'

function App() {
  const [counter, setCounter] = useState(0)
  
  return (
    <div>
      <h1 onClick={() => setCounter(counter + 1)}>{counter}</h1>
    </div>
  )
}

render(<App />, document.querySelector('#app'))

二. preact渲染流程

preact渲染流程中使用了虚拟DOM树,虚拟DOM树的节点会维护对应真实DOM节点。

在首次渲染中,会采用深度优先遍历算法递归创建虚拟DOM节点,且同时创建其对应的真实DOM节点,然后会将真实DOM节点插入到父DOM节点中,当整个虚拟DOM树构建完成后,会将创建好真实DOM树插入到页面指定节点上完成首次渲染流程。

当状态更新时,会触发更新渲染,与React不同的是,preact不会重新创建新的虚拟DOM树,而是从触发状态更新的虚拟DOM节点开始进行diff,创建其对应的新的虚拟DOM节点,然后更新到当前虚拟DOM树中,也就是preact的更新颗粒度相比React会更细,可以做到局部更新。需要注意的是更新时机和React一样都是异步的。

三. preact signals

preact中如果要使用signals,如果要额外引入@preact/signals依赖。

preact signals使用示例如下,从示例中可以发现获取/修改状态的方式与React有比较大的差异,更贴合Vue的使用方式。

javascript 复制代码
import { render } from 'preact'
import { useSignal } from '@preact/signals'

function App() {
  const counter = useSignal(0)

  return (
    <div>
      <h1 onClick={() => counter.value++}>{counter.value}</h1>
    </div>
  )
}

render(<App />, document.querySelector('#app'))

3.1 实现useSignal

useSignalpreact提供的hook方法,底层调用signal方法创建Signal对象。

javascript 复制代码
import { signal } from '@preact/signals'
import { useMemo } from 'preact/hooks'

export function useSignal(value) {
  return useMemo(() => signal(value), [])
}

3.2 实现signals

核心逻辑是通过Object.defineProperty方法添加Signal对象value属性的getset拦截器(和Vue2的响应式更新实现理念很类似)。具体执行逻辑如下:

  • 定义Signal对象,添加value属性的getset拦截器
  • 创建Signal对象实例,记录初始值
  • 当访问Signal对象实例的value属性时,会收集当前虚拟DOM节点的触发更新渲染方法
  • 当修改Signal对象实例的value属性时,触发当前虚拟DOM节点的更新渲染方法

3.2.1 定义Signal对象

javascript 复制代码
function Signal(value) {
  // 记录value属性值
  this._value = value
  // 记录虚拟DOM节点的更新渲染方法
  this._targets = null
}

Object.defineProperty(Signal.prototype, 'value', {
  get(signal) {
    // 该方法核心逻辑是收集虚拟DOM节点的更新渲染方法
    addDependency(signal)
    return signal._value
  },
  set(signal, value) {
    if (value !== signal._value) {
      signal._value = value
      // 触发更新渲染
      signal._targets._notify()
    }
  },
})

3.2.2 定义signal方法

javascript 复制代码
function signal(value) {
  return new Signal(value)
}

四. 总结

React一样,preact渲染流程也使用了虚拟DOM树,不同点在于更新渲染时preact不会重新构建一颗完整的虚拟DOM树,而是使用了局部更新机制。

preact signals的核心实现逻辑与Vue2很类似,主要是使用到Object.defineProperty方法实现依赖收集和派发更新功能。

相关推荐
JarvanMo几秒前
Flutter 游戏开发:网上都查到了什么?
前端
前端小巷子8 分钟前
Vue 2 组件通信全景指南
前端·javascript·面试
江城开朗的豌豆9 分钟前
Vue的双向绑定已经能精确追踪变化,为什么还要用虚拟DOM?揭秘背后的性能哲学!
前端·javascript·vue.js
闲不住的李先森12 分钟前
使用 Ultracite 告别 ESLint 和 Prettier 的配置地狱
前端·代码规范
全栈技术负责人14 分钟前
前端静态资源优化
前端·性能优化·pdf
掘金安东尼41 分钟前
⏰前端周刊第424期(2025年7月21日–7月27日)
前端·javascript·面试
江城开朗的豌豆1 小时前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
芜青1 小时前
JavaScript手录09-内置对象【String对象】
开发语言·javascript·ecmascript
OpenTiny社区1 小时前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽1 小时前
最新面试题总结
前端·javascript·vue.js