React Web组件

Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declarative)接口保证Dom结构和数据同步。但是某些时候这2个目标是互补的。对于开发人员来说将React用于Web组件、或将Web组件用于React、或2者皆有并非难事。

虽然大部分使用React的开发人员并不需要使用Web组件,但是在某些情况,特别是引入了某些第三方库,还是需要使用到相关机制。

在React中使用Web组件

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

Web组件常会暴露一些必要的API接口,例如一个 video Web组件可能会暴露  play() 和 pause() 方法。为了获取Web组件暴露的这些API接口,需要在React编码使用Refs特性来直接获取真实的Dom节点。如果引入第三方的Web组件,最好的解决方案使用一个React组件来包装引入的Web组件并最终作为一个React组件来使用。 由第三方Web组件触发的事件也许并不能通过React的渲染树传递,此时需要在组件中去手工的触发事件。 

一个经常导致混乱的地方是,Web组件使用的是“class”而React使用的是“className”,例如:

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

在Web组件中使用React

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      this.createShadowRoot().appendChild(mountPoint);

      const name = this.getAttribute('name');
      const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
      ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
    }
  }
});
document.registerElement('x-search', {prototype: proto});

React整合Jquery这一类直接操作Dom的技术

React在发生真实Dom渲染之前都会先产生与之对应的虚拟Dom结构,然后再“合适”的时候将虚拟Dom的内容渲染到真实Dom上,完成渲染之后componentDidMount会被调用。Jquery这一类真实Dom的操作技术投入实际使用时最好在componentDidMount中使用,然后保证这个组件不会的虚拟Dom不发生任何改变。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

如何构建你的第一个 Vue.js 组件

协作翻译 原文:How to build your first Vue.js component 链接:https://medium.freecodecamp....

2815
来自专栏HaHack

学习 React Native for Android:React 基础

1292
来自专栏deepcc

页面缓存之Meta http-equiv属性详解

1745
来自专栏进击的君君的前端之路

HTML知识点整理

2084
来自专栏deepcc

页面缓存之Meta http-equiv属性详解

3769
来自专栏進无尽的文章

Java工具篇| Eclipse 常用快捷键

古人云:工欲善其事,必先利其器。快键键作为开发中及其常用的节省开发时间提升效率的方式之一,其重要性不言而喻,也许你可以不使用它,但是当你熟练使用、巧妙使用这些快...

1142
来自专栏菩提树下的杨过

Silverlight项目中"自定义控件开发/Style"学习笔记

本文不涉及高深的设计模式(比如mvc,mvvm之类),也没有太多的编程技巧,只是记录自己做为asp.net开发者学习silverlight中自定义控件开发的一些...

25310
来自专栏DeveWork

WordPress 中获取文章的第一段文字的函数

之前写过一篇《WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数》,自认为是一个不错的首页文章截取方式,但如今Jeff 又发现...

2035
来自专栏大前端开发

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

964
来自专栏hrscy

iOS 9 Storyboard 教程(二上)介绍Segue静态单元格(static cell)

Add Player 最终的设计看上去像下面这样:#接第一部分: 原帖地址 简书地址

2781

扫码关注云+社区

领取腾讯云代金券