先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes.如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法.使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素. 什么意思呢?就是说,key值的存在保证了唯一性,可以

前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue&react的源码分析,我感觉这里有必要说下我的认识. 首先,要写源码分析很难,第一是他本来就很难,所以一般我们是想了解他实现的思路而不是代码: 第二每个开发者有自己发风格,所以你要彻底读懂一个人的代码不容易,除非你是带着当时作者同样的问题不断的寻找解决方案,不断的重构,才可能理解用户的意图. 我们

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "

Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中A组件的功能是新增,也就是说在页面上A页面只有一个.而update组件是放在表格里的,表格中的每一行数据都有update组件.跟update组件并列还有一个删除按钮,每次删除完都会重新获取数据. 2.问题描述 界面第一次加载时我对表格的组件B进行操作的时候是没问题的,但是当我删除某一行的数据之后再点

今天遇到一个需求,某个页面是个动态页面,由多个子组件构成. 之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可.但是现在遇到的问题是, 这个动态页面存在多个业务,有的业务需要某几个组件,有的不需要,不同的业务需要的子组件是不同的.也就是说,如果我把所有需要的子组件全部import进去,就会存在一些用不上的情况,那么这个动态页面就会变成一个大而全的臃肿页面,这个当然是我们不期望看到的. 于是,我就在想是否可以根据我页面上传递的参数去循环出我需要的组件? 首先说下,需求是这个页面

在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行接收就可以了:子组件向父组件传值需要绑定一个事件,然后事件是父组件传递过来的this.props.event来进行值的更替,话不多说,上代码: 父组件向子组件传值: 父组件Comment.js: import React from "react" import ComentList fro

上一篇文章我简述了什么是 Virtual DOM,这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值. 什么是 DOM Diff 算法 Web 界面其实就是一个 DOM 树的结构,当其中某个部分发生变化的时候,实质上就是对应的某个 DOM 节点发生了变化.而在 React/Vue 中,都采用了 Virtual DOM 来模拟真实的树结构,他们都拥有两个 Virtual DOM,一颗是真实 DOM 结构的映射,另一颗则是改动后生成的 Virtual DO

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calen

React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用了同样的UI,同样的框架,实现方式确实有差异,这其实就是工程化的问题. 回到React中父组件与子组件之间的数据传递的问题上来. 父组件与子组件之间的数据传递的实现方式大致可以分为2种情况: 1.子组件用flux环传递数据,父组件监听子组件的Store来获得数据流. 我个人认为这种方式的优点的是 数

使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低的东西如今可不多见了啊,是个不可多得的 zhuangbility的利器,自然不可轻易错过,遂深入了解了一番. 概述 高阶组件的定义 React 官网上对高阶组件的定义: 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,

当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,高阶组件就是一个接收一个组件并返回另外一个新组件的函数! 这是官方文档说的,我没有截全,因为后面的解释会造成误解,但简单讲高阶组件(函数)就好比一个加工厂,同样的,屏幕.cpu.扬声器.键盘按键.外壳.电池,小米手机工厂组装完就是小米手机,魅族手机组装完就是魅族手机,基本材料都是相同的,不同工厂(

智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是它不实现任何具体功能.它会将数据和操作action传递给子组件,让子组件来完成UI或者功能.这就是智能组件,也就是项目中的各个页面. 木偶组件:它就是一个工具,不拥有任何数据.及操作数据的action,给它什么数据它就显示什么数据,给它什么方法,它就调用什么方法,比较傻.这就是木偶组件,即项目中的各

富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有能力可以无限拓展功能 界面好看,符合现代审美 提供经典.内联.沉浸无干扰三种模式 对标准支持优秀(自v5开始) 多语言支持,官网可下载几十种语言. 二,配置集成并组件化 2.1,通用配置

跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pdf 的渲染层以外,Facebook 甚至还基于 Three.js 实现了到 VR 的渲染层,即 ReactVR. 跨端开发的一个痛点,就在于各种不同渲染层的学习.使用与维护成本.而不管是 React 的 JSX 还是 Vue 的 .vue 单文件组件,都能有效地解耦 UI 组件,提高开发效率与代码维

vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <template> <div class="container"> <component :is="activeItem"/> <button @click="changeActiveItem">切换</butto

Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改props传过来的数据修改父组件的相应状态,所有的prop都使得其父子prop之间形成了一个单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的状

目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在提,原来的开发中也会抽一些公共的模块出来.但是react带来的思想冲击是革命性的,套用一句可能不太合适的话来,描述:万事万物皆组件,在这种思想的影响下,不管什么框架都可以抽一些公共的模块出来,应该秉持一种心态:任何代码都尽量不要重复写两遍,如果存在那么就可以考虑封装起来作为组件.当然不是一味的提倡盲

在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null 并没什么卵用,只是得到什么都没匹配上的结果,选择框中为空. 后来发现将 value 值设置为 undefined 即可. 其实,在 react 中,传入 undefined 就代表什么都没传入,这时组件中如果有默认的 props 值则会使用默认值. 所以,上面传入 null,其实也是传入了值,所以

1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件.在React中,组件是代码复用的基本单位. 2.为了解释HOCs,举下面两个例子 CommentList组件会渲染出一个comments列表,列表中的数据来自于外部. class CommentList extends React.Component { constructor() { super(

之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好在浏览器里以手机模式浏览) 在讲具体实现前,我想先分享下自己认为的理想的公用组件是什么样的: 1. 黑盒性,即除了你自己以外,其他的开发者在快速阅读使用文档之后可以立刻上手,而不用关心你的内部实现: 2. 独立性,即做好解耦,不与父组件有过多关联: 3 自定义性,适当地暴露一些输入接口或者方法给外部