关于react Class组件优化问题

Question

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

子组件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;

Answer 1

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

Answer 2

重写shouldComponentUpdate

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

Answer 3

PureComponent