腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

IMWeb前端团队

IMWeb前端团队专栏

专栏作者

1369

文章

1869033

阅读量

215

订阅数

Change Detection And Batch Update

angularjs react vue.js javascript

在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新时，这些框架/库会帮我们更新DOM。那么这里就有两个很重要的问题了：当数据变化时，这些框架/库是如何感知到的？当我们连续更新数据时，这些框架/库如何避免连续更新DOM，而是进行批量更新？带着这两个问题，我将简要分析一下React、Angular1、Angular2及Vue的实现机制。

IMWeb前端团队

2019-12-05

3.3K0

使用PouchDB来实现React离线应用

react 数据库 sql

最近听到有同学在讨论关于数据上传遇到离线的问题，因此在这里介绍一下PouchDB。

IMWeb前端团队

2019-12-05

1K0

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

vue.js node.js react 开源

初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器之类的展示型项目，交互没有预期那么复杂。但我们实际在工作中，经常会遇到有购物车的项目，这类项目因为涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登陆、注册、用户信息等等，常常会让我们很头疼。既然还没人用vue写过这样的项目，那不如我来写，开源出来对能看到的人也会有帮助。

IMWeb前端团队

2019-12-05

6930

使用React全家桶高仿「Eyepetizer」开眼

react vue.js css redux api

Eyepetizer是个人比较喜欢的美而小的短视频日报应用原站使用jquery实现, 正好api没有限制, 于是用react高仿了一下. 应用不复杂但是为了展示完整的开发流程, 所以把主流的技术栈都用上了, 适合新手入门

IMWeb前端团队

2019-12-05

4450

babelrc在哪里？

babel.js webpack react 打包网站

就是说当需要用到babel转换代码的时候，是会优先查找当前文件夹有没有.babelrc文件，或者其它的写法，比如说package.json的babel字段等，有就停止往上查找，没有就一直向上直到有为止。。。

IMWeb前端团队

2019-12-05

1.7K0

CSS Modules使用详解

css html webpack react 打包

通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多，但主要有两类。

IMWeb前端团队

2019-12-04

1.8K0

webpack热更新配置小结

webpack javascript 打包 react 网站

热更新，可以使开发的人在修改代码后，不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码，大大的缩短了构建的时间。

IMWeb前端团队

2019-12-04

8770

简述tabs react组件的简单实现

然后通过判断li.hd-tt的索引值来控制对应的div.bd-con的显示隐藏，由此封装成一个非常高效率的组件。

IMWeb前端团队

2019-12-04

1.8K0

快速优雅的为React组件生成文档

markdown react 编程算法

最原始的方法莫过于开发时建一个页面用于调试，开发完后再为其手写文档。然而一个详细的React组件文档应该包括：

IMWeb前端团队

2019-12-04

8510

React中如何不使用插件实现组件出现或消失动画

首先React本身是有动画插件的React.addons.TransitionGroup，当你使用该组件时，会添加对应的动画生命周期函数来控制动画，分别为componentWillEnter，componentDidEnter，componentWillLeave，componentDidLeave。而更高级点的ReactCSSTransitionGroup则是ReactTransitionGroup是基于ReactTransitionGroup的，在React组件进入或者离开DOM的时候，它是一种简单地执行CSS过渡和动画的方式。

IMWeb前端团队

2019-12-04

2.1K0

给react加try-catch

react babel.js css webpack 打包

最近在一个使用fis构建的react.js项目里遇到个问题，render函数里如果发生了运行时错误，比如说某个对象没有判断就直接去访问其属性，那我所知道的就是，页面不正常了，特别是有嵌套子组件的时候，我可得一个个一层层去排查判断，去加try-catch。。。

IMWeb前端团队

2019-12-04

1.2K0

初尝 Jest 单元测试

react 腾讯云测试服务单元测试编程算法自动化测试

最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。那这时候问题来了，有些修改，我们会以为很简单，从而放松警惕，偷懒也罢，没有精力也罢，简单验证之后便匆匆发布了。此时，有可能不经意的改动对其它功能造成了影响，bug复bug， bug何其多呀。

IMWeb前端团队

2019-12-04

1.5K0

Why you shouldn`t use Preact, Fast-React, etc. to replace React today

react 渲染 java 编程算法 c++

生命在于折腾，Coder的折腾就在于造各种轮子。React在前端圈大火之后，轮子层出不穷。而其中的一些轮子，由于专注于解决很多人诟病的React过大、过慢的问题（然而不并不觉得），也相当出名。关注最多的莫过于Preact、Inferno等以「轻量化」为特色的库了，Github Star数也超过10000。另外由于React广泛应用于同构应用上，并且 rendertoString，renderToStaticMarkup 也存在同步执行、速度慢等问题，一些专注于React服务器端渲染的库也颇受关注。如Preact产出的preact-render-to-string还有我现在的团队在用的fast-react-render，都是这个思路。

IMWeb前端团队

2019-12-04

4620

node内存泄漏以及定位

之前一次偶然机会发现，react 在server渲染时，当NODE_ENV != production时，会导致内存泄漏。具体issues: https://github.com/facebook/react/issues/7406 。随着node，react同构等技术地广泛运用，node端内存泄漏等问题应该引起我们的重视。为什么node容易出现内存泄漏以及出现之后应该如何排查，下面通过一个简单的介绍以及例子来说明。

IMWeb前端团队

2019-12-04

1K0

React性能探索 --- 避免不必要渲染

渲染 react https 网络安全

上一篇文章的结尾 http://imweb.io/topic/5985cc4d35d7d0a321c5eb75 我们说到，也许，不是所有的节点都需要重新渲染，对于那些不需要渲染的节点，我们如何找到它们并做优化呢？

IMWeb前端团队

2019-12-04

7740

React函数式进阶

javascript react https 网络安全 jquery ui

React让很多人让追捧的一个特性是它的所有的组件都是完全由JavaScript组成的。组件的定义是JavaScript，组件的模板也可以是JavaScript，组件的样式也可以是JavaScript（参考styled-component）。React并没有创造太多概念，唯一的创造品——JSX，其内部的statement也是一段段纯JavaScript代码，并且在Babel编译后依然转变成了JavaScript。

IMWeb前端团队

2019-12-04

8090

react hook的初步研究

一开始react团队对外宣布hook 的时候，一眼看上去，觉得肯定proxy或者getter实现的，然后在函数组件外面包一层class extend React.Component。读setState钩子的第一个return结果就返回state，第二个结果就是封装了setState。后来发布了，看了一下代码，原来是维护一个队列（可以说很像数组，也可以说维护一个链表）。

IMWeb前端团队

2019-12-04

5100

React + Redux 组件化方案

react redux html npm

理想中的组件化，第一步应该就是组件的标签化，例如有一个 Header 组件，如下图所示

IMWeb前端团队

2019-12-04

5490

记一次preact迁移到react16.6.7的经历

preact作为备胎，但是具有体积小，diff算法优化过的特点，简单活动页用上它是不错的选择。但是考虑到react令人兴奋的新特性，preact并没有按时更新去完全支持它，更严重的是一些babel插件、一些库配合preact会有问题。所以，还是不得不迁移了。

IMWeb前端团队

2019-12-04

7160

react diff 原理

react 编程算法

React diff 作为Virtual DOM的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文将剖析 React diff 的不可思议之处。

IMWeb前端团队

2019-12-04

1.1K0

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态