ShouldComponentUpdate 设置为 false 如果 props 改变，子组件不更新

Question

我的目标是渲染一个子组件而不重新渲染它的父组件。

因此，例如，App 的状态作为道具直接传递给 Column 组件，但 Column 是 Table 的子项并且 Table 已将 ShouldComponentUpdate 设置为 false（例如, table 数据没有改变..）。

问题..如果 Apps 状态改变，Column 组件不会更新.. 除非 ShouldComponentUpdate 在 Table 组件上设置为 true.. 有没有关于这个？

文档确实说

Returning false does not prevent child components from re-rendering when their state changes.

但没有提及他们的道具是否改变..

出于测试目的，我在这里创建了一个演示 https://codesandbox.io/s/k2072rkp7o

代码预览：

const Column = ({ isSelected, onClick, children }) => (
  <div 
    style={{
      backgroundColor: isSelected ? 'green' : 'red',
      padding: '10px',
    }}
    onClick={onClick}
  >

    Column: {children}

  </div>
);

const Row = ({children }) => (
  <div 
    style={{
      backgroundColor: 'teal',
      padding: '10px'
    }}
  >

    Row {children}

  </div>
)


class Table extends React.Component {

  shouldComponentUpdate() {
    // There will be logic here to compare table data to see if its changed..
    return false
  }

  render() {

    return (
      <div 
        style={{
        backgroundColor: '#ccc',
        padding: '10px'
      }}>

      Table {this.props.children}

    </div>
    )
  }
}


class App extends React.Component {

  constructor() {
    super();
    this.state = {
      isSelected: false
    };
  }

  render() {

    return (
      <Table>

        <Row>
          <Column
            isSelected={this.state.isSelected}
            onClick={() => this.setState({
              isSelected: !this.state.isSelected
            })}
          />
        </Row>

      </Table>
    )
  }
}

Answer 1

考虑一个解决方案，在该解决方案中，您设置默认状态加载并更新状态，其中与您的 table 交互，将 'color-whateveryoulike' class 附加到您的列。在这种情况下道具不会帮助你，因为我们永远不想更新道具，你想要听状态更新。

Answer 2

您可以使用 Table 组件作为 PureComponent，并且 PureComponent 内部会检查更改。

只需将 class Table extends React.Component 更改为 class Table extends React.PureComponent，然后删除

shouldComponentUpdate() {
    // There will be logic here to compare table data to see if its changed..
    return false
  }

因为，正如我所说，PureComponent 在内部执行此操作。阅读更多信息：PureComponent 但不要总是使用它，因为如果过度使用不必要的东西，它可能会产生副作用，使您的应用程序变慢。

Answer 3

好吧，经过更多的阅读，这是不可能的......当你在玩 tables 并且想要将样式应用于单元格组件而不导致重新渲染时，这是不好的整个 table... 将不得不研究替代方案...

这里是任何有同样问题的人的组件生命周期..

ShouldComponentUpdate 设置为 false 如果 props 改变，子组件不更新

ShouldComponentUpdate is set to false child components do not update if props change

lifecycle

reactjs

react-lifecycle