Question

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

在第一个版本中，当我初始化this.childComponent = (<ChildComp />)时，当我更改Parent的状态（通过setState()）时，其道具似乎不会更新。即使实际调用了setState()，并且更新了Parent的状态，也会发生这种情况。

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

这是子组件：

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现在是一个返回反应元素的函数）

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

自第一种情况以来，您没有返回

this.childComponent = (
  <Child value={this.state.value} 
  setValue={() => this.setValue()}/>
)

在构造函数中定义，该构造函数只执行一次，现在是一个静态值。

然而它将起作用，因为它是每次调用时执行的函数。

如果您想要使用第一种方法，请在渲染中定义子组件而不是构造函数，因为每次更改都会调用render。你的代码也有很多错误。请参阅下面的工作代码段

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 1
    }
   
  }
  setValue() {
    this.setState({value: 2})
  }
  render () {
      const childComponent = (
      <Child value={this.state.value} 
      setValue={() => this.setValue()}/>
    )
    return ( <div>{childComponent}</div> )
  }  
}

class Child extends React.Component {
  render() {
    return (
      <button onClick={this.props.setValue}>
        {this.props.value}
      </button>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

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会创建一个新的select convert(decimal(18,5), '')组件。

React动态渲染组件（对象分配与函数返回）

2 个答案: