Javascript 子组件没有'；不要换道具

我的结构如下：

class Parent extends React.Component {

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

  this.value = 0;

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

类父级扩展React.Component{
componentDidMount（）{
document.addEventListener（'keydown'，（）=>{
这个.value++；
})
}
该值=0；
render（）{
返回（）

ChildComponent仅呈现值：

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

class-ChildComponent扩展组件{
render（）{
返回(
{this.props.value}
);
}}

我不想在每一个KeyDown事件上都重新渲染父组件，这就是为什么我不给状态加一个值

我希望ChildComponent在每个KeyDown事件上都重新渲染，但是ChildComponent只渲染一次，因为它没有得到更改的值，并且始终显示0，尽管this.value正在更改

---

更改此值时是否可以重新引发ChildComponent。ParentComponent的值，或者我应该使用setState将逻辑放入ChildComponent以呈现正确的结果？

您应该将该值添加到父状态。这只是React的工作方式。即使您可以手动触发子组件上的重新引发器，它仍然会e 0仍然是0。当父组件的状态发生变化时，它将计算所有子元素的虚拟dom，对虚拟dom和真实dom进行区分，然后有选择地用这些值更新真实dom（只有子组件div的内部文本实际上是新的）.React经过难以置信的优化，可以使用虚拟dom处理重新渲染，您不必担心这种情况下的性能损失。

之所以在值更改时未调用子组件，是因为您覆盖了正常变量值，但没有覆盖React组件状态。因此，为了在值更改时调用子组件NGE您需要在父级的组件状态下管理value属性，所以每当您使用setState修改其值时，组件将重新渲染

改变

   class Parent extends React.Component {

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

     this.value = 0;

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

类父级扩展React.Component{
componentDidMount（）{
document.addEventListener（'keydown'，（）=>{
这个.value++；
})
}
该值=0；
render（）{
返回（）
}
}

到

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数值：0
}
}
componentDidMount（）{
document.addEventListener（'keydown'，（）=>{
this.setState（{value:this.state.value++}）；
})
}
render（）{
返回（）
}
}

如果不更新状态，就无法在父级上触发

render

。我认为

setState

是最好的方法。

  class Parent extends React.Component {
      constructor(props){
           super(props);
           this.state = {
                 value: 0
           }
      }
    componentDidMount() {
        document.addEventListener('keydown', () => {
             this.setState({value: this.state.value++});
        })
    }

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