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修改其值时，组件都会重新呈现

更改

 require_once ('slot/slots/db.php');
 require_once ('slot/slots/users.php');
 require_once ('slot/slots/slotsmachine.php');

               OR

 require_once ('./slot/slots/db.php');
 require_once ('./slot/slots/users.php');
 require_once ('./slot/slots/slotsmachine.php');

收件人

   class Parent extends React.Component {

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

     this.value = 0;

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

子组件不会更改道具

2 个答案: