javascript - React 的差异算法如何处理元素列表？

Question

UPD: 我使用了 React Dev Tools with Highlight Updates，它似乎突出显示了每个 render() 方法调用

我写了一个简单的 React 应用程序，它的工作方式如下:

1. 它有一个按钮和一个数字列表
2. 点击按钮后，它会在列表底部添加一个新数字，比之前的数字增加 1

问题是即使我使用 key 属性，React 每次都会更新所有列表元素。我知道这个问题可以通过使用 PureComponents 类或者自己实现的 shouldComponentUpdate()

来解决

如果列表元素没有变化，为什么 React 会更新它们？我虽然 React 使用特殊的diffing 算法 来比较元素并且它应该可以工作，但现在我发现它没有像我预期的那样工作。

谁能解释为什么 React 的diffing 算法 在这种情况下不起作用？

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      numbers: [] 
    }

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    const numbers = this.state.numbers;
    const length = this.state.numbers.length ;
    const newNumber = length > 0 ? numbers[length - 1] + 1 : 0;

    this.setState({
      numbers: [...numbers, newNumber]
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>Add</button>
        <NumbersList numbers={this.state.numbers} />
      </div>
    );
  }
}


class NumbersList extends Component {
  render() {
    return (
      <ul>
        {
          this.props.numbers.map((number) => <NumberItem key={number} number={number} />)
        }
      </ul>
    )
  }
}

class NumberItem extends Component {
  render() {
    return (
      <li>{this.props.number}</li>
    )
  }
}

Answer 1

Javascript/React 端使用 shouldComponentUpdate 来确定它是否应该重新呈现。这默认为 true 并且会在状态发生变化时重新渲染组件。

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

使用您的应用程序的这个重新呈现的虚拟表示，它使用这个 https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm协调您的虚拟 DOM 与真实 DOM