首页 » React Native » React Native技术周报 » 正文

React Native开发技术周报Issue#10

尊重版权,未经授权不得转载出处:http://www.lcode.org

本周报来自江清清的技术专栏,欢迎微信关注公共号:codedev123.精彩技术文章第一时间推送!

说在前面的话:React Native开发技术周报,主要会涉及React Native最新资讯,React Native教程,技术开发文章,开源项目,工具,视频等等。今天是我们的第十期,同时各位朋友有优秀的有关React Native技术开发文章可以发给我。

React Native交流5群:386216878

(一).资讯

1.React Native 0.25.1 版发布

重大变更在React Native中引用React的做法发生了变化等等,了解详情点击标题点击查看详情。

(二).技术文章

1.React Native 中 ScrollView 性能探究

ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一。理解 ScrollView 的原理,有利于写出高性能的 RN 应用。

2.React Native 移植原生 iOS 平台项目

通过本节讲解,相信大家对于正在开发的iOS原生项目就可以移植到React Native平台中来,或者采取原生加RN混合开发模式啦。

3.React Native 控件之Modal详解-Android/iOS双平台通用

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后,可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件,该可以让你使用RN开发的内功呈现在原生视图的上面。

4.在React Native中使用Redux架构

Redux架构是Flux架构的一个变形,相对于Flux,Redux的复杂性相对较低,而且最为巧妙的是React应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux也只有一个Store,而且只用一个state树来管理组件的状态。随着应用逐渐变得复杂,React将组件看成状态机的优势仿佛变成了自身的绊脚石。因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化。Redux试图让状态的变化变得可预测。

5.使用Babel和ES7创建JavaScript模块

去年,新版的JavaScript发布了,它有很多新的优点。其中之一就是导入导出模块的语法被整理为JavaScript模块处理的“唯一方法”。好吧,终于等到了。另一桩好事儿是,它的编排方式使你可以静态分析整棵模块依赖树。真是相当厉害。

6.[译] Webpack——令人困惑的地方

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。

7.【译】V8 团队眼中的 ES6、ES7及未来

今天,JavaScript 引擎发展到了一个重要的里程碑:V8 支持了 ES6 和 ES7。你可以通过安装 Chrome Canary 版本(Chrome 金丝雀版,一个比 Dev 还要更新得更快的版本 —— 译者注)使用这些新的语言特性,而这些新特性将在 Chrome 52 正式版中默认支持。

由于规范在不断演变,Web兼容性、实现一致性等各种复杂,使得决定什么特性在哪个 JavaScript 引擎版本被充分支持成为个难题。接下来我们讨论为什么引擎考虑对规范的支持相比于升级版本号要复杂得多,为什么尾调用优化到目前为止依然在讨论中,以及还有什么附加工作还在进行中。

8.React Native 中的多级界面缓存实现

该文件推荐一下,很不错的介绍了多级页面切换以及缓存

9.浅入React。组件篇-输入框、CheckBox、Radio、DropDownList

10.Code Push 热更新使用详细说明和教程

CodePush是一个微软开发的云服务器。通过它,开发者可以直接在用户的设备上部署手机应用更新。CodePush相当于一个中心仓库,开发者可以推送当前的更新(包括JS/HTML/CSS/IMAGE等)到CoduPush,然后应用将会查询是否有更新。

11.如何在ES6中管理类的私有数据

如何在ES6中管理类的私有数据?本文为你介绍四种方法:①.在类的构造函数作用域中处理私有数据成员,②遵照命名约定(例如前置下划线)标记私有属性,③.将私有数据保存在WeakMap中,④.使用Symbol作为私有属性的键

12.ReactNative 界面切换实例文章

还是根据index.android.js来改变我们的界面,这次继续借着网上的案例来看看应用中的界面跳转。我们使用到的是ReactNative中的Navigator,Navigator能够帮助我们实现界面的跳转。

13.ReactNative 和 Weex 到来后测试的思考

