reactjs - 为什么每次添加新项目时 React 都会渲染所有列表项目？

Question

有List和Item组件，用于显示数字列表，并且ListContainer每秒添加一个数字。

Item每次渲染时打印到控制台。

似乎预期的行为是在控制台中只看到 3 行，render每个Item. 但实际发生的情况 - 每次添加一个新项目时，所有组件都会重新渲染，并且输出是

rendering item 1
rendering item 1
rendering item 2
rendering item 1
rendering item 2
rendering item 3

为什么会这样？React 不应该检查每个组件current_props === new_props吗？在我们的例子中，propsItem value=1没有改变。为什么它被渲染了 3 次？

编码：

class ListContainer extends React.Component {
  state = { values: [1] }

  componentDidMount() {
    // Adding new item every seconds
    setTimeout(() => this.setState({ values: [...this.state.values, 2] }), 1000)
    setTimeout(() => this.setState({ values: [...this.state.values, 3] }), 2000)
  }

  render() { return <List values={this.state.values}/> }
}

class List extends React.Component {
  render() {
    return <div>
      {this.props.values.map((value) => <Item key={value} value={value}/>)}
    </div>
  }
}

class Item extends React.Component {
  render() {
    const { value } = this.props
    console.log(`rendering item ${value}`)
    return <div>{value}</div>
  }
}

React.render(<ListContainer />, document.getElementById('app'))

Answer 1

使用PureComponent或React.memo停止不必要的重新渲染

在 Item 组件中

class Item extends React.PureComponent {
 render(){
  return <div></div>
 }
}