兼容模式 #

React 代码 → preact/compat → Preact 运行时

npm install preact

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react/jsx-runtime': 'preact/jsx-runtime',
      'react/jsx-dev-runtime': 'preact/jsx-dev-runtime'
    }
  }
});

module.exports = {
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils'
    }
  }
};

import alias from '@rollup/plugin-alias';

export default {
  plugins: [
    alias({
      entries: [
        { find: 'react', replacement: 'preact/compat' },
        { find: 'react-dom', replacement: 'preact/compat' },
        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' }
      ]
    })
  ]
};

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "baseUrl": ".",
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"],
      "react-dom/test-utils": ["node_modules/preact/test-utils"]
    }
  }
}

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; }
  }
});

const store = configureStore({
  reducer: counterSlice.reducer
});

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

function Counter() {
  const count = useSelector(state => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
    </div>
  );
}

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
  );
}

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json())
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

import { motion } from 'framer-motion';

function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
    >
      Animated content
    </motion.div>
  );
}

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email is required</span>}
      
      <input type="password" {...register('password', { minLength: 6 })} />
      {errors.password && <span>Min 6 characters</span>}
      
      <button type="submit">Submit</button>
    </form>
  );
}

import { 
  Component,
  PureComponent,
  memo,
  forwardRef,
  createContext,
  Fragment,
  StrictMode,
  Suspense,
  lazy
} from 'preact/compat';

// 使用方式与 React 相同
const MemoComponent = memo(function Component({ data }) {
  return <div>{data}</div>;
});

const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

const ThemeContext = createContext('light');

const LazyComponent = lazy(() => import('./HeavyComponent'));

import {
  useState,
  useEffect,
  useContext,
  useReducer,
  useCallback,
  useMemo,
  useRef,
  useImperativeHandle,
  useLayoutEffect,
  useDebugValue
} from 'preact/compat';

// 使用方式与 React 相同
function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = useRef(count);

  useEffect(() => {
    prevCount.current = count;
  }, [count]);

  return <div>{count}</div>;
}

import { render, createRoot, hydrate, createPortal } from 'preact/compat';

// React 18 方式
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// 传统方式
render(<App />, document.getElementById('root'));

// SSR 水合
hydrate(<App />, document.getElementById('root'));

// Portal
function Modal({ children }) {
  return createPortal(
    <div class="modal">{children}</div>,
    document.body
  );
}

// React 合成事件特有方法
e.isPropagationStopped();
e.isDefaultPrevented();
e.isPersistent();
e.persist();
e.nativeEvent;

// Preact 使用原生事件
// 这些方法不可用

// React 支持
getSnapshotBeforeUpdate(prevProps, prevState) {}

// Preact 不支持
// 使用 useLayoutEffect 替代

// React 内部 API（不推荐使用）
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

// Preact 不支持

Preact + compat
├── preact           ~10KB
├── preact/compat    ~2KB
└── 总计             ~12KB

vs React
├── react            ~42KB
├── react-dom        ~130KB
└── 总计             ~172KB

// compat 模式性能略低于纯 Preact
// 但仍优于 React

// 推荐逐步迁移到纯 Preact API

// 安装 Preact DevTools
import 'preact/debug';

// 或使用 React DevTools（兼容模式）
import 'preact/devtools';

// 开发模式下启用详细错误
if (process.env.NODE_ENV === 'development') {
  require('preact/debug');
}

// 第一阶段：使用 compat 兼容
import { useState } from 'react';  // 通过别名

// 第二阶段：逐步替换
import { useState } from 'preact/hooks';

// 第三阶段：移除 compat
import { useState } from 'preact/hooks';

// 只对需要的库使用 compat
import { render } from 'preact';  // 纯 Preact
import { Provider } from 'react-redux';  // 需要 compat