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

我在这里碰到了一堵砖墙，这意味着我无法完全弄清楚为什么接下来的两个版本的代码行为如此不同。React动态渲染组件（对象分配与函数返回）

在第一个版本，当我初始化一个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> 
    ) 
    } 
}

我父组件的下两个版本：

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

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

预先感谢您

来源

2017-05-31 Marius Vlas

在您的第一个（损坏的）版本中，子组件是静态定义的并且再也不会更改。 – pscl

您在第一种情况下没有返回'render（）{ return {this.childComponent} }'否则可以使用子组件是静态的 –

明白了，感谢您的解释 –

作出反应的工作片段使用了一个名为reconciliation每有一个在其内部状态发生变化时，能够有效地更新DOM战略。通常，这发生在setState呼叫之后。

在第一个示例中，Parent组件中的render方法总是返回相同的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组件。

来源

2017-05-31 11:12:23

你不必因为

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

在现在只执行一次，是一个静态值的构造定义在第一种情况下回报。

而它会工作，因为它是一个函数，每次被调用时都会执行。

如果您想按照第一种方法进行操作，请在render中定义childcomponent而不是构造函数，因为每次更改都会调用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>

来源

2017-05-31 10:49:36

增加了解释和工作第一种方法的片段 –

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

回答

相关问题