【译】React 优化:虚拟 DOM 详解

作者:Alexey Ivanov、 Andy Barnov | 译:大辉 原文地址:https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained 本文将带你学习 React 的虚拟 DOM,并应用这些知识来加速你的应用程序。在这个对框架内部进行全面友好的初步介绍中,我们将揭开JSX的神秘面纱,向您展示React如何做出渲染决策,解释如何找到瓶颈,并分享一些提示以避免常见错误。 React 持续领跑前端世界并且没有下降迹象的原因之一,就是其平易近人的学习曲线。在用 JSX 和 “State vs Props” 的概念武装你的大脑之后,你就可以开始开发了。 但要真正掌握 React,你需要有 React 思想。本文试着从这个方面来帮助你。下面通过我们其中的一个的项目 React table 来了解一下: 如果你已经熟悉 React 的工作方式,可以直接跳至“优化:挂载/卸载”这节来继续阅读。 (图中是一个在 eBay 的业务中拥有庞大数据的 React table) 通过这上百行动态的并且可过滤的数据行,来理解框架的细节对于保证用户的流畅体验是至关重要。 当程序出错的时候,你很容易感受到,输入文字变得卡顿,复选框检查都需要一秒钟的时间,模态框也很难显示出来。 为了解决这些问题,我们这篇文章要涵盖 React 组件从定义到在页面上呈现(然后更新)的整个生命周期。系好安全带,我们要发车了。 JSX 的原理 在前端圈中称为“转译”的过程,其实用“汇编”来描述是更正确的术语。 React 开发者推荐你使用一种混合了 HTML 和 JavaScript 的语法,即 JSX 来编写你的组件。但浏览器对 JSX 及其语法并不理解。浏览器只理解 JavaScript,所以 JSX 必须转换为 […]

Hello PWA

作者:永无止晋 2016年 Google 在 I/O 大会上提出一个 Next Web Generation 的概念 —— PWA 横空出世,2017年始开始流行,目前虽未完全成熟,但越来越火爆,可以预见未来会广为流行。你还在等什么? 一、Hello PWA PWA(Progressive Web App)[1], 渐进式 WEB 应用,是提升 Web App 的体验的一种方法,给用户原生应用的体验。PWA 可以通过 Service Worker, Manifest 等新技术让站点具备离线可用、添加到桌面、实时消息提醒等功能,从功能和体验上无限接近原生 App。 1.1. 背景 自1990年万维网之父-蒂莫西·约翰·“蒂姆”·伯纳·李爵士,创建了 HTTP、HTML 和 WorldWideWeb (全世界第一个网页浏览器)以来,Web 技术和影响力在以惊人的速度增长。HTML5,CSS3,Webpack,React,VUE,Babel,SPA 等技术的成熟与发展仿佛让 Web 进入了百家争鸣的春秋时期,Web应用能做的事情越来越多,大家对web的希望也越来越高。 但随着移动时代的到来,web 应用因为不能离线访问,没有快捷入口和页面频繁卡顿等开始失宠。除了原生应用因离线能力,瞬时加载和可靠性强等优点爆炸性崛起外,Hybrid ,React Native 等 APP 开发模式似乎也有点如日中天的“赶脚”。作为一名 Web 前端开发工程师已经瑟瑟发抖,你呢? 莫慌,老大哥 Google 的工程师们早就“抖”完了,并在2015年提出2016年推出 PWA ,号称 […]

Webpack打包实用优化方案

作者:汪楠 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率,成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了,关于 Webpack 的优化方案,网上有很多文章可以供大家参考。查阅前人的资料,总结自己在项目中遇到的问题,最终得出一些比较实用的优化方案,本文将与大家一一分享。既然是打包优化,那么我们需要时刻关注以下几点: 减少编译时间 减少编译输出文件大小 提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting (作用域提升)。曾经的 Webpack 是将每一个模块(每一个被 import 或者 require 的代码) bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里,每一个模块外层都会有一些特殊的闭包包装,导致文件增大,同时它也使得编译后的 js 文件在浏览器中的执行效率降低。 虽然,理论知识已经了解,但我们还是用实际操作来验证一下: 开启 ScopeHoisting 非常简单,因为 webpack 已经内置了这个功能,在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

执行编译后,结果如下: bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开,编译结果如下: 对比两个的区别大家可以发现,在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码: […]

【译】使用 Flutter 实现跨平台移动端开发

作者: Mike Bluestein   | 译:孙印凤 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/] 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,同时它也是 Google 即将推出的 Fuchsia 操作系统的开发平台。此外,通过自定义的 Flutter 引擎可以将其嵌入到其他平台。 Flutter 为什么会出现?为什么要使用它呢? 一直以来,跨平台工具采用以下两种方法之一: 在原生应用程序中嵌入 web view ,像构建网站一样构建应用程序。 封装原生平台里的控件并为它们提供一些跨平台的参数。 为了使移动端开发变得更好,Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建,提供了实际渲染时用到的 widgets,而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样,该方法可以灵活的以完全自定义的方式构建跨平台应用程序,同时还会提供流畅的性能体验。与此同时,Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。简言之,Flutter 目前是移动端开发者接触到的最接近跨平台开发的东西。 Dart Flutter 应用程序使用 Dart 编写,Dart 是最初由 Google 开发的一种编程语言。它是一种支持预编译和实时编译的面向对象语言,所以比较适合开发原生应用程序,配合 Flutter 的热加载可以提供高效的开发工作流程。Flutter 最近也转向使用 Dart 2.0 […]

JDreact转H5—你需要做的兼容处理

前言 JDreact 像一位安静的女子独立窗前,明眸皓齿的样子让你不敢贸然向前,直到慢慢熟悉之后才会发现,原来她真是上得了厅堂,下得了厨房,写得了代码,查得出异常,既能支持安卓,又可兼容苹果,直到最后我们发现,她居然还可以转成 Web 端代码! 然而就像你心爱的姑娘一样,岂能让你这么容易追到手?今天咱们就来谈谈怎么追女孩!呸,不对!怎么把 JDreact 顺利的转成 H5 代码! 你准备好了吗? 相信你手头已经有一套千锤百炼的 JDreact 代码了!啥?你还没有?快去看看我之前写的文章《与JDReact的第一次亲密接触——加油卡项目总结》,呀!别走啊!即使不想看也没关系!你可以把 JDreact 想象成 React 代码,毕竟两者的语法还是有些类似的,如果也不知道 React ,那也没关系,留意一下呗,万一以后用到了呢! 转化步骤 我们先来看看 JDreact 转化成 H5 代码的主要步骤: 其中的注意事项,我们缓缓道来: 1.修改 config.js 配置文件: 执行完第 1、2 步骤之后,在生成的依赖文件中,找到 web 文件夹下的 config.js 配置文件,根据下面注释修改

其中,entry、publicPath 是需要根据业务代码进行配置的,其他参数可以使用默认值。 2.调用后台数据接口 JDreact 中访问后台接口的方法需要修改为 Jsonp 的方式。具体方法已经在修改 jsbundles 文件夹下的 web.js 后缀文件中给出,但是需要注意的是 Jsonp 中参数 appid 的获取。 首先,登录京东 API开放平台 […]

© 2019 JDC. All Rights Reserved.