preact README

The project's README from github.com/preactjs/preact. As one markdown file: README.md.

Preact

Fast 4kB alternative to React with the same modern API.

All the power of Virtual DOM components, without the overhead:

💁 More information at the Preact Website ➞

npm Preact Slack Community OpenCollective Backers OpenCollective Sponsors

coveralls gzip size brotli size

You can find some awesome libraries in the awesome-preact list :sunglasses:

Getting Started

💁 Note: You don't need ES2015 to use Preact... but give it a try!

Tutorial: Building UI with Preact

With 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 (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.

To 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.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

Hooray! 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:

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	);
};

render(<App />, document.body);

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

            SentDM Songsterr Deno

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

License

MIT

Preact

preact (preactjs/preact)

Searching Database…

38.9K ·GitHub
Preact
这是什么？Preact 是一个快速、体积仅约 3kB 的 React 替代方案，实现了相同的现代 API，包括组件（Components）和虚拟 DOM（Virtual DOM）。
它是框架还是库？它和 React 是什么关系？它是一个 UI 渲染库，而不是完整的框架。它的 API 与 React 保持一致（类组件、Hooks、函数式组件），并且可以通过 preact/compat 别名直接替换 React 使用。
怎样在项目中添加 Preact？你用 JSX 或 HTM 标记模板（tagged templates）编写组件和元素，然后调用 render() 函数，把组件树挂载到一个 DOM 元素上。
必须使用 JSX 吗？有没有其他写法？编写组件通常使用 JSX，但它并非必需——你也可以改用 HTM，它使用标准的 JavaScript 标记模板（Tagged Templates）。
我现有的 React 代码能直接在 Preact 中运行吗？大多数 React 代码可以通过 preact/compat 兼容层运行，但它被描述为一个简单的别名，而不是完美的一对一重新实现，因此一些 React 特定行为的边缘情况可能不被覆盖。
它支持服务端渲染和热重载吗？支持。Preact 开箱即用，包含服务端渲染（SSR）、水合（hydration）、DevTools 集成和热模块替换（HMR）所需的全部功能。
它支持哪些浏览器？Preact 支持所有现代浏览器。
为什么 Preact 比 React 更快、体积更小？它通过高度优化的 diff 算法和无缝的水合过程，实现了约 3kB 的超小体积和更快的速度，同时保留了熟悉的 React 组件模型。
它支持异步渲染吗？支持。Preact 提供透明的异步渲染，并带有可插拔的调度器（scheduler）。
在哪里可以找到社区库和插件？awesome-preact 列表整理了用于 Preact 的社区库和工具。
What are similar projects?inferno, snabbdom, million, marko, canvas-ui, react, mithril.js, styled-components
Which topics is it in?vdom, preact, server-side-rendering, jsx, dom, components, hooks, ui-components, ui, performance, react, frontend
Creator
preactjs
Size
19.6 MB
Stars
38.9K
Updated
CommitOct 17Release11.0.1Oct 08
Age
11y
Commits · 90 Days