码迷,mamicode.com
首页 > 其他好文 > 详细

React中的性能优化

时间:2020-02-26 01:37:44      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:date   作用   组件开发   高性能   频率   this   NPU   hang   inpu   

1. 作用域的修改放在constructor中

  constructor (props) {
    super(props)
    // 当组件的state或者props发生改变的的时候,render函数就是重新执行
    this.state = {
      inputValue: '',
      list: []
    }
    // 将this指向放在constructor中执行,在复杂的组件开发中节约性能
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnChange = this.handleBtnChange.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

2. setState异步函数

setState内置了性能优化的机制,它是一个异步函数,可以把多次的数据改变结合成一次来做,这样的话降低虚拟DOM的对比频率,来提高性能

3.虚拟DOM

React底层运用了虚拟DOM,他还有同层比对,key值的调用,来提升虚拟DOM的比对速度,从而提升React的性能

4.借助shouldComponentUpdate生命周期函数

避免无谓的组件的render函数的运行

React中的性能优化

标签:date   作用   组件开发   高性能   频率   this   NPU   hang   inpu   

原文地址:https://www.cnblogs.com/nayek/p/12364737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!