2019-05-25

ReactNative

4 分钟读完 (大约 637 个字)

Reat-Native拓展

腾讯微信小程序

注：手机QQ未来也预期会开放一套类似的开放平台

React Native

没有公开的文档在说明，但据打听和一些资料显示手机QQ和手机QQ浏览器都不同程度使用了 React
Native，QQ浏览器是在首页的feed流使用了RN；其中手机QQ团队应该还在自研一套动态化技术方案（柏拉图），未来会开放。

百度轻应用

百度在 2013 年百度世界大会上宣布推出“轻应用”（Light App），百度提供了配套基础设施将移动网站快速转化成轻应用。轻应用本质上是
WebApp，类似微信的公众平台，用户体验受当年手机性能的极大制约，以至于后来日渐式微。

React Native → HtmlNative

贴吧微粉2016年曾经全量采用 React Native，在去年爆发 Facebook 协议事件之后，百度内部出现了大量替代 React Native
的轮子，重写了部分涉及协议冲突的组件。目前手机百度采用 HtmlNative 方案，定制了 Webkit 的增强版。

京东-JDReact

京东采用 React Native 的定制方案 JDReact，对 React Native
的核心库做了裁剪和二次开发，搭建了后台功能支撑平台，同时结合京东的业务特点封装了包括 UI 在内的公共组件库，实现了三端融合，目前已经推广到了20多个业务。

携程-Ctrip React Native

携程采用 React Native 的定制方案 CRN（Ctrip React Native），从2016年4月份开始，携程开始小范围使用 React
Native，实现了站内信和机票低价订阅，随后开始大规模在各个 BU 推广，有超过15 个业务模块在使用，涉及页面在50个以上，据称已经达到了 85%
的双端代码复用率。

去哪儿-Qunar React Native

去哪儿采用 React Native 的定制方案 QRN（Qunar React
Native），抹平了平台差异，降低了开发成本，广泛应用于机票、酒店等核心业务，据称已经达到了 95% 的双端代码复用率。

艺龙-Enjoy React Native

艺龙采用 React Native 的定制方案 ERN，基于 web → Native 的思路，将纯 Html 标签转换为 Native
组件，从而抹平了平台差异，降低开发成本。

2019-05-25

ReactNative

6 分钟读完 (大约 965 个字)

React-Native页面优化实践

生产环境下日志输出禁用

接入babel-plugin-transform-remove-console

1	npm install babel-plugin-transform-remove-console --save-dev

配置.babelrc

// 生产环境下配置去掉console输出



 {



   ...



   "plugins": [



     ...



   ],



   "env": {"production": {



       "plugins": [["transform-remove-console", {"exclude": ["error"]}]]



   }



   }



 }

采用setNativeProps

在RN中，如果需要频繁刷新view，建议使用setNativeProps，避免使用setState导致的频繁render。

类似顶部tab的透明度渐变，就适用这种情况

官方原文建议

在（不得不）频繁刷新而又遇到了性能瓶颈的时候。
直接操作组件并不是应该经常使用的工具。一般来说只是用来创建连续的动画，同时避免渲染组件结构和同步太多视图变化所带来的大量开销。setNativeProps
是一个“简单粗暴”的方法，它直接在底层（DOM、UIView等）而不是React组件中记录state，这样会使代码逻辑难以理清。所以在使用这个方法之前，请尽量先尝试用setState
和shouldComponentUpdate方法来解决问题。

使用PureComponent或shouldComponentUpdate

PureComponent

当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM
的生成和比对过程，达到提升性能的目的。

具体原理是在shouldComponentUpdate回调中，对oldState和newState 及
oldProps和newProps进行浅比较，如不同，才return true，进而回调render。

重写shouldComponentUpdate

代码块

shouldComponentUpdate() {



      return this.state.update;



 }

控制在需要的时候才去刷新，根据需求或者业务去控制。

Android硬件加速

通过启用View的renderToHardwareTextureAndroid属性
为true，可以开启View的硬件加速。（决定这个视图是否要把它自己（以及所有的子视图）渲染到一个 GPU 上的硬件纹理中。）

在 Android
上，这对于只修改不透明度、旋转、位移、或缩放的动画和交互十分有用：在这些情况下，视图不必每次都重新绘制，显示列表也不需要重新执行。纹理可以被重用于不同的参数。负面作用是这会大量消耗显存，所以当交互/动画结束后应该把此属性设置回
false。

shouldRasterizeIOS 在iOS上有个 shouldRasterizeIOS属性，
可以设置该view在被渲染到屏幕之前，先绘制到一个位图上，这个我理解和Android中的双缓冲区比较想像。

这个属性对于不会修改组件和子视图尺寸的动画和交互十分有用。举例来说，当我们移动一个静态视图的位置的时候，预渲染允许渲染器重用一个缓存了静态视图的位图，并快速合成。

长列表加载

使用用复用性更强的FlatList或SectionList

FlatList或SectionList优化：

Item采用PureComponent或重写shouldComponentUpdate

getItemLayout如果行高是固定的，可以使用getItemLayout，避免动态测量内容尺寸的开销。

首屏进入时间优化

减少bundle包大小

图片压缩；

图片上传到图片服务器，再引用；

mrn团队的拆包策略（目前有bug）

懒加载

JS在执行import时有时很需要时间，首屏不需要展示的组件可以懒加载

代码块

import React, { Component } from 'react';



 import { TouchableOpacity, View, Text } from 'react-native';



 // 先把这个组件赋值为null



 let VeryExpensive = null;



 export default class Optimized extends Component {



   state = { needsExpensive: false };



   didPress = () = {



     if (VeryExpensive == null) {



     // 真正需要这个组件的时候才加载



       VeryExpensive = require('./VeryExpensive').default;



     }



     this.setState(() = ({



       needsExpensive: true,



     }));



   };



   render() {



     return (



       <View style={{ marginTop: 20 }}



         <TouchableOpacity onPress={this.didPress}



           <TextLoad</Text



         </TouchableOpacity



       // 根据需要判断是否渲染该组件



         {this.state.needsExpensive ? <VeryExpensive / : null}



       </View



     );



   }



 }

2019-05-25

ReactNative

15 分钟读完 (大约 2293 个字)

React-Native常用三方组件库大全

作者整理的一套常用的React
Native开发中使用到的三方组件库大全，后续也会持续更新，同学们如果发现有好用的组件但是文章中没有列出的，也请给作者留言告知组件名称，作者好将读者们反馈的组件添加到文章中，以便帮助更多的RN开发者。后续持续更新的三方组件会放到文章的开头部分，代表是新追加的组件，小伙伴们请知晓！

如果小伙伴们想学习React Native 框架的搭建以及Redux框架的学习使用，可以参考作者的开源项目OneM:
https://github.com/guangqiang-liu/OneM 记得给个star哦

当然也欢迎小伙伴们加入作者的React Native实战开发QQ交流群:620792950, 开发中遇到的问题可以在群里随意的提问，互相交流学习。