Preact 中文

3kB 的快速 React 替代品，具有相同的现代 API

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

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

由以下机构自豪地赞助：

一种不同的库

更接近 DOM

Preact 在 DOM 之上提供了尽可能精简的虚拟 DOM 抽象。它建立在稳定的平台功能之上，注册了真正的事件处理程序，并且可以很好地与其他库配合使用。

Preact 可直接在浏览器中使用，无需任何转换步骤。

小巧

大多数 UI 框架都足够大，可以成为应用程序 JavaScript 大小的大部分。Preact 不同：它足够小，以至于你的代码是应用程序中最大的部分。

这意味着需要下载、解析和执行的 JavaScript 更少，从而为你的代码留出更多时间，以便你可以构建自己定义的体验，而无需努力控制框架。

高性能

Preact 很快，不仅仅是因为它的体积小。它是最快的虚拟 DOM 库之一，这要归功于简单且可预测的 diff 实现。

我们自动批量更新，并在性能方面对 Preact 进行极端调整。我们与浏览器工程师密切合作，以从 Preact 中获得最大的性能。

可移植且可嵌入

Preact 的体积小巧意味着你可以将强大的虚拟 DOM 组件范例带到它原本无法到达的新地方。

使用 Preact 构建应用程序的某些部分，而无需复杂的集成。将 Preact 嵌入小组件，并应用与构建完整应用程序相同的工具和技术。

即刻投入生产

轻量级很有趣，但你无需牺牲生产力即可实现。Preact 可以让你立即投入生产。它甚至有一些奖励功能

props、state 和 context 传递给 render()
使用标准 HTML 属性，如 class 和 for

生态系统兼容

虚拟 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>
        );
    }
}

在 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>
        );
    }
}

在 REPL 中运行

运行示例

import Stars from './stars';

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

⭐️ 35783 星标

准备好了吗？

我们根据你是否有 React 经验提供了不同的指南。
选择最适合您的指南！

开始切换到 Preact