4

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

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

问题..如果应用程序状态发生变化，列组件不会更新..除非在表组件上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>
    )
  }
}
4

3 回答 3

1

考虑一个解决方案，您正在设置默认状态 onload 并更新与您的表交互的状态，将“color-whateveryoulike”类附加到您的列。在这种情况下，道具不会帮助你，因为我们从不想更新道具，你想监听状态更新。

于 2018-01-08T16:12:31.890 回答
0

U 可以使用 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 但不要总是使用它，因为如果习惯于不必要的事情，它可能会降低您的应用程序的速度。

于 2018-01-09T09:44:41.710 回答
0

好的，经过更多阅读，这是不可能的...当您在玩表格并希望将样式应用于单元格组件而不导致重新渲染整个表格时，这并不好...将不得不看进入替代品...

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

反应组件生命周期

于 2018-01-09T10:31:22.400 回答