javascript - React 动态渲染组件(对象分配与函数返回)

Question

我在这里碰壁了，这意味着我无法完全弄清楚为什么接下来的两个版本的代码表现如此不同。

在第一个版本中，当我初始化 this.childComponent = (<ChildComp />) 时，当我更改 Parent 时，它的 props 似乎没有更新的状态(通过 setState() )。即使 setState() 也会发生这种情况实际上被调用，并且 Parent的状态已更新。

在第二个版本中，当我实际初始化一个返回组件( this.childComponent = () => {return (<ChildComp />)} )的函数时，一切都像魅力一样工作， Prop 会更新。 我正在使用第二个版本(因为它有效)，但我想了解为什么它有效而第一个版本无效。

这是子组件:

class Child extends React.Component {
  render() {
    return (
      <button onClick=(this.props.setValue())>
        {this.props.value}
      </button>
    )
  }
}

我有父组件的接下来两个版本:

1.

class Parent extends React.Component {
  constructor() {
    this.state = {
      value: 1
    }
    this.childComponent = (
      <Child value={this.state.value} 
      setValue={() => this.setValue()}/>
    )
  }
  setValue() {
    this.setState({value: 2})
  }
  render () {
    return ( {this.childComponent} )
  }  
}

2.(this.childComponent 现在是一个返回 React 元素的函数)

class Parent extends React.Component {
  constructor() {
    this.state = {
      value: 1
    }
    this.childComponent = () => {
      return (
        <Child value={this.state.value} 
        setValue={() => this.setValue()}/>
      )
    }
  }
  setValue() {
    this.setState({value: 2})
  }
  render () {
    return ( {this.childComponent()} )
  }   
}

我尝试简化代码，以便我的问题更容易理解。

提前谢谢

Answer 1

React 使用名为 reconciliation 的策略每次内部状态发生变化时都可以有效地更新 DOM。通常，这发生在 setState 之后打电话。

在第一个示例中，render Parent 内的方法组件始终返回相同的 Child组件，因为它在 constructor 中仅创建一次。因此，协调算法不会发现任何更改，因为没有任何更改。

我想指出<Child value={this.state.value} setValue={() => this.setValue()}/>只是 React.createElement(Child, {value: this.state.value, setValue: () => this.setValue()}, null) 的语法糖。 createElement只是返回一个对象。

在第二个示例中，每个 render打电话，你打电话childComponent这又创建了一个新的 Child组件。