本文共 1846 字,大约阅读时间需要 6 分钟。
防抖和节流是前端性能优化的常用手段,在 React Native 中同样非常适用。尤其要是追求媲美原生的极致体验,那就更不可少了。
React Native 中的滚动条组件(ScrollView, ListView, FlatList, SectionList等)都提供了节流的功能,只需设置 scrollEventThrottle
属性
scrollEventThrottle 属性说明:将控制滚动时滚动事件触发的频率(以毫秒为单位的时间间隔)。
较小的数字
会为跟踪滚动位置的代码提供更高的准确性,但由于通过桥接层发送的数据量过大会导致滚动性能问题。JS 运行循环同步到屏幕刷新率时,不会注意到 1-16 之间的值有所不同。如果不需要精确的滚动位置跟踪,请将此值设置得较高以限制通过桥接层发送的数据量。默认值为零,这会导致每次滚动视图时滚动事件仅发送一次。(值越小越精确,如果追求动画效果需要设置 1 - 16,使用 1 可以确保不会遗漏任何事件,滚动位置取值精确;使用 16 1000ms/60fps= 16ms 最佳效果,每秒钟刷新 60 次
)
debounce
: 防抖函数,控制一个函数在触发的指定周期内只允许调用一次;throttle
: 在函数持续执行过程中减少执行的频率;目前 lodash 是比较流行的函数库,它对防抖和节流封装的非常好。以 lodash 函数库为例。
首先需求安装 代码库:npm i -S lodash
导入函数:
// 可以采用不同的加载方式// 解构方式导入 debounce, throttle,会加载整个函数库,如果项目中大量使用 lodash 函数这样导入很方便import {debounce, throttle} from 'lodash';// 只导入防抖和节流函数,这样可以减少代码体积,lodash 其它函数不会被打包import debounce from 'lodash/debounce';import throttle from 'lodash/throttle';
具体的用法很简单,debounce/throttle 用法一样,throttle 就是使用 debounce 实现的,一般情况只传两个参数即可:
func (Function): 需要限制的函数
[wait=0] (number): 需要延迟的毫秒数
[options={}] (Object): 其它选项(可以不传)
在必要的地方使用 debounce/throttle 封装一下函数即可:
{ this.handlePress(); }, 200, {leading: false, trailing: true}/* 默认值 */).bind(this)} > { this.handlePress(); }, 200, {leading: true, trailing: true}/* 默认值 */).bind(this)} >
转载地址:http://ssgni.baihongyu.com/