React

前端每周清单半年盘点之React与ReactNative篇

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的React相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。

教程实践

  • Twitter宣布移动Web技术栈迁移到Node.js，Express，React PWA：近日，Twitter工程师Nicolas宣布Twitter几乎所有的移动流量迁移到了以Node.js为基础的服务中(Today we moved all of Twitter’s mobile web traffic (that’s like, a lot) to our new web stack – Node.js, Express, React PWA.)。在过去的两年中，Twitter移动Web技术栈主要是基于Scala，Google Closure Templates以及少量的JavaScript。后来CharlieCroom开始尝试将登出服务迁移到JavaScript技术栈中，并且进行了约9个月的线上测试，效果尚可，因此Twitter决定全部迁移到JavaScript技术栈中。同时，Twitter Web APP还支持所谓的PRPL范式：主动推送首屏关键资源、仅渲染初始路由、预存其他路由、按需懒加载与创建剩余路由。

  • 来自MuseFinder的React组件编写实践：该指南来源于MuseFind在多年的产品开发中总结而来的React实践经验，其包含了对于组件声明方式、样式类的使用、初始状态声明、Props声明、方法声明、Props结构、装饰器的使用、函数式组件的声明等等多个方面。

  • 基于React与Redux Sagas的权限验证应用开发教程：此文中作者深入地介绍了如何利用Redux、Redux Saga、Redux Form、React Router这些工具开发常见的权限验证应用。单独地使用某个工具似乎没啥难度，但是在工程应用中将它们较好地组合在一起却不是件容易事。而本文则是作者从自身工程实践的角度进行了介绍。

  • 基于ReactNative与MobX的Imgur应用开发教程：此文中作者结合ReactNative与MobX开发一个展示Imgur中图片的应用，涉及到了如何使用MobX进行状态管理、如何与RESTful API进行交互、如何在ListView中渲染全屏图片以及如何监听设备状态等。

  • 在React中构建微交互动画：微交互能够更好地引导用户，提升用户体验，而文本则是基于CSS Transitions、react-motion、react-animations构建可交互的搜索框。

  • 2017年React与Redux学习建议:此文是作者数年来学习与使用React以及Redux的感悟，不一定适合纯初学者，不过对于有一定基础概念的很推荐一看。

  • Twitter Redux Store探秘：复杂应用的Store设计一直是开发中的难点，而作为大型内容社交软件Twitter之前宣布Web移动端逐步迁移到Node.js、Express、React PWA架构，本文就是对于Twitter的Redux Store设计分析与探秘。

  • React Native与Swift性能对比：作为混合式开发框架，React Native在运行时仍然会实际调用Objective-C或者Java。此文作者同时用Swift与React Native构建了相同的应用，并且从CPU、GPU、内存使用、电池耗费等多个角度对这二者进行性能分析。结果表明二者性能相差无几，Swift在CPU占用略占优势，二者的GPU占用不相伯仲，而React Native在内存上则有一定长处。( http://suo.im/2MWZnA )

  • React与MobX开发中的测试驱动开发:本文对于React与MobX的基本使用进行了介绍，阐述了为何作者认为MobX是个不错的Redux的替代以及如何对MobX进行单元测试。( http://suo.im/2PE2A6 )

  • 基于React与GraphQL的全栈开发指南：GraphQL最早由Facebook提出以解决复杂多变的查询问题，弥补REST中的不足。它允许界面组件以声明式获取数据而忽略后端实现细节。本系列文章是由Apollo团队提供，讲解如何基于React与GraphQL开发应用。( http://6me.us/O6p )

  • React开发中的10个微模式：此文是Gilbertson在工作中总结而来的React开发中常见的设计模式总结，譬如输入域的唯一标识分配、CSS控制等等 。( http://suo.im/42S8Kb )

  • Airbnb使用React重构搜索功能的实践：早在2015年，Airbnb的工程团队就决定将React作为主要的前端开发栈，不过因为其搜索页面过于复杂因此直到2016年初才开始迁移工作。本文就是Airbnb进行代码重构的经验介绍。( http://6me.us/2mS )

  • React Native中的FlatList组件：3月1日开始ReactNative中的FlatList正式从测试包中移动至正式包中；我们在项目开发中可以使用FlatList、SectionList、VirtualizedList来替代传统的即将被移除的ListView。( http://6me.us/dqiO1 )

  • ReactNative性能优化实践：日前有人表示React Native在Android上表现不佳，本文则是作者对于潜在的性能问题提出的优化方案。作者首先分析了常见的Overdraw问题以及可能的问题源与解决方案，然后介绍了列表中常见的GPU渲染瓶颈以及解决方案。( http://6me.us/qX63f )

  • React中setState的函数式用法：React生态圈中一直崇尚所谓函数式编程理念，而本文作者介绍了如何利用setState函数的回调来实现setState的函数式用法；就像Redux中的reducer一样，能够独立声明于组件外，然后声明式的使用，从而保证组件更新逻辑的清晰与可测试性。

  • 我理解的“大前端”或“大无线”：本文主要是介绍作者所在团队最近的一些变化和思考，包括前言、NodeJS职能变化、ReactNative的大规模应用、专门的架构组职能、总结五部分。。( http://6me.us/Md2 )

  • ReactRouter-V4构建之道与源码分析：本文介绍了React Router V4的设计思想，一步一步由浅入深地介绍如何从零开始构建一个类似于React Router V4这样的秉持路由即组件的思想的路由框架。( http://6me.us/jfUwEw )

  • 来自Formidable的2017 React Naive技术栈：本文是来自Formidable的工程师Jani Eväkallio介绍的他们在2017选定的React Native开发技术栈，包括构建工具、组件库、状态管理等等方面。( http://6me.us/yH2yE )

  • Sketch：React Native的Playground ：随着Create React Native App的发布，Expo发布了能够在线编辑React Native应用的工具Sketch。开发者可以在Web上直接编辑React Native应用代码，或者拖拽方式加入组件，然后通过Expo客户端完成本地预览。( http://6me.us/aGFX )

  • 以组件为中心的React懒加载：React Loadable是以组件为中心的懒加载框架，其基于Webpack 2提供的 import 提供的异步代码分割与加载功能进行了一系列的封装。( http://6me.us/mNHi )

  • 来自Vixlet的React优化策略：在过去的数年中，来自Vixlet的前端开发团队一直使用React与Redux的开发架构，本文即是该团队分享其在开发过程中发现的React优化策略的介绍。( http://6me.us/dx5 )

  • Preact内部原理探秘：Preact是提供了类似于React API不过速度更快、包体更小的React替代包，本系列文章是Preact的开发者介绍其内部工作原理 。( https://parg.co/bOj )

  • CSS Grid典型案例：该网站提供了一系列基于React编写的CSS Grid布局的测试样例，是个不错的从实例中学习CSS Grid语法与使用的教程。( https://sii.im/playground/css-grid/#/ )

  • 开发React Native与Redux应用一年来的错误总结：本文作者总结了他在过去一年中React Native与Redux开发中遇到的错误的复盘与总结，譬如布局文件分割、Redux Store设计、项目目录结构、表单验证等多个方面。( https://parg.co/bQS )

  • React Conf 2017盘点：本文作者对于近日举办的React Conf 2017中的精彩演讲进行了盘点，包括Redux与MobX在状态管理领域的对比、ReactVR等一系列优秀的基于React的扩展项目、代码格式化与样式组件、服务端渲染等等。( https://parg.co/bsg )

  • Redux实践大讨论：此篇是Markerikson在Redux Issue中发起的讨论，主要涉及Redux模板冗余、过度抽象、学习曲线过于曲折、太多的Opinioned最佳实践等问题。( https://github.com/reactjs/redux/issues/2295 )

  • 2017简明React入门指南：本文是针对那些熟悉jQuery与传统JavaScript开发的前端工程师准备的现代React开发入门指南，其包括了环境配置、create-react-app使用、学习资料、应用编写与发布等等章节。( https://parg.co/bCx )

  • React Bits：一本关于React设计模式、技术与技巧的书，涵盖了常见的React应用开发中的设计模式、需要规避的反模式、处理UX变种、性能调试与样式处理等等。( https://github.com/vasanthk/react-bits )

  • 基于ReactNaive与Uber工程基础构建UberEATS：本文是UberEATS的工程师团队介绍的他们基于Uber原工程架构与ReactNative实现应用的工程实践；包括了构建迁移路径、应用架构定义、自动更新、测试与静态类型检测等等。( https://eng.uber.com/ubereats-react-native/ )

  • 微软开源跨平台开发框架ReactXP：ReactXP是来自于微软的用于开发跨平台(iOS，Android，Web，Windows)应用的开源框架，其基于React.js与React Native项目，提供了类似的接口与语法规则；能够帮助开发者快速创建优美、响应式的Web界面以及原生体验的移动应用。( https://microsoft.github.io/reactxp/ )

  • 基于React，Redux，React-Router-V4以及Firebase创建实时足球投票应用：本系列教程基于React，Redux，Redux-Saga，React-Router V4以及Firebase创建足球投票应用，在第一篇教程中主要介绍如何使用create-react-app脚手架来初始化项目结构并且添加必须的库。( https://parg.co/bhD )

  • Webpack与Rollup：求同存异：近日，Facebook宣布将React的构建工具由Webpack迁移到Rollup，引发了很多开发者的讨论。本文则是深度介绍Webpack与Rollup的异同，最后总结而言，Webpack适合于构建应用，而Rollup适用于构建库或框架。( https://parg.co/b4y )

  • React中的状态管理架构模式：本系列文章着眼于对于现代复杂Web应用，譬如React或类似框架，的开发中常见的状态管理的架构模式。文章中会依次介绍Naive Hierarchical Architectural Pattern、Top-Heavy Architecture、Flux等等内容。( https://parg.co/b4J )

  • 基于JavaScript构建数据表达式分词器：本文是一篇挺有意思的文章，介绍如何利用JavaScript解构常见数学表达式并且从中提取出相关实体。本文涉及到的内容包括对于分词器的简单介绍、对于抽象语法树AST的介绍以及最终如何使用代码来实现分词算法。( https://parg.co/bRO )

  • Twitter Lite与高性能可扩展React PWA实践：本文是Twitter工程师团队介绍其在开发世界上最大的PWA应用之一，Twitter Lite过程中克服各种各样的性能瓶颈的实践经验。其核心思想包括基于路由的代码切分、避免可能导致掉帧的函数、使用压缩比更好的图片资源、以及优化React更新过程、避免频繁修正Redux Store、延迟注册ServiceWorker等部分。( https://parg.co/bRV )

  • React Native性能优化：本文作者承接 React Native性能瓶颈与解决方案，以新的实际开发中的例子讨论如何优化React Native应用性能。作者以类似于Android中Toolbar的列表为例，介绍了如何对性能进行测试、使用原生的滚动监听、使用声明式接口等多个方面的内容。( https://parg.co/bRk )

  • 后MVC时代：在很长一段时间里，MVC(Model-View-Controller)架构是构建应用的黄金法则，而近几年随着React，Vue.js，Angular等以组件为中心的库的流行，MVC架构在前端却趋于平寂。开发者往往将模型、视图与控制器耦合在单个实体内，而打破了传统的MVC架构中的约束。类似于Flux或者响应式编程的设计思想也改变了应用状态的处理方式，不同于MVC中的双向绑定，而是数据在实体之间单向流动。本文即是讨论在所谓后MVC时代的GUI应用架构的思考。( https://realm.io/news/the-post-mvc-age/ )

  • CodeSandbox：CodeSandbox是一个在线的React编辑器，其能够帮助开发者更快更方便地展示与分享基于React的项目。CodeSandbox会自动化执行类似于编译、打包、依赖管理等多种项目构建中的常见任务，同时CodeSandbox还允许开发者添加自定义的node_modules中的依赖。( https://parg.co/bR8 )

  • Slate：Slate是类似于Draft.js的灵活可自定义的富文本编辑器构建框架，Slate允许你构建功能丰富的类似于Medium、Dropbox Paper、Canvas这样的编辑器。Slate提供了各式各样的插件，你可以基于React与Immutable来构建自定义的插件，并且指定哪些插件属于核心插件。( https://docs.slatejs.org/ )

  • Facebook发布React VR来简化Web中虚拟现实应用的开发：近年来，虚拟现实技术迅猛发展，有望成为下一个主流处理平台。而Facebook近日正式发布React VR，其能够帮助开发者快速构建VR应用。React VR同样基于React与React Native提供了声明式的代码风格，能够允许有React开发经验的开发者快速上手。( https://parg.co/bfR )

  • 大型高性能React PWA如何消除各类性能瓶颈？：想要构建一款性能出色的Web应用程序，我们需要投入大量技术周期以检测时间浪费点、了解其发生原因并尝试各类解决方案。遗憾的是，这种做法往往无法快速解决问题。性能无疑是一项永恒的命题，技术人员永远徘徊在观察与测量当中，却几乎永远找不到最优解。不过利用Twitter Lite，我们已经在众多层面内取得了细小但却极具价值的改进：从初始加载时间到React组件渲染(防止二次渲染)，再到图像加载以及更多层面。尽管大多数变更本身并不显著，但其相加所带来的最终结果是，我们得以构建起一款规模极大且速度极快的渐进式Web应用程序。( https://parg.co/bfM )

  • Airbnb设计团队发布React SketchAPP：Airbnb设计团队近日发布能够将React组件渲染到Sketch文档中的开源工具，它为开发工程师与设计师之间提供了便捷的沟通桥梁。( http://airbnb.design/painting-with-code/ )

  • 一系列优秀的React界面框架：本文列举了多个优秀的React界面框架，分析了其特性、适用场景以及潜在的缺陷。本文涉及的框架包括Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric等等。( https://parg.co/bNh )

  • 来自Vixlet的React优化建议：近年来Vixlet的Web团队逐步将其Web框架迁移到了React + Redux技术架构，本文是来自于Vixlet的React优化实践总结与建议。( https://parg.co/bNF )

  • 从实用主义视角来看现代前端应用开发：现代Web开发技术变革迅速，而我也经历了从纯JS、jQuery、Vaadin、Angular JS、React等等一系列的变迁。本文则首先思考何谓现代Web应用，然后考虑现代Web应用常用的项目架构与构建方式，譬如TypeScript、Webpack、Linting等内容，然后讨论现代常用的技术架构，譬如React.j、MobX、依赖注入等相关知识。( http://dimafeng.com/2017/04/23/modern-frontend/ )

  • React动画系列教程：本系列教程着眼于介绍React动画开发相关知识，而本文则是从CSS transitions基础入手，介绍了CSS transitions的基础语法与进度条、导航栏等经典案例。( https://parg.co/bMF )

  • 使用React、Redux以及Webpack创建TODO应用：本文是面向新手的教学文章，介绍了如何利用React、Redux以及Webpack创建简单的TODO应用，包括利用Webpack搭建构建环境、编写基本的React组件以及使用Redux管理应用状态等内容。( https://parg.co/bMT )

  • 函数式组件的函数式调用：本文是来自Missive的工程师分享了他们在基于React进行应用开发时的技巧，即如果直接以函数调用而非组件的方式来使用函数式组件，可以避免对于React.createElement的调用，最终相同组件的渲染耗时可以节约近45%。( https://parg.co/bMa )

  • 拥抱React Router 4，改变旧的思维习惯：在今年的React大会上，Michael Jackson以及Ryan Florence发布了所谓“Learn Once，Route Anywhere”的演讲。同时也代表了React Router 4中的核心思想：路由即声明式组件；本文则介绍了React Router V3到React Router V4的变化。( https://parg.co/bVv )

  • 高性能动态CSS样式：本文是对 JSS 新近提供的函数式值的介绍，其与React内联样式以及其他CSS解决方案相比有数倍的性能提升。在Web开发中动态设置样式往往会触发页面的重渲染，而本文则是介绍了如何使用CSSOM的API来在元素渲染之前即完成样式的设置。( https://parg.co/btW )

  • React新引擎React Fiber究竟要解决什么问题？：Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构。这个名为React Fiber的全新设计改变了检测变更的方法和时机，借此可改进浏览器端和其他渲染设备的响应速度。这一 全新架构 最初已于2016年7月公开发布，其中蕴含着过去多年来Facebook不断改进的工作成果。该架构可向后兼容，彻底重写了React的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间，并将变更传递给渲染器。( https://parg.co/btw )

  • GUI应用程序架构的十年变迁：MVC、MVP、MVVM、Unidirectional、Clean：随着现代浏览器的日渐流行，Web以及混合开发技术的发展，大前端的概念日渐成为某种共识；而无论iOS、Android、Web这样的端开发还是React Native、Weex这样的跨端开发，其术不同而道相似纵览这十年内的架构模式变迁，大概可以分为MV*与Unidirectional两大类，而Clean Architecture则是以严格的层次划分独辟蹊径。从笔者的认知来看，从MVC到MVP的变迁完成了对于View与Model的解耦合，改进了职责分配与可测试性。而从MVP到MVVM，添加了View与ViewModel之间的数据绑定，使得View完全的无状态化。最后，整个从MV*到Unidirectional的变迁即是采用了消息队列式的数据流驱动的架构，并且以Redux为代表的方案将原本MV*中碎片化的状态管理变为了统一的状态管理，保证了状态的有序性与可回溯性。( https://zhuanlan.zhihu.com/p/26799645 )

  • 新版本Create React App特性概述：不到一年前，React官方发布了Create React App这个零配置的快速创建React应用的脚手架工具；而本文则介绍了近几个月来Create React App中加入的新特性。新版的Create React App中切换到了Webpack 2，并且优化了运行时错误提示，同时还默认启用了Progressive Web Apps支持，并且引入了Jest 20、动态导入等等一系列的新特性。( https://parg.co/bkY )

  • React Native开发中的80/20定律：在构建React Native应用时，我们常常发现某些20%的投入会带来80%的产出。本文则是作者在构建了自己首个React Native应用之后的感悟，作者发现引入静态类型、通用组件以及精益部署之后，整个想法的开发速度与项目质量得到了较大地提升。( https://parg.co/bko )

  • 从零开始构建WhatsApp应用：本系列文章深入浅出地介绍了如何利用GraphQL与React Native构建类似于WhatsApp的应用Chatty。前几部分主要介绍了如何搭建基础环境、设计GraphQL Schemas、进行数据查询与交互等内容，而本文则着重于介绍如何为Chatty添加权限验证特性。( https://parg.co/bk0 )

  • 如何快速地为React站点设置A/B测试：A/B测试，或者称为分割测试，是用来随机地为用户展示网页以测试不同产品设计的反馈效果。A/B测试对提升真实应用的用户接受度非常有帮助，而本文则是介绍了如何利用react-ab-test这个工具快速地针对React站点设置A/B测试收集用户反馈信息。( https://parg.co/bkE )

  • 重构Airbnb前端架构：本文是近日Airbnb开发团队在思索重构代码库中JavaScript部分的经验总结，主要着眼于产品驱动开发以及技术沉淀、从传统的Rails架构中积攒的经验以及新的技术栈的某些特性等方面。本文首先介绍了从Rails迁移过程中的一些经验，譬如将原本完全的服务端渲染界面所需要的数据切分为了API与Non-API两大类，并且使用Hypernova来进行React服务端渲染。然后介绍了如何在应用前端通过引入懒加载与异步加载等方式提升前端性能与用户体验。( https://parg.co/bkA )

  • React Europe 2017见闻实录：本文记录了作者在第三届React Europe大会上的见闻，也是不错的窥见React生态圈现状与未来发展方向的方式。本文首先介绍了即将到来的React 16以及新的调和算法Fiber，然后介绍了一些辅助构建高质量JavaScript代码的工具，最后还讨论了基于流的按帧渲染方式。( https://parg.co/bJt )

  • 理解高阶组件：即使React新手都应该听过所谓高阶组件或者容器组件的概念，而本文则是深入浅出地介绍了React中高阶组件的概念与意义，并且以实例介绍具体的使用方式与适用场景。作者首先介绍了无状态组件与全局状态的概念，然后对比了所谓容器与展示型组件的使用场景，最后介绍了常见的高阶组件。( https://parg.co/biZ )

  • 我们为什么选择使用React生态：本文是京东金融移动研发部工程师分享的它们对于前端框架、工具与方法的选择过程中的考虑。( https://parg.co/biP )

  • hacker-news-pwas：基于不同的前端框架实现的符合PWA应用特性的Hacker News APP的合集，包括了常见的React、Angular、Vue、Preact等多个版本，并且均在Lighthouse评测中达到90以上的评分。( https://parg.co/biQ )

  • 使用Vue与NativeScript开发跨端应用：目前标准的开发NativeScript应用的方式是使用朴素的JavaScript或者Angular，而本文介绍了如何结合使用Vue与NativeScript来开发跨终端应用。本文首先阐述了Vue.js相较于React或者Angular的优势，然后阐述了使用Vue语法来开发基础NativeScript应用的步骤。( https://www.nativescript.org/blog/a-new-vue-for-nativescript )

  • 利用React Apollo减少Redux代码量：Redux为人诟病的一点就是需要大量的模板代码，而更多的代码往往也意味着更多的潜在错误与更高的维护代价。本文则介绍了如何利用Apollo来接管应用中的数据加载与呈现逻辑，从而减少Redux实现方案中加载数据生命周期中所需要的代码。( https://parg.co/bLA )

  • 九个React Native动画指南：本文通过介绍九个React Native动画地实现从零到一的介绍了React Native中的动画机制。包含了通过Animated.timing来添加样式动画、创建可伸缩的按钮、创建可拖拽的卡片、动态地变换元素的颜色、角度、序列位置等等实例。( https://parg.co/b9d )

  • 构建React组件库：本系列文章循序渐进地介绍如何设计编写自己的小型组件库并且将其发布到NPM仓库中；第一篇文章着眼于如何从零开始搭建开发环境，第二篇文章则介绍如何利用styled-components来为组件添加样式、添加调色板、构建高效开发流程以及如何实践Atomic Design原则。( https://parg.co/b9u )

  • 5个提升React Native应用性能的方法：本文作者分享了自己在过去一段时间内尝试提升公司React Native应用性能的实践经验，包括如何设置有效的性能测试、强制启动no-bind规则、使用函数式组件、重制TabMap的逻辑等等。( https://parg.co/b93 )

  • 京东618：如何配合业务打造JDReact三端融合开发平台？：良好解决多终端开发问题是提升团队开发效率的有效方法，本文全面解析了京东JDReact三端融合平台。本文首先回顾了传统无线开发的痛点，然后讨论了React Native的优势与局限，最后介绍了JDReact三端融合平台的整体架构、在功能、加载性能、内存方面的改进与优化以及发布到生产环境中的流程等内容。( https://parg.co/b9U )

  • React服务端渲染：本文循序渐进地介绍了React中服务端渲染的相关知识，首先讨论了服务端渲染相较于客户端渲染带来的优势、然后介绍了如何在React中添加服务端渲染的支持，最后还讨论了如何通过同构的高阶函数在服务端抓取数据然后显示在客户端。( https://css-tricks.com/server-side-react-rendering/ )

  • 大前端公共知识梳理：这些知识你都掌握了吗？：近年来，随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。其中特别是Web开发的领域，以单页应用为代表的富客户端应用迅速流行，各种框架理念争妍斗艳，百花竞放。Web技术的蓬勃发展也催生了一系列跨端混合开发技术，希望能够结合Web的开发便捷性与原生应用的高性能性；其中以Cordova、PWA为代表的方向致力于为Web应用尽可能添加原生体验，而以NativeScript、ReactNative、Weex为代表的利用Web技术或者理念开发原生应用。平心而论，无论哪一种开发领域或者技术，他们本质上都是进行图形用户界面(GUI)应用程序的开发，面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以MFC、Swing、WPF为主导的桌面应用程序开发时代，其术不同而道相似。( https://parg.co/byS )

  • React Express：针对目前React及其生态圈学习曲线过于陡峭的囧境，作者希望创建一个多合一的面向初学者的React技术栈学习教程，从最简单的create-react-app、npm、webpack、babel等工具的使用，到ES2015、ES2016、JSX等基础语法，最后还包括React、Redux、CSS-in-JS等工程实践。( https://github.com/dabbott/react-express )

  • Airbnb React VR实践：Airbnb自2014年以来一直使用React构建用户交互界面，并且为社区贡献了很多优秀的开源项目；而随着React VR的发布，Airbnb也利用其来快速原型化与测试VR相关的创意。本文即是介绍Airbnb在React VR实践方面的一些经验总结，本文首先阐述了React、React Native与React VR三者之间的关系与差异，然后介绍了React VR在布局、基础组件方面的语法，最后还讨论了React VR、WebVR以及VR技术本身的发展可能性。更多WebVR相关资料参考 https://parg.co/bFR。

  • 深入React动画实践：本文介绍了在React开发中多种创建动画效果的途径，包括了基于React组件状态的CSS动画、基于React组件状态的JavaScript样式动画以及第三方依赖的React Motion、Animated、Velocity-React等库。本文最后还讨论了如何用GreenSock等经典强大的动画库来辅助React组件动画开发；更多React相关资料参考 https://parg.co/bM1 。

#开源项目

  • metro-bundler：为了更好地社区支持，原react-native-packager被独立为Metro Bundler；其致力于打造具有亚秒级别的重载以及较好可扩展性的模块系统，同时它仍然是React Naive内置的开箱即用的工具。( https://github.com/facebook/metro-bundler )

  • React Flight: React Flight能够帮我们轻松地构建组件之间的过渡动画，它允许开发者定义初始状态的组件与结束状态的组件，React Flight会自动地完成组件之间的切换并且添加动画效果。

  • React Native Node: React Native Node能够在基于React Native开发的Android应用中启动后台Node.js进程，从而可以利用Node.js中的流、文件系统接口等特性来进行功能操作；React Native Node主要依靠Node.js 7.1.0版本能够被独立编译为bin_node_v710可执行文件。另一方面，尽管iOS并不支持直接运行V8，但是该项目正在致力于为ChakraCore打造类V8特性支持。

  • react-simple-maps: react-simple-maps是基于d3-geo与topojson的React地图组件库，允许开发者快捷方便地构建自定义的SVG地图；目前的特性包括了缩放、标记、自定义SVG标记、自定义着色、气泡图、动画支持等等。

  • redux-query:React/Redux中查询与管理网络状态的库：对于很多开发者而言，同步本地状态与网络状态会是一件很麻烦的事情。其中需要太多的妥协与考量，甚至于面对不同的问题需要使用不同的技术栈。而redux-query即是AmplitudeEng的工程师在实践中的总结与应用，它可以被当做基于React/Redux以及RESTful API的应用的很好的辅助工具。它允许将网络状态链入到当前的Redux Store中，并且提供了删除、乐观更新、响应缓存、删除重复等等优秀的功能。

  • react-native-offline-utils：react-native-offline-utils允许我们在React Native应用中优雅地处理离线情况，能够根据连接情况动态判断需要使用的组件渲染或者数据抓取逻辑。同时react-native-offline-utils还能够平滑地集成Redux，能够自动转发特殊的离线Action。( https://github.com/rauliyohmc/react-native-offline-utils )

  • react-pdf：在浏览器、移动端与服务端皆可适用的基于React语法的PDF文件创建工具。( https://github.com/diegomura/react-pdf )

  • Rapscallion：React服务端渲染的性能一直是广为诟病，相较于其他前端框架会满上很多，笔者在此文中也进行过简要探讨。而Rapscallion则是新的支持React服务端渲染的开源包体，它支持异步非阻塞渲染，相较于renderToString其能达到将近50%的性能提升。同时Rapscallion官方还为我们准备了基于Redis的缓存实例。( http://suo.im/3YS6pz )

  • react-native-interactable：react-native-interactable是由wix发布的用于创建高性能用户交互效果的声明式接口。典型的用户场景包括滑动式卡片、抽屉菜单、伸缩式应用头、聊天头等。( https://github.com/wix/react-native-interactable )

  • react-overdrive：非常简单易用的React应用转场动画实现库，能够在不同的页面间指定相同ID的元素，Overdrive会自动为这两个元素之间添加转场动画。( https://github.com/berzniz/react-overdrive )

  • react-perimeter：react-perimeter能够为目标元素创建隐藏的栅栏，当用户的鼠标移动到目标元素的指定范围内时会触发预设时间，譬如可以执行组件预加载等操作。( https://github.com/aweary/react-perimeter )

  • glamorous：来自PayPal的React组件的CSS-in-JS解决方案，其支持JSX语法、自定义样式组件等多种灵活的功能。( https://parg.co/b4Q )

  • React Data Grid：基于React构建的类似于Excel的网格组件，其提供了编辑、键盘导航、复制粘贴等多种功能。( https://github.com/adazzle/react-data-grid )

  • create-next-app：基于Next.js的类似于create-react-app的快速创建支持服务端渲染的React应用的命令行辅助工具。( https://open.segment.com/create-next-app )

  • Create XP App:近日，微软的Skype团队发布了基于React Native的跨平台开发框架ReactXP，而create-xp-app则是快速创建ReactXP应用的脚手架。本文则是对于create-xp-app的安装与基本使用的介绍，包括了如何运行在Web与iOS/Android等原生环境中，以及如何进行打包等内容。

  • haul：Haul是基于Webpack这样开源框架构建的react-native命令行工具的替代品，它支持从运行于开发时服务器到打包发布至生产环境等全生命周期的功能。Haul的最大特性在于允许开发者使用Webpack生态系统中各种合影的加载器与插件，并且不需要watchman等外部工具的辅助，还优化了错误提示信息。( https://github.com/callstack-io/haul )

  • react-move：方便快捷地React组件动画库，支持React、React Native以及React VR。React Move允许开发者忽略具体的动画属性控制而完全托管于框架，同时它还提供了多个生命周期中的回调函数方便开发者进行控制。( https://github.com/tannerlinsley/react-move )

延伸阅读

上一页
下一页

最近更新于2023-04-16