• React 源码分析(1):调用ReactDOM.render后发生了什么

    Posted by : lon.y@qq.com on 2018年4月26日

    所谓知其然还要知其所以然. 本系列文章将分析 React 15-stable的部分源码, 包括组件初始渲染的过程、组件更新的过程等. 这篇文章先介绍组件初始渲染的过程的几个重要概念, 包括大致过程、创建元素、实例化组件、事务、批量更新策略等. 在这之前, 假设读者已经: 对React有一定了解 知道React element、component、class区别 了解生命周期、事务、批量更新、virtual DOM大致概念等 如何分析 React 源码 代码

    阅读全文...

  • React源码分析(3):全面剖析组件更新机制

    Posted by : lon.y@qq.com on 2018年4月25日

    React 把组件看作状态机(有限状态机), 使用state来控制本地状态, 使用props来传递状态. 前面我们探讨了 React 如何映射状态到 UI 上(初始渲染), 那么接下来我们谈谈 React 时如何同步状态到 UI 上的, 也就是: React 是如何更新组件的? React 是如何对比出页面变化最小的部分? 这篇文章会为你解答这些问题. 在这之前 你已经了解了React (15-stable版本)内部的一些基本概念, 包括不同类型的组件实例

    阅读全文...

  • React 源码分析(2):组件的初始渲染

    Posted by : lon.y@qq.com on 2018年4月25日

    上一篇文章讲到了React 调用ReactDOM.render首次渲染组件的前几个过程的源码, 包括创建元素、根据元素实例化对应组件, 利用事务来进行批量更新. 我们还穿插介绍了React 事务的实现以及如何利用事务进行批量更新的实现. 这篇文章我们接着分析后面的过程, 包括调用了哪些事务, 组件插入的过程, 组件生命周期方法什么时候被调用等. 正文 在React 源码中, 首次渲染组件有一个重要的过程, mount, 插入, 即插入到DOM中, 发生在实

    阅读全文...

  • React V16.3即将更改的生命周期

    Posted by : lon.y@qq.com on 2018年4月25日

    一年多来,React团队一直致力于实现异步渲染。上个月,他在JSConf冰岛的演讲中,丹揭示了一些令人兴奋的新的异步渲染可能性。现在,我们希望与您分享我们在学习这些功能时学到的一些经验教训,以及一些帮助您准备组件以在启动时进行异步渲染的方法。 我们了解到的最大问题之一是,我们的一些传统组件生命周期会导致一些不安全的编码实践。他们是: componentWillMount componentWillReceiveProps componentWillUpda

    阅读全文...

  • 借助 webpack 对项目进行分析优化

    Posted by : lon.y@qq.com on 2018年4月21日

    进入公司之后,接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档,但是由于项目过于庞大,老旧。包含了打包过慢,冗余文件过多等诸多问题。想要快速的解决这些问题,想要完全把功能重构一遍的话,成本太高了。一个一个文件来过,时间成本也比较大。因此在此篇文章中,我们介绍一下我是如何配合webpack一步步进行分析,将项目进行优化的。 同时我针对思路封装了一个webpack-unused-files,用于查找项目中的冗余文件,欢迎试用并star

    阅读全文...

  • 面试题:你能写一个 Vue 的双向数据绑定吗

    Posted by : lon.y@qq.com on 2018年4月20日

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧。结合注释,希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。为了使代码更加的清晰,这里

    阅读全文...

  • 从setTimeout/setInterval看JS线程

    Posted by : lon.y@qq.com on 2018年4月20日

    最近项目中遇到了一个场景,其实很常见,就是定时获取接口刷新数据。那么问题来了,假设我设置的定时时间为1s,而数据接口返回大于1s,应该用同步阻塞还是异步?我们先整理下js中定时器的相关知识,再来看这个问题。 初识setTimeout 与 setInterval 先来简单认识,后面我们试试用setTimeout 实现 setInterval 的功能 setTimeout 延迟一段时间执行一次 (Only one) setTimeout(function, m

    阅读全文...

  • 使用 PostMan 进行自动化测试

    Posted by : lon.y@qq.com on 2018年4月15日

    最近在进行一个老项目的升级,第一步是先将node版本从4.x升级到8.x,担心升级会出现问题,所以需要将服务的接口进行验证; 如果手动输入各种URL,人肉check,一个两个还行,整个服务。。大几十个接口,未免太浪费时间了-.-; 因为是一个纯接口服务的项目,所以打算针对对应的API进行一波自动化测试; 所以就开始寻找对应的工具,突然发现,平时使用的PostMan貌似也是支持写测试用例的-.-,所以就照着文档怼了一波; 一下午的时间,很是激动,之前使用Po

    阅读全文...

  • Vue.js最佳实践(五招让你成为Vue.js大师)

    Posted by : lon.y@qq.com on 2018年4月13日

    本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searc

    阅读全文...

  • 60 行 JS 代码搞定一个下拉刷新组件

    Posted by : lon.y@qq.com on 2018年4月12日

    更多文章参见: https://github.com/elevenbeans/elevenbeans.github.io 神马? 浏览器不都有自带的刷新按钮么? Web 页为什么要下(zi)拉(xing)刷(che)新 ? 这里特指移动端,原因如下: 相较于点击右上角刷新按钮(还有可能要点两次,第一次先展开 menu bar,然后才能看到 refresh 按钮),直接了当地下拉刷新无疑提供了更好的用户体验 点击刷新按钮同步重载页面必然存在一定白屏时间,而通

    阅读全文...