PreactはReactと比較してとても軽量です。
そこでReactからPreact置き換えるにはどうすればいいのかと思い、調べてみました。
もし間違い等あればコメント下さい。
preact/compatを使う
最初に想像するのが、アプリケーション内のimportをすべてpreactに置き換える方法ですが、実はそれ以外にpreact/compatを使うという方法があります。
上記のページに書かれていますが、webpackを使っていれば、resolveのaliasにpreact/compatを登録するだけのようです。
const config = {
...
"resolve": {
"alias": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
"react/jsx-runtime": "preact/jsx-runtime"
}
}
...
}
アプリケーション内のコードは
import React, { useState, useEffect } from 'react'
のように書かれたままですが、先程の設定だけでreactではなくpreactが実行されています。
webpackのaliasについて
webpackのaliasの使い方としては、他にどのように使われるのでしょうか。
例えば、以下のように記述をすると、~で./srcのエイリアスを設定できます。
resolve: {
alias: {
'~': path.resolve(__dirname, 'src')
}
}
そして、アプリケーション内でそのエイリアスを使って他のモジュールの解決をすることができます。
import { bar } from '~/lib/foo/bar.js'
// import { bar } from '../../lib/foo/bar.js' と相対パスで書かなくても解決できる
ディレクトリが深くなったときや、ファイルの移動をする時などに、相対パスではなくエイリアスを使っていると便利なこともあるでしょう。
preactのalias設定も同様で、先程の例でいうと、
import React, { useState, useEffect } from 'react'
これが、以下のようなエイリアスが登録されていることでpreact/compatに定義されているuseStateなどを使うことができます。
import React, { useState, useEffect } from 'preact/compat'
preact/compatがやっていること
今回はReactからPreactへの置き換えでしたが、単純に1からPreactのアプリケーションを作る場合は、preact/compatは必須ではありません。
例えば、useStateも、
import { useState } from 'preact/hooks'
のようにpreact/hooksから使用することができます。
preact/compatは、React, ReactDOMとの互換性を保つためのレイヤーで、互換性を保ちながらpreactの機能を使うことができます。
具体的には、preact/compatのコードを見てもらえれば分かるのですが、preact, preact/hooksなどをimportして、互換性部分の実装を追加し、それらをexportしているようです。
import {
createElement,
render as preactRender,
cloneElement as preactCloneElement,
createRef,
Component,
createContext,
Fragment
} from 'preact';
import {
useState,
useReducer,
useEffect,
useLayoutEffect,
useRef,
useImperativeHandle,
useMemo,
useCallback,
useContext,
useDebugValue
} from 'preact/hooks';
import { PureComponent } from './PureComponent';
import { memo } from './memo';
import { forwardRef } from './forwardRef';
import { Children } from './Children';
import { Suspense, lazy } from './suspense';
import { SuspenseList } from './suspense-list';
...(略)
export default {
useState,
useReducer,
useEffect,
...
}
PreactはReactとの互換性を維持する部分をcompatに切り出すことで、preactとしての機能はシンプルに、軽量なコードベースを維持しています。
PreactとReactの違いはドキュメントにまとまっていますので、ご覧ください。