[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1322":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},1322,"preact","preactjs\u002Fpreact","preactjs","⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.","https:\u002F\u002Fpreactjs.com",null,"JavaScript",38688,2036,389,61,0,3,17,90,13,44.93,"MIT License",false,"main",true,[27,28,29,5,30,31,32],"components","dom","jsx","react","vdom","virtual-dom","2026-06-12 02:00:26","> [!NOTE]\n> This is the branch for the upcoming release, for patches to v10 you need the [v10.x branch](https:\u002F\u002Fgithub.com\u002Fpreactjs\u002Fpreact\u002Ftree\u002Fv10.x)\n\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fpreactjs.com\" target=\"_blank\">\n\n![Preact](https:\u002F\u002Fraw.githubusercontent.com\u002Fpreactjs\u002Fpreact\u002F8b0bcc927995c188eca83cba30fbc83491cc0b2f\u002Flogo.svg?sanitize=true 'Preact')\n\n\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">Fast \u003Cb>4kB\u003C\u002Fb> alternative to React with the same modern API.\u003C\u002Fp>\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: ES6 Class, hooks, and Functional Components\n- Extensive React compatibility via a simple [preact\u002Fcompat] alias\n- Everything you need: JSX, \u003Cabbr title=\"Virtual DOM\">VDOM\u003C\u002Fabbr>, [DevTools], \u003Cabbr title=\"Hot Module Replacement\">HMR\u003C\u002Fabbr>, \u003Cabbr title=\"Server-Side Rendering\">SSR\u003C\u002Fabbr>.\n- Highly optimized diff algorithm and seamless hydration from Server Side Rendering\n- Supports all modern browsers\n- Transparent asynchronous rendering with a pluggable scheduler\n\n### 💁 More information at the [Preact Website ➞](https:\u002F\u002Fpreactjs.com)\n\n\u003Ctable border=\"0\">\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fpreact.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpreact)\n[![Preact Slack Community](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSlack%20Community-preact.slack.com-blue)](https:\u002F\u002Fchat.preactjs.com)\n[![OpenCollective Backers](https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbackers\u002Fbadge.svg)](#backers)\n[![OpenCollective Sponsors](https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsors\u002Fbadge.svg)](#sponsors)\n\n[![coveralls](https:\u002F\u002Fimg.shields.io\u002Fcoveralls\u002Fpreactjs\u002Fpreact\u002Fmain.svg)](https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fpreactjs\u002Fpreact)\n[![gzip size](https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002F\u002Funpkg.com\u002Fpreact\u002Fdist\u002Fpreact.min.js?compression=gzip&label=gzip)](https:\u002F\u002Funpkg.com\u002Fpreact\u002Fdist\u002Fpreact.min.js)\n[![brotli size](https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002F\u002Funpkg.com\u002Fpreact\u002Fdist\u002Fpreact.min.js?compression=brotli&label=brotli)](https:\u002F\u002Funpkg.com\u002Fpreact\u002Fdist\u002Fpreact.min.js)\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\nYou can find some awesome libraries in the [awesome-preact list](https:\u002F\u002Fgithub.com\u002Fpreactjs\u002Fawesome-preact) :sunglasses:\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https:\u002F\u002Fgithub.com\u002Fdevelopit\u002Fpreact-in-es3)... but give it a try!_\n\n#### Tutorial: Building UI with Preact\n\nWith Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in [JSX](https:\u002F\u002Freact.dev\u002Flearn\u002Fwriting-markup-with-jsx) (shown underneath), or [HTM](https:\u002F\u002Fgithub.com\u002Fdevelopit\u002Fhtm) which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with \"props\" (similar to HTML attributes) and children.\n\nTo get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.\n\n```js\nimport { h, render } from 'preact';\n\u002F\u002F Tells babel to use h for JSX. It's better to configure this globally.\n\u002F\u002F See https:\u002F\u002Fbabeljs.io\u002Fdocs\u002Fen\u002Fbabel-plugin-transform-react-jsx#usage\n\u002F\u002F In tsconfig you can specify this with the jsxFactory\n\u002F** @jsx h *\u002F\n\n\u002F\u002F create our tree and append it to document.body:\nrender(\n\t\u003Cmain>\n\t\t\u003Ch1>Hello\u003C\u002Fh1>\n\t\u003C\u002Fmain>,\n\tdocument.body\n);\n\n\u002F\u002F update the tree in-place:\nrender(\n\t\u003Cmain>\n\t\t\u003Ch1>Hello World!\u003C\u002Fh1>\n\t\u003C\u002Fmain>,\n\tdocument.body\n);\n\u002F\u002F ^ this second invocation of render(...) will use a single DOM call to update the text of the \u003Ch1>\n```\n\nHooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:\n\n```js\nimport { render, h } from 'preact';\nimport { useState } from 'preact\u002Fhooks';\n\n\u002F** @jsx h *\u002F\n\nconst App = () => {\n\tconst [input, setInput] = useState('');\n\n\treturn (\n\t\t\u003Cdiv>\n\t\t\t\u003Cp>Do you agree to the statement: \"Preact is awesome\"?\u003C\u002Fp>\n\t\t\t\u003Cinput value={input} onInput={e => setInput(e.target.value)} \u002F>\n\t\t\u003C\u002Fdiv>\n\t);\n};\n\nrender(\u003CApp \u002F>, document.body);\n```\n\n---\n\n## Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https:\u002F\u002Fopencollective.com\u002Fpreact#sponsor)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fsnyk.co\u002Fpreact\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fsnyk\u002Fimage\u002Fupload\u002Fsnyk-marketingui\u002Fbrand-logos\u002Fwordmark-logo-color.svg\" width=\"192\" height=\"64\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F10\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F11\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F12\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F13\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F14\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F15\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fguardian\" target=\"_blank\">       \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fguardian.png\" width=\"64\" height=\"64\">       \u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F16\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F17\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F18\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F19\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F20\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F21\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F22\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F23\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F24\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F25\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F26\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F27\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F28\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fsponsor\u002F29\u002Favatar.svg\">\u003C\u002Fa>\n\n## Backers\n\nSupport us with a monthly donation and help us continue our activities. [[Become a backer](https:\u002F\u002Fopencollective.com\u002Fpreact#backer)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F10\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F11\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F12\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F13\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F14\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F15\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F16\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F17\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F18\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F19\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F20\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F21\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F22\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F23\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F24\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F25\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F26\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F27\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F28\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fpreact\u002Fbacker\u002F29\u002Favatar.svg\">\u003C\u002Fa>\n\n---\n\n## License\n\nMIT\n\n[![Preact](https:\u002F\u002Fi.imgur.com\u002FYqCHvEW.gif)](https:\u002F\u002Fpreactjs.com)\n\n[preact\u002Fcompat]: https:\u002F\u002Fgithub.com\u002Fpreactjs\u002Fpreact\u002Ftree\u002Fmain\u002Fcompat\n[hyperscript]: https:\u002F\u002Fgithub.com\u002Fdominictarr\u002Fhyperscript\n[DevTools]: https:\u002F\u002Fgithub.com\u002Fpreactjs\u002Fpreact-devtools\n","Preact 是一个轻量级（约4kB）的React替代方案，提供了与React相同的现代API。它支持组件和虚拟DOM技术，具有熟悉的React API模式，如ES6类、Hooks和函数组件，并通过简单的`preact\u002Fcompat`别名实现广泛的React兼容性。Preact还提供了包括JSX、VDOM、DevTools、HMR（热模块替换）、SSR（服务器端渲染）在内的全面功能，以及高度优化的差异算法和无缝的从SSR到客户端的水合过程。由于其体积小且性能优越的特点，Preact非常适合用于构建需要快速加载时间并保持高性能的应用程序场景，尤其是在移动设备或网络条件不佳的情况下。",2,"2026-06-11 02:43:01","top_all"]