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