redux与context api 性能对比

说明:刚好有一个react小项目,用的redux/redux-saga来管理state。而这个项目因为体量很小,并不需要redux那么严格的数据管理,所以将这个项目改用react16.3中推出了Context API,测试测试两个项目、redux/context的性能对比。

1.项目打包后的大小对比

reduxcontext

14.7MB

13.6MB

2.store中的值,赋值1000次。所花的时间对比

(redux触发action修改值,context通过setstate修改值)

  • 通过自加赋值1000次
reduxcontext

var start = new Date().getTime()

for (let i = 0; i < 1000; i++) {
     this.props.updateOrder({num:i})
}

var end = new Date().getTime()

console.log(end-start)

var start = new Date().getTime()

for (let i = 0; i < 1000; i++) {
    saveOrder({ num:i})
}

var end = new Date().getTime()

console.log(end-start)

68,32,29,20,20,21,18,17,17,16

6,5,4,5,3,0,2,1,0,1

Action触发了1000次,所以赋值也触发了1000次

setstate先将1000个值放入一个队列中,在一个进程最后再将值set进去,所以赋值只进行了一次

  • 通过点击事件自加1000次
(function(){
    function testSpeed(){
        var start = new Date().getTime()
    	for (let i = 0; i < 1000; i++) {
        	document.getElementById("img").click()
    	}
    	var end = new Date().getTime()
        console.log(end-start)
    }
	for (let i = 0; i < 10; i++) {
    	testSpeed()
    }		
})()
 reduxcontext
图示
0109数据

4782,3976,4067,3850, 3819,

3805,3821,3830,3830,3831

6117,5743,5472,5525,5600,

6355,7316,6376,6480,9076

0110数据

4353,3910,3814,3810, 4023,

3759,3801,3734,3776,3753

4572,3958,4211,3907,3876,

3926,3872,3857,3882,3881

备注

Action触发了1000次,所以赋值也触发了1000次

因为点击事件是一个独立的进程,所以setstate也进行了1000次

可以发现,redux与context的性能对比,其实也变成了 派发action与setState之间的性能对比。只要在进程中合理setState,context的性能、项目打包后的大小,是略优于redux的。

总结:

1.如果项目体量较小,只是需要一个公共的store存储state,而不讲究使用action来管理state,那context完全可以胜任。反之,则是redux的优点。

2.context的缺点:因为没有了action,state的值都是被直接修改,state的数据安全性不及redux。同时也不能使用redux的中间件,比如thunk/saga,在一些异步的情况需要自己来处理。

3.想到更好的性能测试对比的方法,再来补充。

 

参考:https://www.codeproject.com/Articles/1253589/Redux-vs-The-React-Context-API

 

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页