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 库之一。

我们会自动批量更新，并将 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>
        );
    }
}

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