作者 | 劉凱

專注 Web 前端技術，崇尚一目瞭然的設計。

為什麼選 Preact

Fast 3kB alternative to React with the same ES6 API.

React 的 3kb 輕量化方案，擁有同樣的 ES6 API

• 體積小。React v15.6.1 有 49.8kb，最新的 React v16.0 小了很多，有 34.8kb。而 Preact 官網聲稱只有 3kb，實測 v8.2.5 版本有4.1kb，但這已經比 React 小了至少 30kb，在移動端網頁開發中佔了不少優勢。

• 效能高。是最快的虛擬 DOM 框架之一，具體可以檢視 Results for js web frameworks benchmark – round 6。

  
  

• 生態好。官方提供 preact-compat，可以無縫使用 React 生態系統中的各類元件。

• 更方便。相比 React，Preact 添加了幾個更為便捷的特性，包括可以直接使用標準的 HTML 屬性（如 class和for），props，state和context作為引數傳進了render()等。

除了 Preact，React-like 中比較出名的還有 Inferno，它大小在9kb左右。它和前面兩者相比，還加了一個新的特性就是無狀態元件（stateless components）也支援生命週期事件，從而可以減少class的使用，做到更加輕量。效能比 React 和 Preact 都要好，其它方面和 Preact 差不多。但是有個問題是 Inferno 用了一些相對較新的特性，比如Promise

遷移指南

官方文件

• 用 Preact 替換 React

官方文件提供了2種途徑，都是在原專案上把 React 替換成 Preact，我們為了保持專案乾淨採用建立新專案的方式來做。

準備

1. 建立專案

Preact 官方提供了2種方式來建立專案：

1. preact-cli

2. Preact Boilerplate / Starter Kit

官方推薦用方式一，但我們為了方便定製採用了方式二來建立，去掉了 preact-compat等暫時沒用到庫。

2. 複製程式碼

建立完專案，把原專案中 src目錄下的程式碼（index.js、元件等）拷貝到新專案src

這樣準備工作就做好了，當然現在專案還是跑不起來，會各種報錯，接下來我們需要修改程式碼。

修改程式碼

react

把 react替換成preact：

import React from 'react';
// =>
import { h } from 'preact';

Preact 的 h()相當於 React 中的createElement()，可以閱讀WTF is JSX瞭解更多。

import { render } from 'react-dom';
// =>
import { render } from 'preact';

import { Component } from 'react';
// =>
import { Component } from 'preact';

redux

直接替換成 preact-redux 就可以，其它都一樣：

import { Provider } from 'react-redux';
// =>
import { Provider } from 'preact-redux';

router

我們原專案採用的是 React Router v3，Preact 官方提供了 preact-router，它並不是 React Router 的 preact 相容版本，而是另一種輕量級的路由方案。如果你還是想用 React Router，可以它的 v4 版本，因為 v4 版本可以直接和 Preact 一起使用，而不需要 preact-compat 來做相容。

所以如果你有比較複雜的需求的話，比如路由巢狀、檢視合成等等，可以考慮用 React Router v4；如果只是想要比較基本的路由需求的話，那就用 preact-router 好了。我們專案路由需求不復雜，為了追求輕量，就採用了 preact-router，畢竟 React Router 比 preact-router 大了很多。

因為不相容，所以改動也是比較大的：

import { Router, Route, IndexRoute } from 'react-router';
// =>
import Router from 'preact-router';

import { hashHistory } from 'react-router';
// =>
import createHashHistory from 'history/createHashHistory';
const hashHistory = createHashHistory();

const routes = (
  <Router history={hashHistory}>
    <IndexRoute component={Home} />
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox} />
  </Router>
);
// =>
const routes = (
  <Router history={hashHistory}>
    <Home path="/" />
    <About path="/about" />
    <Inbox path="/inbox" />
  </Router>
);

原 <Route/>的onEnter/onLeave鉤子也沒了，不過沒關係，因為用元件的生命週期才是更合理的。

這樣做完路由配置之後，元件中用到路由的部分也不一樣了。原先取當前頁面的 URL 或者 query 是這樣的：

class Home extends Component {
componentWillMount() {
    const { router } = this.context;
    const { params } = this.props;
    const url = router.location.pathname;
    const { id } = params;
  }}

現在就只需要：

class Home extends Component {
componentWillMount() {
    const { url, id } = this.props;
  }}

是不是更簡單了。preact-router 引入了更少的 API，語法也更加簡潔。

有了路由，當然也少不了連結。原先我們會寫成這樣：

import { Link } from 'react-router';
<Link to="/about">關於</Link>

現在只需要寫成普通的 <a/>標籤就可以了，因為 preact-router 會自動匹配<a/>標籤到路由：

<a href="/about">關於</a>

當然如果你要修改啟用狀態樣式的話還是可以用 <Link/>，但注意這裡用的是href="/"而不是to="/"：

import { Link } from 'preact-router/match';
<Link activeClassName="active" href="/">Home</Link>

總結

上面只是梳理了我們在做遷移時需要改動的地方，因為之前並沒有用第三方的 React 元件，所以也沒有用 preact-compat，除了 router 改得比之前更簡單了，其它基本不需要怎麼改動，整體來說遷移成本不高。

遷移後效果最明顯的就是編譯出來的 js 小了很多，基本是之前的1/3，所以移動端網頁開發推薦用 Preact 替換 React。

全文完

以下文章您可能也會感興趣：

我們正在招聘 Java 工程師，歡迎有興趣的同學投遞簡歷到 [email protected] 。

杏仁技術站

長按左側二維碼關注我們，這裡有一群熱血青年期待著與您相會。