React Native开发技术周报第十九期-热荐Reading作者曹大大录制的入门到实战****

Z时代
2024-01-10
分类：综合

react

阅读本文大约需要3分钟

一.资讯

1.React Native 0.31.0版本发布

2.[推荐]React Native 0.31 Bundle 预加载优化

使用 React Native 开发混合应用的过程中，我们在打完 bundle 进 release 包后，会发现第一次进入页面（React 的 Activity）会有一个短暂的白屏过程（在真机上近 1秒，在模拟器上比较快，在 200毫秒左右），而且在完全退出后再进入，仍然会有这个白屏。

仔细查看加载过程（其实猜猜都能知道）后可以发现，这个过程就是在加载我们的 js bundle，通常即便是一个小的 RN 应用（混合应用中的子业务），也会动辄到 1MB 的大小，除非是完整的 RN 应用，可以把这个当做是启动速度，否则这样的加载速度都是对用户体验的很大伤害。于是我们决定进行 Bundle 预加载的优化。

3.从零开始的Android新项目10 - React Native & Redux

本篇来讲讲 React Native 和 Redux，和其他一上来就啪啪啪丢上来一堆翻译的东西不同，本文会从简单的例子入手，让大家能快速地明白 React Native 是什么，Redux 和常见的 MVC、MVP 等有什么区别，怎么去组织一个 Redux 架构的 React Native 项目。

4.Weex & React Native对比

阿里大神多角度进行Weex和React Native的分析对比。

二.技术文章

1.[React Native专题]初探:Redux的基本使用方式-炒鸡清晰

本文主要通过一个实例演示Redux的基本使用,力求让读者最快使用。

2.《一起学》安卓React Native开发--踩坑大全（持续更新...）

这本文章主要记录在React Native Android开发过程中遇到的坑或者疑难杂症问题解决方案整理。

3.React Native 从入门到原理

本文分为两个部分：上半部分用通俗的语言解释了相关的名词，重点介绍 React Native 出现的背景和试图解决的问题。适合新手对 React Native 形成初步了解。下半部分则通过源码（0.27 版本）分析 React Native 的工作原理，适合深入学习理解 React Native 的运行机制。最后则是我个人对 React Native 的分析与前景判断。

4.React开发中关于this的那些事儿

在React开发的这半年以来，关于this以及es6中方法的书写及其使用多多少少出现一些问题，期间也在Evernote上做过一些阶段性的总结，但陆续有遇到一些问题。

在es5中, 普通用function声明的函数是定义在window对象上的，显而易见其内部的this肯定是默认指向window对象。而直接用函数名来调用得到的函数内this也是window对象。可以这么理解，那个看不见的调用者就是window

在es6中，为了规范function中this的所属问题，在使用‘use strict’模式下，不显示地用window对象调用函数则其内部的this为undefined，也就是强制你使用window对象严格得去调用。

5.React: ES5 (createClass) 还是 ES6 (class)? (译)

6.Autobinding, React和ES6中的class (译)

7.[React Native实战-嘎嘎商城]之商家详情界面布局分析与实现

8.选择 React 是商业问题而不是技术问题

React 在开发者中很流行，有很多文献都在强调其优点。然而，迁移（或者选择）到一个新的框架最终要说服每个人——包括非开发者。很少有项目经理会仅仅因为是新的东西就同意重写整个项目，更糟糕的是，许多组织倍受纷乱繁杂的 JavaScript 工具的煎熬，在进步的同时也会有部分退步。本文不会讨论关于 React 的新的东西，而是教你尝试在规划期间如何说服所有持异议的人。

9.React高级性能优化

当大家考虑在项目中使用 React 的时候，第一个问题往往是他们的应用的速度和响应是否能和非 React 版一样，每当状态改变的时候就重新渲染组件的整个子树，让大家怀疑这会不会对性能造成负面影响。React 用了一些黑科技来减少 UI 更新需要的花费较大的 DOM 操作。

