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

Question

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

例如，App 的状态作为 prop 直接传递给 Column 组件，但 Column 是 Table 的子组件，而 Table 的 ShouldComponentUpdate 设置为 false(例如，表数据没有更改) ..)。

问题..如果应用程序状态更改，列组件不会更新..除非在表组件上将 ShouldComponentUpdate 设置为 true ..是否有解决办法？

文档确实说

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

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

出于测试目的，我在这里创建了一个演示 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

考虑一个解决方案，您设置默认状态加载和更新状态，其中与您的表进行交互，将“color-whateveryoulike”类附加到您的列。在这种情况下， Prop 不会为您提供帮助，因为我们从不想更新 Prop ，您想要监听状态更新。