requestAnimationFrame,这个方法应该都不陌生,字面含义是请求动画帧。从API命名来看,和动画有着密切的关系。其用法跟setTimeout差不多,与setTimeout相比,最大的优势是由浏览器来决定函数的执行时机。形象一点的解释就是:告诉浏览器说 “我这里有一个函数要执行,你有空了帮忙执行一下”,然后浏览器相对比较空闲的时候就给执行了。

用法一:动画

raf api本身的设计就是用来解决js动画的性能问题。那么,为什么raf做动画性能会更好呢?主要原因在于raf更加智能,它并非加快执行速度,而是适当时候降帧,防止并解决丢帧问题。当它发现无法维持60fps的频率时,它会把频率降低到30fps来保持帧数的稳定。也就是说如果上一次raf的回调执行时间过长,那么触发下一次raf回调的时间就会缩短,反之亦然,这也是为什么说由浏览器来决定执行时机性能会更好。

(function animloop(){

阅读全文——共1903字

1. 异步逐层渲染。

React Native 虽然一直标榜媲美Native的体验,但实际使用下来,其渲染性还是非常低效,基于ScrollView和ListView两大容器,在渲染上,相当于web端的table布局,需要等整个大table渲染完成才显示页面,也就是说,当容器内有大量的子元素,其白屏时间会非常长。

如何让React Native做到像web端边渲染边加载?可以采用异步渲染的方式,使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。

基于这个原理,写了个逐层渲染的组件:react-progressive

2. 实现shouldComponentUpdate方法

阅读全文——共1327字

在前面2篇文章中介绍了Show paint rectangles和show composited layer borders两个选项的作用。今天接着讲下一个:show FPS meter

show FPS meter

show fps meter可以理解为显示FPS帧频/帧数。开启这个选项后,右上角会实时显示当前页面的FPS。

先简单科普一下啥是FPS。FPS全称叫 Frames Per Second (每秒帧数)。帧数越高,动画显示的越流畅。一般的液晶显示器的刷新频率也就是 60HZ。也就是说,要想页面上的交互效果及动画流畅。那么FPS稳定在60左右,是最佳的体验。。据悉 ios上的交互效果都是60FPS呢。

记得以前做Flash游戏的时候,FPS帧数是游戏流畅度的一个重要指标。在web端,道理也是一样。

阅读全文——共495字

React Native 刚出来不久,写过一篇react-native 组件间通信的文章,里面介绍了组件间三种关系的相互通信。用了一段时间下来,感觉React Native 这套组件间传递数据的方法,实施起来特别麻烦,并且不利于解耦。

翻看React Native的文档,并没有看到实现组件间消息机制的方法。但在源码里,找到了相关的实现。

EventEmitter

RCTDeviceEventEmitter

阅读全文——共1819字

今天本博的阿里云服务器过期了。早上起来续费,发现要2k大洋。想想心疼啊,博客日访问量不超200UV,搞个大宽带,着实浪费。

续费时,就选了流量按需收费,0.8元/G。为了节省带宽,想到了用七牛云存储来保存及加速图片。

于是,在七牛上注册了账户,并安装了水煮鱼的七牛镜像存储插件

整个过程一切顺利,图片成功转换为七牛图片了。但发现文章里的代码片段无法显示了。而我使用的是SyntaxHighlighter插件来高亮代码,于是我判断应该是七牛镜像存储插件与SyntaxHighlighter插件冲突。

google了一番,发现没有解决方案,莫非同时安装这2个插件的人太少?泥煤啊。

阅读全文——共1377字

距离这个专题的上一篇《Chrome渲染分析之Rendering工具使用(1)》已经隔了一年多了,迟迟没有下笔,囧!

2.show composited layer borders

中文可翻译为:显示层的组合边界。

我们知道,在页面最终是由多个“图层”渲染而成。勾上这个选项,页面上的“layer(层)”会加上一个黄色的边框显示出来,如下图的天猫首页头部所示:

阅读全文——共1825字

React Native中,ScrollView组件可以使用stickyHeaderIndices轻松实现sticky效果。

而使用ListView组件时,使用stickyHeaderIndices则不生效。

在IOS中的ListView的内部结构,实际是由多个Section组成,最典型的案例就是iphone手机的通讯录,滚动时每个section header会吸顶。

而在web端,使用position : -weblit-sticky实现的吸顶效果,也是类似的原理。具体可以看下之前的文章:《position:sticky 使用条件分析》.

好了,废话不多。在ListView中实现sticky,需要使用cloneWithRowsAndSections 方法,将dataBlob(object),sectionIDs (array),rowIDs (array) 三个值传进去即可。

阅读全文——共1572字

说明:公司项目尚未开源,本文仅阐述实现方案,不涉及具体技术实现细节,见谅。

===============正文分割线=============

前言

Facebook发布React Native 已有两个多月,从开源初期我们就开始筹划的React Web终于也有了一个V1版本。在这次618大促的两个主会场中落地,实现了React Native代码到web的转换。

React Web的目的及意义非常明确: 让React Native代码跑在Web上让一套代码运行在各个移动终端,对前端及业务来说,这是开发效率中一个质的提升。在项目初期,我们也曾向 React团队咨询过类似的问题,他们团队的核心同学 @vjeux 也认为这是非常酷的事情,也是他们未来想做的事情。也许在发布React Native for Android的时候,也会发布React Web也说不定。(YY一下)

阅读全文——共3599字

11月8日更新:

红杏目前挂了有一段时间,估计很难恢复,目前正在使用的是:土行孙 。 已经使用一个多月了,目前来看,还是非常稳定的。只是价格略贵,要30块一个月。

用着比较省心,不会出现掉线、网络差的情况。建议月付。

========================

目前在用的2个翻墙收费工具:

阅读全文——共582字

react native 中,组件间通信无非3种情况:

以DEMO为例,有2个组件Input和 ShowText 。

1、组件嵌套,即Input是ShowText的子组件,在组件间通信可以通过state进行。

2、组件为同级关系,即Input和ShowText都属于页面级别内的组件,这是常见的组件间通信,可各自提供接口进行通信,利用props进行

3、除了以上2种的关系外的组件,比如Input在一个Container组件内,页面级别只有2个组件Container和ShowText。这种情况下,可创建一个全局的通信类。在react-native的2014 example 中 都有这样的代码,这里就不再贴代码了。

阅读全文——共2620字

前2周,fackbook发布了react-native , 一时间前端界异常兴奋。各种概念飞满天,俺作为前端一份子,也凑凑热闹。

花了2天时间,边看API边写代码,react-native 真是太新了,好多问题都google不到内容,来来去去都是官方文档,这2天下来,也算摸清了react-native的一些用法。

DEMO地址:https://github.com/hugohua/react-native-demo  以后又可以催逼自己会ios开发,哈哈。

过两天再写点经验贴吧。先贴个readme来凑凑字数。

React Native Demo

阅读全文——共1686字