10.React-Native项目中使用TabBar

11.[React Native实战-嘎嘎商城]之轻松实现Tab底部菜单导航栏切换效果-Android/iOS双适配

React Native嘎嘎商城实战项目,主界面是比较常见的Tab菜单切换的效果。React Native官方也给我们提供了这样的组件TabBariOS以及TabBariOS.Item。但是该只适合于iOS版本，但是Android版本需要自己写，最近正好在Github上面看到一个Android和iOS通用的Tab菜单导航切换库。所以本商城项目中采用这个库来实现了。

12.[React Native实战-嘎嘎商城]之仿快递时间轴布局实现(订单状态)

主要跟大家讲解一下订单状态或者快递效果的时间轴的功能实现。

13.React Native学习1——前奏，app插件化和热更新的探索

14.React Native学习2——客户端开发者的一些准备工作

15.React Native 开发小Tips

相信好多写React Native的都是前端出身，当然遇见问题的，也很多时候会想从前端出发，但由于React Native本身的限制，并不是支持足够多的属性和样式，所以Bo主结合自己的开发实践,并总结了一些将来开发可能会遇见的问题并给出一些小的代码参考。

16. React Native调试技巧与心得

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。

17.JavaScript 异步进化史

JS 中最基础的异步调用方式是 callback，它将回调函数 callback 传给异步 API，由浏览器或 Node 在异步完成后，通知 JS 引擎调用 callback。对于简单的异步操作，用 callback 实现，是够用的。但随着复杂交互页面和 Node 出现，callback 方案的弊端开始浮现出来。 Promise 规范孕育而生，并被纳入 ES6 的规范中。后来 ES7 又在 Promise 的基础上将 async 函数纳入标准。此为 JavaScript 异步进化史。

18.如何让异步接口同时支持 callback 和 promise

19.react-native 开始走向mobile开发

20.React Native学习3——集成进现有原生项目

21.React Native实践一: 如何优雅的在已有项目中接入React Native

22.React-Native-For-Android图片热更新

针对图片显示，详解图片热部署方案

23.React Native等比放大不丢失图片

本文主要讲解图片等比缩放的效果实现

三.开源项目

1.React Native开源项目-云翻译客户端

项目内容:试图打造一个码农专用的开源翻译工具,期待有志同道合的人一起实现这个想法,应用移动端采用的React-Native技术完成(IOS平台兼容待完善),服务端使用的是LeanCloud提供的服务,云引擎采用Node.js实现。

2.React Native开源项目-嘎嘎商城客户端(持续更新中)

基于React Native 实现的嘎嘎商城客户端，暂时只是适配Android版本，暂时大部分布局页面正在开发中，业务逻辑功能以及iOS版本适配会后面进行。当前的商城客户端后期会继续开发商品点单，订单，购物车，支付，商品列表以及详情，搜索功能，定位切换，国际化多语言切换，第三方账号登录以及分享等相关功能。也欢迎广大开发者多提建议。项目继续更新中。

3.开源库:React-Native-ViewPager

适配Android和iOS双版本的广告轮播，导航Tab库

四.工具

1.React Native IDE - nuclide

React Native开发IDE,Nuclide的使用详解。

2.如何把 Sublime 变身为 JavaScript 编辑器

Sublime 是一款非常流行并且强大的文本编辑工具，除了它提供的基础功能，它还支持第三方插件，配置适合我们工作流的插件可以让使用 Sublime 的时候更加舒服。

3.一个前端程序猿的Sublime Text3的自我修养

五.****

1.新美大旅游事业部Reading项目作者大大录制的React Native****

大大课程非常不错，把实际开发过程中的一些坑或者经验进行分享给大家,视频包括内容:填坑,组件封装,redux讲解,架构演进,热更新,F8App项目分析,源码原理分析等重点专题分享。

2.李宁老师录制的《完全征服React Native视频课程》