前端每周清单第 56 期: D3 5.0,深入 React 事件系统,SketchCode 界面生成

作者:王下邀月熊 编辑:徐川

前端每周清单专注大前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • D3 5.0: D3 5.0 作为大版本更新,引入了部分不向后兼容的特性更新。该版本开始使用 Promise 来替代传统的异步回调以进行数据加载,Promise 能够大大简化异步代码的结构,特别是那些支持 await 与 async 的浏览器。此外,该版本还使用了 Fetch API 替代传统的 XMLHttpRequest 对象,即使用 d3-fetch 替代 d3-request。更多更新特性介绍请查看原文。
  • Java 10 正式发布,带来了这些新特性: 北京时间 3 月 21 日,Oracle 官方宣布 Java 10 正式发布。这是 Java 大版本周期变化后的第一个正式发布版本。需要注意的是 Java 9 和 Java 10 都不是 LTS 版本。和过去的 Java 大版本升级不同,这两个只有半年左右的开发和维护期。而未来的 Java 11,也就是 18.9 LTS,才是 Java 8 之后第一个 LTS 版本。Java 10 提供了愈百项新特性,譬如 var 局部变量类型推断、统一的垃圾回收接口等。

开发教程

步步为营,掌握基础技能

  • 使用 Flutter SDK 开发简单的加密货币信息应用: Flutter 是 Google 最新开源的用于开发 Android 与 iOS 跨平台应用的开源工具集;其使用 Dart 编程语言,并且能够直接编译为原生代码,因此其能够在代码复用性与性能之间达成平衡。本教程中,作者循序渐进地介绍如何使用 Flutter 来构建展示当前不同加密货币价格的应用,并且针对初学者介绍了 Flutter 架构与 Dart 语法基础。
  • 2018 React.js 全面指南: 本文最早写于 2015 年,此篇则是基于最新的 React 16.3 版本进行的更新,包含了最新版本中的各个特性。作者希望在本文中谈及 React 的大部分核心方面,包括了:JSX,Virtual DOM,React.Component,state,Component LifeCycle,Events 等。更多相关内容参考 现代 Web 开发--React 篇
  • React Apollo 2.1 介绍: 近日,React Apollo 发布了 2.1 版本,大幅提升了使用 GraphQL 开发 React 应用的体验。该版本提供了新的 Render Prop API 以及更强力的 TypeScript 支持,并且优化了说明文档。本文中,我们将会对如下新特性进行介绍:基于 Query 的数据抓取,使用 Mutation 更新数据,利用 ApolloConsumer 简化本地状态等。更多相关内容参考 现代 Web 开发--React 篇

工程实践

立足实践,提示实际水平

  • Typescript 2.8 React 组件开发模式: TypeScript 是非常优秀的 JavaScript 静态类型扩展,本文则在常见的 React 开发模式的基础上,使用 TypeScript 2.8 实现了常见的模式:Stateful,Stateless,Default Props,Render Callbacks,Component Injection,Generic Components,High Order Components,Controlled Components。 更多相关内容参考 React DevPractices Links
  • React 应用中使用的不同动画库比较: 优雅的动画是 Web 站点体验性的重要保障,现在已经有了很多介绍使用方式、使用案例、适用场景的文章。本文则是对于常见的动画库进行了横向对比,从而帮助开发者更好地针对自身的需求选择不同的动画库,包括了以下维度的考量:项目的维护情况如何,入手的难易程度如何,语法如何,性能如何等等。更多相关内容参考 Awesome Links
  • CSS Grid 渐进式实践: 上个月我们重新设计了 Thomasnet.com,并且使用 CSS Grid 作为主要的布局方式。本文即是 CSS Grid 渐进式实践的分享: CSS Grid 语法速览以及技巧分享,CSS Grid 与 Flexbox 对比,CSS Grid 基础以及浏览器的兼容性保障。 更多相关内容参考 现代 Web 开发--基础篇

深度阅读

深度思考,升华开发智慧

  • React 与 React Native 事件系统详解: 现在已经有了很多介绍 React 事件系统的文章,不过鲜有介绍它们内部工作原理的。本文作者一直从事着 React Native 开发,并在本文中分享了其阅读相关源代码后整理得到的理解。本文依次介绍了 React 事件系统概览、事件接收与管理机制、EventPluginHub 等内容;更多相关内容参考 现代 Web 开发--React 篇
  • 关于图片压缩的考量: 在之前的讨论中,我们关注过如何使用 Compressive Images 来压缩图片尺寸:即在降低图片清晰度的同时,将其设计稿的尺寸增大,这样经过浏览器自动压缩之后,其视觉效果相差无二。这种方式在测试用例中能够带来 50% 的体积减少,不过这种方式也会带来更大的内存消耗。更多相关内容参考 现代 Web 开发--基础篇
  • SketchCode: 使用深度学习自动化前端开发: 本文作者构建了某个深度学习模型,能够从用户手绘的设计草稿中,生成可用的 HTML 网站;作者希望能够尝试利用这种方式来简化现在的设计流程。本文依次介绍了 SketchCode 的创意来源与设计理念,如果获取到有效的数据集,如何将图片处理为手绘模式,如何设计神经网络架构以及如何进行模型训练等内容。更多相关内容参考 人工智能与深度学习实战

开源项目

乐于分享,共推前端发展

  • Driver.js: Driver.js 是强大的,轻量级,使用原生 JavaScript 引擎开发的页面用户关注点。Driver.js 并不仅仅是另一个指南性质的库,其的用户场景还是非常广泛的,能够用于任何需要为页面构建浮层的情况,譬如当用户需要与某些元素交互而隐藏其他元素的场景。
  • brain.js: brain.js 是基于 JavaScript 实现的轻量级神经网络(Neural Networks)库,其提供了非常简明易用的接口,并且支持异步训练。目前官方提供了识别颜色常量、简单字母识别、利用 RNN 编写简单的句子等示范,可以自己尝试一下。
  • dejavu: dejavu 是新的 ElasticSearch Web 管理界面,不同于 Kibana 这样服务端渲染并且响应较差的库;dejavu 采样了完全的客户端渲染方式,这也赋予了其便捷部署的能力,从 Github Pages,Chrome 插件到 Docker 镜像。dejavu 并且提供了 JSON 与 CSV 文件的导入导出功能,并能够自定义表格头,以增强其灵活性。

巅峰人生

  • 雅虎研究院——如何从辉煌到失败?: 雅虎是最早成功的互联网公司之一,也是最早意识到需要把基础研究,特别是机器学习以及人工智能研究,应用到实际产品中的公司。雅虎从很早就开始招聘和培养研究型人才,雅虎研究院就是在这个过程中应运而生的。今天我就来说一说雅虎研究院的历史,以及过去十多年间取得的成就,聊一聊如何通过引进高级人才,迅速构建起一支世界级的研发团队。当然,也会聊一聊研究院的衰落。高级研发机构对于企业而言往往是锦上添花的事情,在整个公司产品和视野都欠缺的情况下,也往往避免不了最后衰败的结局。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com,注明 “ 前端之巅投稿 ”。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom