React 的轻量级替代方案,体积仅有 3kB,并且拥有与 React 相同的 API

入门 切换到 Preact

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>
    </>
  )
}
Run in REPL

Proudly sponsored by:

  • AMP
  • Trivago
  • Substack
  • Webflow

与众不同的软件库

metal

离 DOM 更近

Preact 在 DOM 上实现了一个最薄的虚拟 DOM 抽象层。 Preact 构建再稳定的平台特性之上,注册真正的事件处理程序,并于其它库配合良好。

Preact 可以直接再浏览器中使用,无需任何转换步骤。can be used directly in the browser without any transpilation steps.

size

体积小

大多数 UI 框架的体积是相当大的,占用了 JavaScript 应用程序的大部分体积。 Preact 不同:它足够小,你的代码 才是你的应用程序的主要构成部分。

这意味着下载更少的 JavaScript 代码,解析和执行也会更快 - 为你的代码节省更多时间,因此你可以按照你的定义实现用户体现,而无须受框架的控制。

performance

性能高

Preact 运行速度快并不仅仅是因为它的体积小。Preact 拥有一个简单和可预测的 diff 实现,使它成为最快的虚拟 DOM 库之一。

我们通过批量更新把 Preact 的性能调整到极致。我们与浏览器工程师密切合作,以便尽可能让 Preact 达到最高性能。

portable

轻量 & 可嵌入

Preact 是轻量的,这意味着你可以将强大的虚拟 DOM 组件泛型带到新的地方。

使用 Preact 构建应用程序的各个部分而无须复杂的集成。将 Preact 嵌入到窗口小部件中并应用相同的工具或技术,你将可以构建一个完整的应用程序。

productive

生产效率

轻量可以让你在不需要牺牲生产力的前提下得到更多的乐趣。Preact 让你立即释放生产力。它甚至还有一些额外的功能:

  • propsstatecontext 可以被传递给 render()
  • 可以使用标准的 HTML 属性,例如 classfor
compatible

生态系统兼容

虚拟 DOM 组件让重用变得容易 - 从按钮到数据提供器都适用。 Preact 的设计意味着你可以无缝使用 React 生态系统中的数以千计的组件。

通过在你的代码包中添加一个简单的 preact/compat 别名,从而提供了一个兼容层,你甚至就可以在你的应用程序中使用复杂的 React 组件了。

实践出真知!

Todo List

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.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';

    获取 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';

    准备入坑了吗?

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

    入门 切换到 Preact