3种与自定义元素集成反应的方法

Web组件及其可移植性和浏览器兼容性为Web开发人员提供了引人注目的优势，尤其是在旨在跨各种框架的始终用户体验的大型组织中。但是，存在一个常见的误解，即领先的前端库反应并不能与Web组件融为一体。本文通过展示无缝集成技术来消除神话。

尽管React与Web组件的兼容性可能会得到增强，但不良整合的主张是不准确的。我们将探讨最佳实践和局限性，创建包装纸和自定义JSX Pragmas，以实现自定义元素和React之间的更紧密的耦合。

集成反应和网络组件：三种方法

将反应视为着色书 - 我们将探索在遵守React结构的同时有效整合自定义元素的方法。我们将使用一个简单的自定义元素（以限制的方式构建，但可以适应自定义元素），该元素将文本输入附加到阴影DOM上，并在价值变化上发出事件。该元素虽然基本元素有效地说明了适用于更复杂组件的集成技术。

方法1：利用ref

React的文档建议使用ref访问Web组件命令式API。这是必不可少的，因为React的合成系统系统和声明的DOM元素访问与本机DOM事件不同。

我们采用React的useRef Hook来引用本机DOM元素， useEffect和useState来访问和渲染输入的值，并且ref调用自定义元素的方法。至关重要的是， useEffect块仔细管理事件听众，以防止记忆泄漏：

 useeffect（（）=> {
  coolinput.current.AddeventListener（'Custom-Input'，EventListener）;
  返回（）=> {
    CoolInput.Current.RemoveEventListener（'Custom-Input'，EventListener）;
  };
}）;

这种方法有效，但它是冗长的，并不固有地“反应”。

方法2：采用包装组件

创建React包装器组件简化了交互作用。该包装器管理ref ，添加/删除事件听众，并提供用于访问非反应可访问元件零件的API。 prop， onCustomInput ，可选地触发来自父组件的回调，包括ref的当前值。

功能coolinput（props）{
  const ref = useref（）;
  const {children，oncustomInput，... rest} = props;

  功能InvokeCallback（event）{
    if（oncustomInput）{
      OncustomInput（event，Ref.Current）;
    }
  }

  useeffect（（）=> {
    const {current} = ref;
    Current.AddeventListener（'Custom-Intup'，InvokeCallback）;
    返回（）=> {
      Current.RemoveEventListener（'Custom-Input'，InvokeCallback）;
    };
  }）;

  返回<super-cool-input ref="{ref}">{孩子们}</super-cool-input> ;
}

该方法，以及诸如reactifyLitElement之类的通用包装器，简化了集成。

方法3：利用JSX Pragmas

JSX Pragmas提供了另一种解决方案。通过导入jsx-native-events ，我们添加了一个附加事件侦听器的道具类型。 onEvent前缀触发事件侦听器的增加。这需要a /** @jsx<pragma_name> */</pragma_name>评论以调用巴格马。

对于天然性质结合而不是反应道具，可以使用react-bind-properties 。

Pragma的代码可在GitHub上获得。

未来的前景

尽管React 17最初计划以改进的自定义元素兼容性，但这些改进似乎延迟到第18版。直到那时，与React的完整自定义元素集成需要一些额外的工作。希望未来的反应版本能够更有效地弥合这一差距。

以上是3种与自定义元素集成反应的方法的详细内容。更多信息请关注PHP中文网其他相关文章！