单项目中混用Preact与React的实现方案及组件通信问题

1. 如何实现React与Preact混合编程模式？ #

核心依赖Preact官方提供的preact/compat兼容层，它完整模拟了React的API（包括ReactDOM），让Preact组件能和React组件无缝互操作——不管是嵌套渲染、props传递还是状态通信，兼容层都会自动处理两者的差异（比如合成事件、虚拟DOM格式）。

针对你的多包项目，只需给不同包配置独立的依赖和构建别名：

• React包（package1、package3）：继续依赖react、react-dom，无需修改配置。
• Preact包（package2）：依赖preact和preact/compat，并通过构建工具将react/react-dom的导入映射到preact/compat，让package2里的代码可以继续使用React风格的API写法，同时实际运行时用Preact。

2. 具体迁移步骤 #

步骤1：配置package2的依赖 #

卸载package2中的React相关依赖，安装Preact及兼容层：

# 进入package2目录
cd packages/package2
npm uninstall react react-dom
npm install preact preact/compat

步骤2：修改package2的构建配置 #

将react和react-dom的导入指向preact/compat，避免代码中修改大量导入语句：

• Webpack配置（webpack.config.js）：

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

• Vite配置（vite.config.js）：

  import { defineConfig } from 'vite';
  
  export default defineConfig({
    resolve: {
      alias: {
        'react': 'preact/compat',
        'react-dom/client': 'preact/compat'
      }
    }
  });
  

步骤3：迁移package2的组件代码 #

大部分React代码无需大幅修改，因为preact/compat兼容React的核心API：

• Hooks（useState、useEffect、useContext等）直接沿用
• 类组件也支持，但推荐优先用函数组件
• 注意替换React独有的、compat未覆盖的API（比如React.Fragment可以换成<>，或继续用preact/compat导出的Fragment）

步骤4：跨包组件引用测试 #

• 在package1的React组件中导入并渲染package2的Preact组件
• 在package2的Preact组件中导入并渲染package1的React组件
• 验证props传递、事件触发是否正常

步骤5：根渲染适配 #

如果项目根入口用ReactDOM渲染：无需修改，Preact组件通过compat层可被ReactDOM正常渲染；如果后续要切换为Preact渲染，只需把ReactDOM.render换成preact/compat的render方法即可。

3. 嵌套组件结构（React→Preact→React）的通信保障 #

针对你给出的嵌套结构，只需遵循以下规则即可确保通信顺畅：

Props传递 #

直接按React的方式传递props即可，兼容层会自动处理React与Preact之间的props格式差异：

// package1的React组件
import PreactComp from '@your-project/package2/PreactComponent';

function ReactParent() {
  const handleClick = () => console.log('Clicked');
  return (
    <PreactComp title="Hello" onClick={handleClick}>
      <ReactChild /> {/* package3的React组件 */}
    </PreactComp>
  );
}

Preact组件接收props的方式和React完全一致，无需特殊处理。

Context通信 #

如果使用Context跨层级传值，确保两端都使用preact/compat导出的Context API：

// 在任意包中创建Context（推荐在公共工具包或React包中）
import { createContext, useContext } from 'preact/compat';

const ThemeContext = createContext('light');

// React组件中消费
function ReactChild() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

// Preact组件中消费
function PreactComp({ children }) {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>{children}</div>;
}

这样无论是React还是Preact组件，都能正常读写Context的值。

事件处理 #

React的合成事件与Preact的事件在compat层会自动转换，无需修改事件处理逻辑：

• Preact组件触发的事件，React父组件能正常接收
• React子组件触发的事件，Preact中间组件也能正常监听

Refs传递 #

使用forwardRef处理跨框架的ref传递：

// package2的Preact组件
import { forwardRef } from 'preact/compat';

const PreactComp = forwardRef((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

// package1的React组件中使用ref
function ReactParent() {
  const ref = useRef(null);
  return <PreactComp ref={ref} />;
}

compat层会自动适配React与Preact的ref实现，确保ref能正确指向DOM元素或组件实例。

状态提升 #

如果需要外层React组件与内层React组件通过中间Preact组件共享状态，直接把状态和回调函数作为props传递即可，和纯React项目的状态提升逻辑完全一致：

function ReactParent() {
  const [count, setCount] = useState(0);
  return (
    <PreactComp count={count} onIncrement={() => setCount(c => c+1)}>
      <ReactChild count={count} />
    </PreactComp>
  );
}

内容的提问来源于stack exchange，提问作者Madhu Kumar Tallapalli