shouldComponentUpdateがfalseに設定されている子コンポーネントは、小道具が変更されても更新されません

私の目標は、親コンポーネントを再レンダリングせずに子コンポーネントをレンダリングすることです。

したがって、たとえば、アプリの状態は小道具として直接Columnコンポーネントに渡されますが、ColumnはTableの子であり、TableはShouldComponentUpdatefalseに設定されています（たとえば、テーブルデータは変更されませんでした）。

問題..アプリの状態が変更された場合、列コンポーネントは更新されません..テーブルコンポーネントでにShouldComponentUpdate設定さtrueれていない限り..これを回避する方法はありますか？

ドキュメントには

falseを返しても、状態が変化したときに子コンポーネントが再レンダリングされるのを防ぐことはできません。

しかし、彼らの小道具が変わるかどうかについては言及していません。

テスト目的で、ここにデモを作成しました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>
    )
  }
}