关于react Class组件优化问题

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

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;
阅读 2k
3 个回答

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

重写shouldComponentUpdate

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

PureComponent

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题