文章目录 一、:: 双冒号操作符 1、获取类的引用 引用类型 KClass 说明 2、获取对象类型的引用 3、获取函数的引用 4、获取属性的引用 二、 java.lang.Class 与 kotlin.reflect.KClass...一、:: 双冒号操作符 ---- 在 Kotlin 中 , :: 双冒号操作符 的作用是 获取 类 , 对象 , 函数 , 属性 的 类型对象 引用 ; 获取的这些引用 , 并不常用 , 都是在 Kotlin...1、获取类的引用 在 Kotlin 中 , 使用 :: 双冒号操作符 获取 类的类型对象引用 代码格式为 : Java或Kotlin类名::class 获取的 Kotlin 类 的 类型对象 的类型...KClass 说明 Kotlin 中 类的引用类型 KClass 中 提供了很多有用的属性 , 如 : public actual val simpleName: String?...} 2、获取对象类型的引用 在 Kotlin 中 , 使用 :: 双冒号操作符 获取 对象类型的引用 代码格式为 : Java或Kotlin实例对象::class 获取的 对象类型的引用 的类型 为 KClass
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。...ref : 绑定属性 refs : 调用的时候使用 调用子组件方法 这是一个很神奇的方法refs，它可以调用子组件的方法以及属性。下面用一个例子来实现调用子组件方法。...在入口父组件App.js中，添加方法handleClick，去调用子组件SubComponent.js中的subHandleClick方法 handleClick(){ //this.refs.subcomponents...可以访问子组件的方法 //也可以获取子组件的state......DOM实例 通过ref属性，你可获取，实例中的属性方法，甚至可以通过他获取到DOM实例节点this.refs.myInput.getDOMNode() 绑定 ref 属性 <input type="text
(defaultProps组件默认属性) Props 验证使用propTypes（类型约束） react 列表和keys react组件api 设置状态：setState 替换状态：replaceState...设置属性：setProps 替换属性：replaceProps 强制更新：forceUpdate 获取DOM节点：findDOMNode 判断组件挂载状态：isMounted react声明周期 Mounting...componentWillUnmount在组件从 DOM 中移除之前立刻被调用。...ref属性 获取实例值 preps属性 react 虚拟dom的属性，preps输出属性，html端显示输入 state属性 组件函数或类的成员 error boundaries 相当于的react的异常捕获...; } js原生控件自定义，Browserify转Commonjs代码为浏览器支持格式（nodejs和浏览器全局变量不同） class Popup extends HTMLElement {
这也意味着你可以不使用类似React和Angular的框架就可以创造组件。甚至，这些组件可以无缝的接入到这些框架中。...这意味着你需要根据某些属性的值，在Shadow DOM中配置任何节点，那么你需要在构造函数中引用这些节点，而不是在connectedCallback中引用它们。...元素将只继承最小数量从组件外部定义的CSS，甚至可以不从外部继承任何CSS。不过你可以暴露这些CSS属性，以便用户对组件进行样式设置。这可以解决许多CSS问题，同时仍然允许自定义组件样式。...Shadow DOM中的事件 默认情况下，自定义元素（如鼠标和键盘事件）的标准事件将会从Shadow DOM中冒泡。...你可以使用CustomEvent从自定义元素中抛出任何你想要的事件。 class MyElement extends HTMLElement { ...
❞ 如果我们从函数组件中移除有状态和副作用逻辑，我们就得到了一个无状态组件。此外，有状态和副作用逻辑可以在应用程序的其他地方进行重复使用。因此，尽量将它们与组件隔离开来是有意义的。...例如，用于获取数据并将数据管理在本地变量中的逻辑是有状态的。我们可能还希望在多个组件中重复使用获取数据的逻辑。 以前，状态逻辑只能在类组件中使用生命周期方法来实现。...❞ 它们允许开发人员从组件中「提取通用逻辑，并在应用程序的不同部分之间共享它」。自定义Hooks遵循使用use前缀的命名约定，这允许它们利用React的Hooks规则的优势。...使用场景 无论我们是从API获取数据、执行计算还是处理表单提交，这个自定义钩子都简化了在React组件中「管理异步操作」。...组件时，获取有关渲染和属性更改的详细信息可以非常有用」。
Portal react 提供了 createPortal 的 api，可以把组件渲染到某个 dom 下。...，从 aaa 切换到 bbb，渲染的内容也会改变。...attributeFilter 可以指定监听哪些属性的变化。 这个 api 用起来也不麻烦，但可以封装成自定义 hooks 或者组件。...而 MutateObserver 组件封装了 ref 的获取。 通过 React.cloneElement 给 children 加上 ref 来获取 dom 节点。...的封装，通过 cloneElement 实现了内部自动获取 ref 然后监听的功能，省去了调用方获取 ref 的麻烦。
state：组件函数或类的成员，render一次渲染，setstate调用后值有更新才会重新调用render preps： 虚拟dom的属性，preps输出属性，html端显示输入 react组件api...componentWillUnmount在组件从 DOM 中移除之前立刻被调用。...获取实例值，react中获取react对象和html dom对象都通过refs访问，不要用jquery查询dom节点 props获取组件属性，ref获取组件html dom对象，state状态绑定调用...; } js原生控件自定义，Browserify转Commonjs代码为浏览器支持格式（nodejs和浏览器全局变量不同） class Popup extends HTMLElement {...('num-popup',Popup) //名称小写，带‘-’符号 react组件中，提倡较少的dom操作，提升效率 react route react spa（单页应用）和传统的mpa（多页应用）
比如在微前端中，我们可能会依赖其他子应用的业务组件，并且这些子应用有可能是异构的，比如 React 引用 Vue 的组件、或者 Vue 3 引用老旧 Vue 2 组件。...怎么将组件的事件定义映射成 自定义元素 的事件？ 组件的插槽又怎么处理？ Shadow DOM 要不要用？ 下面开始详细介绍这些细节。...映射 Props HTML 自定义元素有两种输入参数形式：HTML Attribute 和 Property。这两个的区别就无须过多介绍了。Property 就是普通的类实例属性。...props 对象中获取值 } set foo(val) { this.updateProps('foo', val, true); } updateProps(key, value...视图框架支持自定义元素的事件订阅吗？ Vue 支持通过 v-on 来监听自定义元素的事件。 React 不支持！
目前vue或者react框架中也支持使用Web Component，而且在Web Component中也可以动态的调用react或者vue的api来实现组件或页面的渲染，这给我们开发者提供了更大的自由度...一个简单的tempalte例子如下： 趣谈前端 我们可以用 JavaScript 获取它的引用，然后添加到DOM中，...2.1 Button组件实现 我们像任何vue或者react组件一样，在设计组件之前一定要界定组件的边界和功能点，笔者在之前的从0到1教你搭建前端团队的组件系统（高级进阶必备）也有系统的介绍，这里就不在介绍了...通过用户传入的type属性来在Button组件挂载前设置其类型。对于自定义的插槽，我们可以通过template.content来获取其内容，然后插入shadowRoot中使其拥有slot能力。...我们可以在observedAttributes中监听visible属性的变化，一旦该属性被修改，就会自动触发attributeChangedCallback。
现在的前端开发基本离不开 React、Vue 这两个框架的支撑，而这两个框架下面又衍生出了许多的自定义组件库： Element（Vue） Ant Design（React） 这些组件库的出现，让我们可以直接使用已经封装好的组件...虽然 React、Vue 为我们的组件开发提供了便利，但是这两者在组件的开发思路上，一个是自创的 JSX 语法，一个是特有的单文件模板的语法，两者的目标都是想提供一种组件的封装方法。...定义自定义元素的一些行为，类似于 React、Vue 中的生命周期。...disconnectedCallback：当自定义元素从 DOM 文档中被删除时调用。 adoptedCallback：当自定义元素被移动时调用。...可能其他的组件也要引用。
以前在 React 中，共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重用代码并使组件可塑形更强。...// 第二个参数是可选的，是一个数组，数组中存放的是第一个函数中使用的某些副作用属性。...数组将在回调函数中引用，并按它们在数组中的存在顺序进行访问。...从更细的使用角度来说 useCallback 缓存函数的引用，useMemo 缓存计算数据的值。...它允许您在 React Dev Tools 中显示自定义钩子函数的标签。 示例 我之前基于 umi+react+typescript+ant-design 构建了一个简单的中后台通用模板。
注：为了方便理解，文中引用的代码滤除了细节，是实际实现代码的简化版 设计原则 尽量减少对组件的入侵，最大程度使用已有组件资源。 配置优先，脚本辅助。 基础功能原子化，组合式设计。...在不侵入组件的前提下，并且还要忽略前端库的差异，比较理想的方法是给 dom 节点赋一个特殊属性，并跟模型中组件的 id 对应，在 RxEditor 中，这个属性是rx-id，比如在dom节点中这样表示：...React 中没有明确的卡槽概念，但是React.ReactNode 类型的 props 就相当于具名卡槽了。 在可视化设计器中，是需要卡槽的。...src引入 这种方式可行的，并且以前的版本中已经成功实现，具体做法是在编译的物料库里，把物料的定义挂载到全局window对象上，在编辑器里动态创建一个 script 元素，在load事件中，从全局window...（实际上用一个类来实现），是自定义的。
当然，你也可以从W3C上学习组件规范。 Web Components[以下简称"WC"]，使用自定义元素(custom elements)来代替div，故能使用div的得房就能使用它。...因此，使用WC，只需要在HTML中引入js文件即可。它不并不像目前主流的组件框架，需要外部支撑。例如，如果你要使用React组件，那你大概率的情况下要使用ReactJS。...开始前的准备 文章中的组件、自定义标签、自定义组件其实描述的是同一个东西。...： //1.web组件上的属性主要用来初始化配置。...//从外部定义在组件本身的样式优先于使用:host在Shadow DOM中定义的样式 style.textContent = '.disabled {opacity:
解耦:组件本身隔离了变化，组件开发者和业务开发者可以根据组件的约定各自独立开发和测试。 封装:组件屏蔽了内部的细节，组件的使用者可以只关心组件的属性和事件和方法。...自定义元素构造器，包含组件的生命周期的定义。...获取到模板之后，需要通过 clone() 方法进行拷贝，因为页面上的模板并不是一次性的，可能其他的组件也要引用。 this.getAttribute 可以获取到组件的传参。...定义好之后，我们就可以直接使用 user-card 这个自定义元素了，并且可以传递属性给组件，并且能够通过 slot 标签指定 name 属性，使用上面 HTML 模板中我们定义好的占位符。...该方法接受一个对象，且只有一个 mode 属性，值为 open 或 closed，表示 Shadow DOM 内的节点是否能被外部获取。
，React 会递归地重新渲染它的所有子组件。...✅方案二：将函数传递给 ref 属性，ref 回调4。当需要设置 ref 时，React 将传入 DOM 节点来调用你的 ref 回调，并在需要清除它时传入 null 。...获取自定义组件的 ref 将 ref 放在像 这样输出浏览器元素的内置组件上时，React 会将该 ref 的 current 属性设置为相应的 DOM 节点。...默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。 Warning: Function components cannot be given refs....// forwardRef 允许组件使用 ref 将 DOM 节点暴露给父组件（父组件中按常规方式引用） const MyInput = forwardRef((props, ref) => { return
在当下，前端三巨头vue react ng都是提倡组件化开发的，在原生领域，web-components也逐渐成为标准。...从字面意思可以知道这是自定义元素的意思。...连接到dom后触发 类似于react的componentDidMount，当自定义元素首次加载到dom会触发，如果我们想获取传入的attributes来选择展示内容的话，需要将逻辑放在这个周期内而不是...当自定义元素从DOM树中脱离触发 对于绑定元素的事件监听，可以在这里进行解绑，防止内存泄漏 adoptedCallback 当自定义元素移动到新的document触发 attributeChangedCallback...： 1、通过html传递属性值，由于是通过attributes传入，所以都是字符串 2、组件之间的通信传递需要通过自定义事件
web components 概念 有时候复杂的HTML及相关的样式会在多个地方用到，基于Vue及React我们可以将这个重复的内容封装成一个组件，web components也是为了实现同样的功能，但是它不依赖于现有的三大框架...实现web components的技术点 自定义元素这个技术点可以让开发者通过JS的API直接自定义HTML标签,实现方式有两种：一是使用customElements.define('user-profile...attributeChangedCallback (name, oldValue, newValue) { } // 当 custom element从文档DOM中删除时，被调用。...它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed，open表示可以通过js方法获取shodow dom，如： import layoutStyle from...应用场景 不依赖现有js框架，意味着在Vue，react,ng中都可以使用 如果某些项目是基于java web的老项目，可以封装一些组件内部使用 今日总结 web component概念 相关技术点
组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架。谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。...我们把组件放在页面上，就像其他的或其他组件一样。但我们还在这里添加了一个，它引用了的name属性。...", // 确保拥有HTML元素内建的所有默认属性和方法 class extends HTMLElement { // 在创建新的自定义元素时调用 constructor()...现在，在我的脑海中，我假设一个定制元素获取模板的一个副本，插入您添加的内容，然后使用shadow DOM将其注入到页面中。虽然这是它在前端的样子，但在DOM中却不是这样工作的。...也许你可以在你的工作中到处添加一个自定义组件，以获得一种感觉，以及它在哪里有意义。
抛出自定义事件来模拟实现状态的“双向绑定”； 如何设计组件库； 如何在原生、React 和 Vue 中优雅地使用我们封装的组件。...我们知道 HTMLElement 是浏览器内置的类，LitElement 基类则是 HTMLElement 的子类，因此 Lit 组件继承了所有标准 HTMLElement 属性和方法。...其中最常见的是将事件侦听器添加到元素节点。 disconnectedCallback()：当组件从文档的 DOM 中移除时调用，用于移除对元素的引用。比如移除添加到元素节点的事件侦听器。...虽然前端框架 React 和 Vue 中组件化是其中非常重要的功能，但它们还有页面路由，数据绑定，模块化，CSS 预处理器，虚拟 DOM，Diff 算法以及各种庞大的生态等功能。...不论是 React 还是 Vue，从它们的官方文档有关于 Web Components 的说明中，都可以更好帮助我们理解它们与 Web Components 之间的关系。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
