react性能优化的方法

react性能优化的6中方法:
1.避免使用内联函数。每次render渲染时,都会创建一个新的函数实例,应该在组件内部创建一个函数,讲事件绑定到函数,这样每次调用render时,就不会创建单独的函数实例。
2.使用react fragement 避免额外标记。用户创建新组件时,每个组件应具有单个父标签,父级不能有两个标签。所以顶部要有一个公共标签,所以经常在组件顶部添加额外标签div,这个div标签充当父标签意外,没有其他作用,这个时候可以使用fragement,它不会向组件引入任何的额外标记,但是可以作为父级标签。
3.使用immutable。在react中使用immutablr能够带来性能优化,主要体现在减少渲染的次数,为了避免重复渲染,会在shouldComponentUpdate()中做对比,当返回true,执行render方法。immutable通过is方法完成对比。
 4.事件绑定方式,从性能考虑,在render方法中使用bind和箭头函数,都会生成新的方法实例,在constructer中欧给使用bind和箭头函数,性能提高
5.服务端渲染,可以使用户更快的看到显然成功的页面,服务端渲染可以起一个node服务,可以使用express。koa等,调用react的renderToString方法,将跟组件渲染成字符串,再输出到相应中
6.组件拆分,合理使用hooks

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值