推荐文章：React组件到Web Component的无缝转换 —— @r2wc/react-to-web-component-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00083/article/details/139083285

推荐文章：React组件到Web Component的无缝转换 —— @r2wc/react-to-web-component

react-to-web-componentConvert react components to native Web Components. Works with Preact too!项目地址:https://gitcode.com/gh_mirrors/re/react-to-web-component

1、项目介绍

@r2wc/react-to-web-component 是一个神奇的工具，它可以将React组件转化为原生的自定义元素（Custom Elements），无需通过React来挂载这些组件。这意味着你可以在任何支持HTML的项目中，包括Vue、Svelte、Angular、Ember或CanJS等框架内，如同使用普通HTML标签一样，轻松地嵌入你的React组件。

2、项目技术分析

这个库适用于React 18及以上版本，只有约1.26KB的大小（minified & gzipped），且在所有现代浏览器上都能正常工作，仅Edge浏览器需额外引入customElements的polyfill。@r2wc/react-to-web-component的核心在于创建具备getter和setter的CustomElementConstructor，并在生命周期方法中处理属性更新，确保React组件内部的渲染与自定义元素的状态同步。

3、项目及技术应用场景

共享跨框架组件：在多框架混合开发环境中，你可以将React组件作为通用的Web Components分享给团队成员。
简化前端集成：无需依赖React库，即使是在不使用React的项目中，也能直接使用React组件。
提升性能：自定义元素只有在被插入页面时才会进行渲染，这有利于优化页面初始化速度。

4、项目特点

无React依赖：生成的自定义元素可以直接在非React项目中运行。
简便的API：使用简单，只需调用r2wc并定义customElements即可创建自定义元素。
属性支持：支持从HTML属性传递至React组件，以实现双向数据绑定。
广泛的示例：提供多种场景的代码示例，涵盖基础用法到高级特性。

示例代码

// 创建React组件
const Greeting = () => <h1>Hello, World!</h1>;

// 转换为Web Component
const WebGreeting = r2wc(Greeting);

// 定义自定义元素
customElements.define("web-greeting", WebGreeting);

// 在HTML中使用
<web-greeting></web-greeting>