javascript - 子组件不会更改 prop

Question

我有以下结构:

class Parent extends React.Component {

  componentDidMount() {
    document.addEventListener('keydown', () => {
      this.value++;
    })
  }

  this.value = 0;

  render() {
    return (<ChildComponent value={this.value} />) 

ChildComponent 只是呈现值:

class ChildComponent extends Component {
  render() {
    return (
        <div>
            {this.props.value}
        </div>
    );
  }}

我不想在每个 KeyDown 事件上重新呈现父组件，这就是我不为状态赋值的原因。

我希望 ChildComponent 在每次 KeyDown 事件时重新呈现，但 ChildComponent 只呈现一次，因为它没有获得更改的值并且始终显示 0，尽管 this.value 正在更改。

是否可以在更改 ParentComponent 的 this.value 时重新呈现 ChildComponent，或者我应该使用 setState 将逻辑放入 ChildComponent 以呈现正确的结果？

Answer 1

您应该将值添加到父状态。这就是 React 的工作方式。即使您可以在子组件上手动触发重新渲染，它仍然是 0，因为仍然提供 0 Prop 。当 React 检测到父组件的状态发生变化时，它将计算所有子元素的虚拟 dom，对虚拟 dom 与真实 dom 进行比较，然后使用这些值选择性地更新真实 dom(仅子元素的内部文本组件 div 实际上是新的)。 React 针对使用虚拟 dom 处理重新渲染进行了令人难以置信的优化，您不必担心这种情况下的性能损失。