子组件不会更改道具

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事件上都重新渲染Parent组件，这就是为什么我不给状态赋值。

我希望ChildComponent在每个KeyDown事件上都重新渲染，但是ChildComponent仅呈现一次，因为它不会获得更改的值，并且尽管this.value有所更改，但始终显示0。

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

Answer 1

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

Answer 2

值更改时未调用子组件的原因，因为您要覆盖普通变量值，但不对组件状态做出反应。 因此，为了在值更改时调用子组件，您需要在父组件的组件状态下管理value属性，因此无论何时使用setState修改其值，组件都将重新呈现

更改

   class Parent extends React.Component {

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

     this.value = 0;

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

至

  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} />) 
     }
   }