Question

我对Pure.Component有疑问。据我了解，如果我有一个嵌套状态/不是原始值，React只会对props（使用PureComponent）做一个浅表比较，所以即使值发生了变化，React也不会重新渲染我的Component，因为这里的值不会被比较，仅供参考。

在下面的代码中，我确实有一个嵌套对象。当this.state.person.name更改时，我的Child组件将重新呈现，当它不变时，则不会重新呈现=这正是PureComponent的工作方式。但是我不明白为什么它起作用，因为它不比较person.name的值，而只是比较相同的引用。

由于引用是相同的，所以不应该再渲染我的子组件。谢谢！

另：这是代码笔的链接：

https://codepen.io/julianyc/pen/eqNJjE?editors=1010

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
       person: {
         name : ""
       }
    }
  }

  changeName = () => {
    let names = ["alice", "mike", "sarah", "josh", "ben", "ally", "lina"];
    let num = Math.round(Math.random() * names.length);
    this.setState({
      person: {
         name: names[num]
      }
    })
  }
  render() {
    return (
      <div>
        <h1>Hello, world! </h1>
        <button onClick={this.changeName}>Change my name</button>
        <Child name={this.state.person.name}/>
      </div>
    );
  }
}

class Child extends React.PureComponent {
  render () {
    console.log("render of child occured")
      return (
        <div>Child says: {this.props.name}</div>
      )
  }
}

Answer 1

它不比较App组件的状态。它将比较Child *（是字符串）中的props值。由于每次单击按钮时都会改变这种情况，因此子组件将重新呈现。

反应-为什么即使我有嵌套值，我的组件也可以使用PureComponent正确地重新渲染？

1 个答案: