介绍
Custom Elements 是 Web Components 标准的一部分，它可以让我们创建自定义的 HTML 元素，这些元素可以被其他开发者使用，并且可以使用原生的 DOM API 操作。
React 是一个 JavaScript 库，它提供了一种组件化的方式来构建用户界面。React 组件是由 JSX（JavaScript XML）编写的类或函数，在组件中可以定义状态和行为，同时也可以被其他开发者使用。
Custom Elements 和 React 组件都是用于构建可重用的 Web 应用程序部件的技术。它们在某些方面非常相似，但也有一些不同之处。
相似之处
以下是 Custom Elements 和 React 组件的一些相似之处：
封装
Custom Elements 和 React 组件都可以封装 HTML 片段，具体表现为：一个自定义元素可以被定义为类似于 HTML 元素的标记，可以带有属性、样式和事件处理程序；React 组件可以将 HTML 片段封装到组件内部，通过 props 传递属性和事件处理程序。
可复用性
Custom Elements 和 React 组件都可以被多次使用，可以在不同的页面和项目中使用。
独立性
Custom Elements 和 React 组件都可以单独实现，不需要其他库或框架的支持。
互动性
Custom Elements 和 React 组件都可以和用户交互，响应用户的操作。
可扩展性
Custom Elements 和 React 组件都可以通过继承和组合来扩展。
区别
以下是 Custom Elements 和 React 组件的一些区别之处:
声明方式
Custom Elements 使用原生的 HTML 标签声明方式，也可以使用 JavaScript API 来注册一个自定义元素。
<my-element></my-element>
React 组件使用 JSX 或 JavaScript 函数来声明：
function MyComponent(props) {
return <div>{props.name}</div>;
}生命周期
Custom Elements 提供了生命周期钩子函数（如 connectedCallback，disconnectedCallback等），可以在元素被插入或移除到文档中进行自定义操作。
React 组件也提供了自己的生命周期方法（如 componentDidMount，componentWillUnmount等），可以让组件响应不同的生命周期事件。
数据流
Custom Elements 提供了属性绑定和事件机制，可以让父元素和子元素之间进行通信，但是子元素无法直接修改父元素的属性或事件。
React 组件使用 props 和 state 进行数据的传递和响应式更新。父组件可以通过 props 传递数据和事件处理程序到子组件，子组件可以通过调用父组件传递的方法或 props 改变父组件的状态。
UI 更新方式
Custom Elements 的 UI 更新是通过直接修改属性或在 DOM 中添加、删除、更新节点来实现的。
React 组件的 UI 更新是通过 Virtual DOM 实现的，即在组件的 state 或 props 发生变化时，React 会重新计算 Virtual DOM 的差异，然后只更新需要更新的部分，在真实 DOM 上进行局部的修改。
操作示例
以下是一个使用 Custom Elements 实现的共享按钮组件：
-- -------------------- ---- -------
---- ------------------ ---
--------- -------------------
-------
------ -
------- -----
----------- --------
------ ------
-------- --- -----
-------------- ----
-
------------ -
----------- --------
-
--------
------------- ------------
-----------
--------
----- -------- - -----------------------------------------
----- ------------ ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ---------------------------------
--------------------------------------
-
-
-------------------------------------- --------------
---------我们可以在页面中使用这个组件：
<!-- example.html --> <custom-button></custom-button>
以下是一个使用 React 实现的共享按钮组件：
-- -------------------- ---- -------
-- ----------------
------ ----- ---- --------
-------- ------------------ -
------ -
-------
--------
------- -------
----------- ----------
------ --------
-------- ---- ------
------------- ------
--
-----------------------
-
-------------
---------
--
-我们可以在应用程序中使用这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- -----------------
-------- ----- -
----- ----------- - -- -- -
---------------------
--
------ -
-----
------------ ------------ ---- --------------------- --
------
--
-
-------------------- --- ---------------------------------总结
Custom Elements 和 React 组件都是非常有用的技术，它们可以让开发者创建可重用的 Web 应用程序部件，提高开发效率和代码复用性。
Custom Elements 的优点是：直截了当，易于使用；缺点是：DOM 操作复杂，不太适合大型复杂应用。
React 组件的优点是：使用 Virtual DOM，更新效率高；缺点是：学习曲线较陡峭，需要引入整个库。
通过学习和比较两种技术，我们可以对自己的项目要求和目标有一个更清晰的认识，从而选用最合适的技术实现我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ab53e968c7c53b0660c7f