随着ReactNative, Weex 等框架的引入,移动app开发及测试都悄悄的发生着革命。去年完成了一个RN的app,通过对开发及测试过程的整理总结,这里主要分享下相关经验。首先简单介绍下 ReactNative 和 Weex。 从本质上讲RN 就是 React-Native, Weex 为 Vue-Native。 框架本质都为JS-Native, 通过JS-Bridge 与 OC-Bridge 之间的转化来生成想要的效果。新的框架带来新的优势,其中一个很大的优势在于 OTA升级或者伪OTA升级,更便利的即时修复bug。(在实际使用中 React-Native-Android由于国内rom的定制化及低版本rom的存在还是存在不少bug。也需要谨慎使用) 这样线上修复bug的成本降低了,那么移动测试更应该关注哪方面呢?前端?后端?还是其他?

14.一次React+Redux实践及思考

这是笔者第一次将React+Redux应用到一个较为复杂的项目中,这个项目初期遇到最大的问题是以何种粒度进行组件拆分,因为该项目没有专配的UI,所以是程序猿直接按照自己的理解进行开发,在这种情况下,笔者习惯性的先写了一个包含菜单以及常见控制项的整体项目,然后再进行拆分。

15.【React Native系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本文主要讲解两点:1.   PanResponder:触摸事件,用以获取用户手指所在屏幕的坐标(x,y)或触发、或滑动、或抬起几种事件通知。2.   Touchable:React为我们封装好的触摸组件。

16.【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础

想要学好React Native,那么函数绑定和FlexBox布局是非常必要学好的啦

17.【React Native 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解

18.React-Native系列Android——通信数据模型分析

在React-Native项目中,JavaScript语言与Native两种语言(Java或OC等)间存在着大量的数据交换,也就是所谓的通信。众所周知,移动APP对性能的要求无比苛刻,如果通信数据模型设计地不合理,很可能引起多线程下的数据安全问题,以及应用性能问题,比如内存泄漏,UI绘制缓慢等。

19.React-Native系列Android——SoLoader加载动态链接库

SoLoader是facebook出品的一款小巧的用于加载so库文件的开源项目,主要作用是自动检查和加载多个有依赖关系的so库文件。在Android平台下React-Native项目大量使用了动态链接库,即JNI技术,作为Java和JavaScript两种程序语言之间的通信桥梁。

20.从 React 的组件更新谈 Immutable 的应用

而基于 Immutable 的特性,将其应用在 React 项目的开发中非常合适,解决了 React 中的一些痛点,能进一步提升 React 组件的性能以及更好的管理组件的状态。

21.[译] Facebook:我们是如何构建第一个跨平台的 React Native APP

本文章为翻译,讲述了FaceBook是如何进行构建React Native客户端的历程。

22.[React Native] 加载 bundle 的正确姿势

本文章主要讲解了React Native的最大卖点热更新中加载bundle文件的一些优化处理方式

23.[React Native] 奇葩问题汇总

24.[React Native] 关于 setState

25.关于 ES6 中的 Class 的几个特性和玩法

①. 派生类的 constructor 必须显式定义:跟 C#、Java 等语言会默认创建调用父类构造逻辑的 constructor 不一样,ES6 的 Class 要求派生类明确写上 constructor 并在其中调用 super 函数以确保父类构造逻辑运行,②. ES6 的 Class 在声明的时候,extends 的父类可以是运算结果,于是乎,相比起静态语言,可玩的东西很多,例如通过 Higer-Order Components 的模式来实现类似 mixin 的效果:

(三).开源项目

1.React Native 实例 - BBC新闻客户端

关于React Native的实例, BBC新闻客户端. 通过访问BBC的公开网络接口, 获取新闻内容, 也可以根据类型显示. 在编写代码中, 学习RN的知识, 源码是使用ES6的规范编写, 符合Facebook的RN代码最新规范.

2.[iOS] 启发自 React 纯 Swift 函数版 UIKit 封装类库

3.React Native图标开源库

该开源项目可以让我非常便捷的在React Native中使用图标。同时项目ReadMe中也有具体安装配置,使用案例

4.开源中国Git@OSChina客户端-React Native开发

该非常具有实战意义,建议大家好好看一下,该项目和之前的React Native开发的Github Feed客户端有异曲同工之妙

5.React Native的NBA客户端

6.React Native开发的购物客户端

之前很多童鞋再问有没有购物客户端,oK,现在来了!

7.React Native  Video开源组件

现在有了这个组件,React Native就可以进行播放视频啦~

(四).视频

1.React Native热更新教程

2.ReactNative如何获取远程数据(fetch)