如何*不*在数据未更改时更新功能组件

Question

所以我有一个反应应用程序，其中根组件是基于类的，并保持状态如下：

this.state = {
    dataA: { //stuff here},
    dataB: { //stuff here}
}

其中dataA传递给子功能组件A，dataB传递给子功能组件B.

但是每当我this.setState({dataA: { new state A cotnent }})时，组件B也会在其数据未被更改时得到更新。

由于组件B是一个功能组件，我无法实现shouldComponentUpdate方法。只有当dataA发生变化时，有没有办法不渲染组件B？谢谢！

Answer 1

这是不可能的，因为功能组件在接收道具或状态时总是会重新渲染，即使值没有改变。

相反，我建议将子函数从功能组件转换为PureComponent的子类，它实现PureComponents浅层比较道具和状态。请注意，PureComponents的所有子项也应为shouldComponentUpdate，如果这些条件过于严格，您应自行在Component的子类中实现public function my_first($key = null) { return $key ?: request('key'); } public function my_second() { $key = 'Value'; return 'Info from first: ' . $this->my_first($key); } 。