概述
众所周知,在现在的前端技术开发栈中,跨平台开发是一个重要的课题,不管是老牌的 Hybird 还是最近流行的 RN、Weex 还是 Flutter,不得不说,现在前端和客户端的界限越来越模糊。
最近在写《React Native 跨平台开发进阶》一书,也是对之前的《React Native 移动跨平台开发实战》的升级(ps,由于之前的写作功底较浅,所以写的并不是很好)。最近,RN 发布了 0.59.x 系列版本,可以发现上层设计出现了比较大的调整,经过体验之后,就想聊聊 RN 新版本的升级体验和新特性。
相信从事移动开发的同学都清楚,最近两三年来,跨平台开发的技术可以说是越来越盛行,前端和客户端的界限也越来越模糊。我对 RN 的认识是 2016 年携程的一次技术分享,当时只是觉得使用 js 来写客户端很快,虽然当时的性能并不是很好,抱着拥抱新技术的态度,我在跨平台的方向上也越走越远、越走越深。
曾经,Aribnb 的“为什么 Airbnb 放弃了 React Native”让我一度怀疑 RN 是不是要凉凉了,不过好在 Facebook 并没有放弃 RN,甚至官宣《Facebook 正在重构 React Native,将重写大量底层》,虽然重构后的 RN 还没有对外发布,但是可以遇见,重构后的 RN 将变得越来越好。
最近,Facebook 更新了最新版本 0.59.4,新版本主要更新了以下新特性:1、减轻了 React-Native 自身框架,将 webView、viewPager、netinfo、async-storage 等内置包拆分,通过社区独立维护,并逐步模糊 React 和 React-Native 的界限。2、更新 JavaScriptCore、upgrade 和 CLI 工具。3、支持 React Hooks。4、修复了 FlatList 等列表控件中的诸多问题。
按照这一趋势,未来 React Native 还将在以下方便加大力度:1、减轻 JSBridge 的依赖。2、通过 Fabric UI 架构,将 Shadow 层、UIManager、NativeModule 从 Java 移到 C++ 中,从而支持 双向的同步和异步渲染与调用。
关于这方面的精简的知识,大家可以参考京东的《庖丁解牛!深入剖析 React Native 下一代架构重构》和携程的《携程开源 RN 开发框架 CRN》
新特性
在 0.59.0 版本发布以来,RN 最近都在经历小版本的迭代,最近的版本为 0.59.4。在 0.59.x 版本中主要有一些新的功能和特性:
React Hooks
React Hooks 是此版本的一部分,它允许跨组件重用有状态逻辑。Hooks 的内容可以参考下面的内容:Introducing Hooks:解释了为什么在 React 添加 Hook。Hooks at a Glance:对内置 Hooks 的快速预览。Building Your Own Hooks:演示了使用自定义 Hooks 重用代码。[**]Making Sense of React Hooks](medium.com/@dan_abramo…):探索了 Hooks 解锁的新可能性。useHooks.com:展示社区维护的 Hooks 清单和 demo。
JavaScriptCore
React Native 使用新的 JSC(JavaScriptCore)为应用程序提供支持。众所周知,Android 上的 JSC 已经存在了几年,这意味着很多现代 JavaScript 功能都不受支持。更糟糕的是,与 iOS 的现代 JSC 相比,它表现不佳。随着这个版本的发布,Android 的 JSC 将带来革命性的改变。并且在 @DanielZlotin,@ dulmandakh,@ gengjiawen,@kmagiera 和 @kudo 等大神的努力下,Android 的 JSC 还将支持 64 位芯片,同时性能也大幅改进。
更快的启动与内联需求
新版本带来了更高的性能,因此应用的启动速度更快,这是因为新版本允许开发者根据需要加载资源。此功能称为“内联需求”(inline requires),因为它允许 Metro 识别延迟加载的组件。并且具有深入和多样化组件架构的应用程序将获得最大的改进。
当升级到 0.59.0 版本时,工程会有一个新的 metro.config.js 文件;将选项设置为 true 并向我们提供反馈!更多信息可以参考文档 Performance。
精简核心库
React Native 重构的重要内容就是精简核心库,对于一些非核心的组件和内容,React Native 会将其作为插件包方式进行隔离。
众所周知,React Native 是一个庞大而复杂的项目,具有复杂的 repository,为了加快应用的启动速度,精简核心库是我们所做的一些努力,通过将代码迁移到单独的库以更好地管理来解决这些问题。
改进的 Cli
React Native 的命令行工具是开发人员进入生态系统的入口点,但它们长期存在问题并且缺乏官方支持。新版本的 Cli 脚手架 工具已移至新的 repository,由一组专门的维护人员进行维护和开发。
React Hooks
此次版本,让我最感兴趣的就是 React Hooks。具体来说,React Hooks 是前端的技术,但是 React Native 也支持 React Hooks,可以说 FaceBook 是在模糊 React 和 React Native 的界限,未来这二者的区别将越来越小。
所谓 React Hooks,就是在 react 函数组件中,也可以使用类组件(classes components)的 state 和 组件生命周期,而不需要在 mixin、函数组件、HOC 组件和 render props 之间来回切换,使得函数组件的功能更加实在,更加方便我们在业务中实现业务逻辑代码的分离和组件的复用。
事实上,设计 React Hooks 是为了解决以下几个问题:
很难复用逻辑(只能用 HOC,或者 render props),会导致组件树层级很深;
会产生巨大的组件(指很多代码必须写在类里面);
类组件很难理解,比如方法需要 bind,this 指向不明确。
…
并且,React Hooks 确实有着明显的优势:
可以更好的减少代码量;
同时降低代码在生命周期执行过程中造成的阻塞;
自定义 Hooks 可以在一定程度上解耦,增加复用,减少嵌套;
函数式编程的风格让函数功能独立,代码简洁更好阅读。
具体来说,在 React Native 新版本中,React Hooks 提供了以下几个最常用默认接口:useState:在函数中快速添加状态;useEffect:快速添加生命周期处理;useImperativeHandle:快速对外暴露接口
借用 React Hooks,开发者可以在一定程度上节省大量的代码,并且提供清晰的状态管理逻辑。例如:
import React, {Component, useReducer, useRef, useImperativeHandle, forwardRef} from ‘react’;
import {Text, View, TouchableOpacity,} from ‘react-native’;
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case ‘reset’:
return initialState;
case ‘increment’:
return {count: state.count + 1};
case ‘decrement’:
return {count: state.count – 1};
default:
return state;
}
}
export function DemoCounter({initialCount}) {
const [state, dispatch] = useReducer(reducer, {count: initialCount});
return (
<View>
<Text>Count: {state.count}</Text>
<TouchableOpacity onPress={() => dispatch({type: ‘reset’})}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => dispatch({type: ‘increment’})}>
<Text>+</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => dispatch({type: ‘decrement’})}>
<Text>-</Text>
</TouchableOpacity>
</View>
)
}
由于 Hooks 内部利用了数组来实现状态数据的顺序更新,所以使用 Hooks 时不能在循环或者条件判断中使用。因为 Hooks 内的数组每次都是顺序的调用的,如果在条件判断中打乱了顺序,将导致游标无法匹配到正确的数据,所以约定了不要在 if 或者 for 中使用 useState 等行为。
由于 React Hooks 是一个新的内容,我对 React Hook 理解也不是很深入,具体可以参考 React Hooks 官网或者深入理解 React Hooks。
参考:React HooksFacebook 正在重构 React Native,将重写大量底层庖丁解牛!深入剖析 React Native 下一代架构重构携程开源 RN 开发框架 CRN