18910140161

关于react Class组件优化问题

顺晟科技

2021-07-09 11:25:15

51

场景:我有个父组件里面嵌套了很多的子组件,所有的子组件的数据都是由父组件掌控;如图:

image.png

子组件B有个输入框我需要在输入的时候同步到父组件;问题就是 每次数据发生变化子组件都会渲染 不管A组件或者C组件的数据有没有变化 请问一下有没有可优化的方法

换句话说:有没有一种方案可以让 state的某一个值【引用类型】改变、所依赖的其他的值不做渲染;比如:

import React,{ Component } from 'react'

class ParentComponent extends Component {
  constructor (props){
    super(props)

    this.state = {
      demo1:{   // 我只改变了demo1, 那么依赖的demo2数据所依赖的组件可否不渲染
        ..
      },
      demo2:{
        ...
      }
    }
  }
}

export default ParentComponent;

子组件里面通过 shouldComponentUpdate 方法去监听数据是否发生变化,数据变化了则返回true表示需要渲染,没变化则返回false表示无需渲染

重写shouldComponentUpdate

引用类型也可以根据每个组件写自己需要的 shouldComponentUpdate 判断逻辑。 当然也可以考虑下是不是数据结构是不是有问题。

PureComponent

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航