性能优化的很大一个点就是避免组件重复渲染。
在react中有很多统计组件重复渲染的工具，但是react-native中经常不能使用。
所以此处介绍一种自己统计渲染次数的方法
实现思路：
通过给组件的某个方法添加修饰器，统计该方法的调用次数。
弊端：
方法的调用次数，需要reload代码后，才会重新技术。原因是修饰器是编译阶段就替换了目标方法，所以统计次数的变量，此时初始化完成。除非reload代码，不然该变量不会重置。
修饰器代码：
export function callTimes(target, name, descriptor) {
if (!target) {
return;
}
if (!target.constructor) {
return;
}
// 保存旧的方法
const oldValue = descriptor.value;
let times = 0;
descriptor.value = function() {
// 输出日志
// eslint-disable-next-line no-console
console.log(`[${target.constructor.name}] Calling [${name}] times:`, ++times);
return oldValue.apply(this, arguments);
};
return descriptor;
}
使用：
export default class Example extends PureComponent {
state = { num: 0 };
componentDidMount() {
this.load();
}
load = async () => {
const res = await this.requestData();
this.setState({ num: res });
};
requestData = () => {};
@callTimes
render() {
const { num } = this.state;
return (
<View>
<Text> textInComponent {num} </Text>
</View>
);
}
}
然后打开debug模式在chrome查看日志即可。
参考资料：
js修饰器及其实际用途
