React：为什么当道具改变时子组件不更新

Question

为什么在下面的伪代码示例中，当容器更改foo.bar时，Child没有重新呈现？

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

即使我在修改容器中的值后调用forceupdate()，Child仍然显示旧值。

Answer 1

更新子级以使属性'key'等于名称。该组件将在每次键更改时重新呈现。

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}