Preact

3kb 大小的 React 轻量、快速替代方案，拥有相同的现代 API。

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>增加</button>
      <button onClick={() => setValue(value - 1)}>减少</button>
    </>
  )
}

骄傲地由以下组织赞助：

与众不同的库

贴近实质

Preact 在 DOM 之上提供了最薄的虚拟 DOM 抽象，在提供稳定的平台特性和注册事件处理程序的同时还确保与其他库无缝兼容。

Preact 无需转译即可在浏览器中直接使用。

微小体积

大多数 UI 框架占了应用 JavaScript 大小的半边天，Preact 却不一样：它的微小让您写的代码成为您应用中占比最大的部分。

这也就意味着下载、解析、执行更少的 JavaScript——您可以专心构建绝佳用户体验，而无需花更多的时间在框架本身。

性能卓越

Preact 很快，不只是因为其体量微小，更是因为其基于树差异的简单、可预测而极快的虚拟 DOM 实现。

我们会与浏览器工程师密切合作，将 Preact 的性能调校到极限，压榨出其每一分性能。

轻松嵌入

Preact 的轻量让您可以将强大的虚拟 DOM 实现移植到其他框架无法进入的领域。

无需复杂集成即可使用 Preact 来构建应用组件，使用构建应用的相同工具与技巧将 Preact 嵌入一个小部件中。

即刻生产

轻量在不牺牲生产性的情况下才有意义。Preact 可让您即刻部署到生产环境，甚至还提供了一些附加功能：

将 props、state 和 context 传递进 render()
使用 class 和 for 一类的标准 HTML 属性

生态兼容

虚拟 DOM 组件让其复用易如反掌——无论是按钮，还是数据提供方，Preact 的设计都能让您轻松、无缝地借用来自 React 生态中的许多组件。

为您的打包工具添加一行简单的 preact/compat 替名即可为即便是最为复杂的 React 组件提供一层无缝兼容。

『码』上见分晓！

待办事项

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.currentTarget.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

Run in REPL

实际示例

import TodoList from './todo-list';

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

获取 GitHub 标星数

export default class Stars extends Component {
    async componentDidMount() {
        let stars = await githubStars(this.props.repo);
        this.setState({ stars });
    }
    render({ repo }, { stars=0 }) {
        let url = `https://github.com/${repo}`;
        return (
            <a href={url} class="stars">
                ⭐️ {stars} Stars
            </a>
        );
    }
}

Run in REPL

实际示例

import Stars from './stars';

render(
    <Stars repo="preactjs/preact" />,
    document.body
);

⭐️ 35783 Stars

准备入坑了？

根据您对 React 的经验，我们提供了不同的指南。
来看看哪个指南最适合您吧！

开始上手切换到 Preact