React.js 拒绝通知更改

Question

似乎在某些情况下 React 不会将状态更改传播到子组件中。

最小示例

我试图将我观察到的行为归结为我能找到的最小的测试用例，但它最终仍然非常大。对于那个很抱歉。

class Inner extends React.Component<{ value: number }, { value: number }> {
  constructor(props: { value: number }) {
    super(props);

    this.state = { value: props.value };
  }

  render() {
    return <span> { this.state.value } </span>
  }
}

class Test extends React.Component<{}, { value: number }> {
  constructor(props: {}) {
    super(props);

    this.state = { value: 0 };

    setTimeout(() => { this.setState({ value: 1 }); }, 500);
  }

  render() {
    return <span>
      <Inner value={ this.state.value } />
    </span>;
  }
}

React.render(<Test />, document.getElementById('somediv'));

快速总结

Test 在其状态中具有“值”，该值通过其内部组件“Inner”传递并显示。

在 Test 的构造方法中，我将状态上的value 设置为 0。500 毫秒后，我将其设置为 1。我希望这会将 Inner 的显示更改为也显示 1，因为它取决于 value来自this.state，但事实并非如此。为什么不呢？

非常奇怪的是，如果我将return <span> { this.state.value } </span> 行更改为在this.props.value 内使用this.props.value，那么它实际上会更新。当然，我需要在我提炼出这个例子的应用程序中使用状态。

我希望我在这里遗漏了 React 的一些基本部分。这是什么？

Answer 1

Inner 的构造函数仅在组件实例首次创建时运行一次。

因此，这只运行一次，而不是每次 props 更改时：

this.state = { value: props.value };

所以如果你将新的 props 传递给 Inner，this.props.value 的值会改变，但 this.state.value 的值不会改变。

现在是这样的：

1. 超时在Test上调用setValue并更新Test的状态
2. React 重新渲染 Test
3. 作为渲染过程的一部分Test 将新的道具值传递给Inner
4. Inner 重新渲染 - 它的道具已经改变，但它的状态没有。