文章列表
王少飞 于 9个月前发表 1095 1 0
React diff 作为Virtual DOM的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文将剖析 React diff 的不可思议之处。 React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合,特别是其高效的 diff 算法,让用户可以无需顾忌性能问题而”任性自由”的刷新页面,让开发者也可以无需关心 Virtual DOM 背后的运作原理,因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分,并只针对该部分进行实际 DOM 操作,而非重新渲染整个页面,从而保证了每次操作更新后页面的高效渲染,因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。 DIFF 策略 1 Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。 2 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。 3 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。
9个月前
javascript技术
json 于 9个月前发表 1363 0 0
什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码: // 未使用JSXReact.render( React.createElement('ul', { className: 'list' }, React.createElement('li', null, 'fist li'), React.createElement('li', null, 'second li'), React.createElement('li', null, 'third li') ), document.getElementById('example') ); // 使用JSX React.render( <ul class="list"> <li>fist li</li> <li>second li</li> <li>third li</li> </ul>,
9个月前
javascript技术
coverguo 于 9个月前发表 3150 2 0
前言 最近,团队对测试用例十分的注重,因此,下面是我对测试用例的一些解析。 首先,我们需要知道:为什么需要测试用例? 理由很简单,就是为了在测试用例的辅助下,编写出高质量,可维护代码。 -------------------------------------------------------------------------------- 问题 正如因为地震的爆发,才会有地震仪的诞生。 测试用例的诞生,也必然有其需要解决的问题: 当我们在开发,我们往往会有以下的问题: 需求和开发脱节 当一份需求来了, 开发人员往往不能百分百的理解需求的内容(抛弃产品自己变更需求的可能性。。),这往往会让开发人员开发出的功能会有跟需求有所差别,这会带来额外的工作量 开发和测试脱节 什么是开发和测试脱节,说的是,当开发人员按照自己的想法开发完了一个需求。然后测试人员也按照自己的想法去测试这个需求,然后由于双方的分歧,导致测试认为开发有bug,开发认为测试是sb. 那么如何解决上面的问题呢? 答案就是 选择一种软件敏捷开发模式
9个月前
javascript技术
zzbozheng 于 9个月前发表 1293 2 0
最近在做一些关于JSON Schema的基建,JSON Schema可以描述一个JSON结构,那么反过来他也可以来验证一个JSON是否符合期望的格式,于是我想到之前lqlong 之前的一篇 《数据字段防卫探索》 [http://www.imweb.io/topic/56f3892f14ea0f7263803d46] 发现JSON Schema可以做这个事情。 如果之前看我写的 《使用joi来验证数据模型》 [http://www.imweb.io/topic/572561798a0819f17b7d9d3e] 可能会问,为什么不使用JOI,反而使用JSON Schema?因为JOI这个nodejs库,除了验证格式,还带有验证字段关系的功能,库体积相对庞大,而且对于含有嵌套格式的JSON,用JOI来编写验证配置,极为繁琐。JSON Schema清晰简读,用来验证接口数据非常合适。 假设我们有一个期望JSON: { users: [ { id: 1, username: "zzbo", } ] } 我们理解这个JSON结构如下:
9个月前
javascript技术
jaychen 于 10个月前发表 2863 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FpcixPJjbpH-f-CxmctWXwDcOhie] 什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间结束调用。第二次调用时,会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行,则将其替换为新的定时器。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
10个月前
javascript技术
王少飞 于 10个月前发表 1023 0 0
先看下官网的一个demo 定时更新当前元素, [http://7tszky.com1.z0.glb.clouddn.com/FgBAioAZXqXE4LTBOrMlhJ6UHk3p] 拿这个例子分析下setState的实现原理: 首先是reactComponent的setState方法 [http://7tszky.com1.z0.glb.clouddn.com/FoTS_0R1Zsj15E7arVRGdunawb4W] 将新的状态放到队列中 [http://7tszky.com1.z0.glb.clouddn.com/FoKkb1YH3Dqm_AbplL3_v2wCubsX] 新的状态是立即更新还是后面render更新(这个例子是在batchedUpdate中更新的情况) [http://7tszky.com1.z0.glb.clouddn.com/FidFopHg3JzaNgNUsboh4L-PoF-O] 这里采用事务处理为了可以执行用户绑定的生命周期的方法,要更新的状态最终放到dirtyComponents中
10个月前
javascript技术
json 于 10个月前发表 3200 1 0
npm是什么,大家都应该很熟悉了。npm的常用命令很多,为了避免经常到npm官网查找,特将常用的npm命令整理下来。 NPM INSTALL 包安装模块 本地安装 npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install express@3.0.5 安装结束后,当前目录下回多出一个node_modules目录,里面有express模块[http://7tszky.com1.z0.glb.clouddn.com/FpQIaMwDsa-4hioh7FHnqAwHpDH4] 简单说明一下上图 * express@3.0.5 当前安装的package为express,版本为3.0.5 * node_modules/express:安装目录 * methods@0.0.1: 依赖的模块有methods、fresh等以及各自的版本和依赖。全局安装 npm install express -g 将包安装到全局环境中,可以直接在命令行里使用。 NPM UNINSTALL 卸载模块
10个月前
javascript技术
结一 于 10个月前发表 4489 0 2
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
10个月前
javascript技术
朱灵子 于 10个月前发表 3598 1 1
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。 本文初探react的顶层事件代理机制~ 顶级事件代理机制 React采用的是顶层的事件代理机制,能够保持事件冒泡的一致性,可以跨浏览器执行,甚至可以在IE8中使用HTML5的事件。 React 实现了一个“合成事件”层,这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。首先区分原生事件与合成事件,我们在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件,使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener,所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”。 “合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候自动销毁绑定的事件。 事件代理
10个月前
javascript技术
ShiJianwen 于 10个月前发表 7301 3 1
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
10个月前
javascript技术
结一 于 10个月前发表 1684 2 0
首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是趁早放弃,以下为官方的svg支持标签: [http://7tszky.com1.z0.glb.clouddn.com/Ftc692UknCHynuzADWmUMjGXOD-D] 既然不能用svg symbol,那么只好把每个svg icon都定义为一个组件,如麦克风图标 麦克风图标 [http://7tszky.com1.z0.glb.clouddn.com/FtNi9m148o7vuf4av-0196nlIbWl] class Mic extends React.Component { render() { return ( <svg className="icon-svg icon-mic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
10个月前
javascript技术
helinjiang 于 1年前发表 1641 2 0
JavaScript是一门弱类型的语言,因此类型之间的转换会更频繁也更灵活。本文讨论了一些你倍感意外的类型转换,以及其他类型相关的话题。 1. "0" 转换成布尔值 var a = "0"; if (!a) { console.log("1"); } else { console.log("2"); } 上述结果是打印 1 还是 2 呢?答案是 2 。因为 "0" 是一个非空字符串,所有的非空字符串转换成 boolean 值之后,都为 true ,同理 "false" == true 。 0 == false , "0" == true ,当我们这么单独拿出来时,你可能能够清楚这一点,但在实际中,我们可能会忽略了。比如下面的例子: localStorage.setItem('testNum', 0); var testNum = localStorage.getItem('testNum'); console.log(testNum, typeof testNum); // 0 stringif(!testNum){
1年前
javascript技术