我在这里遇到了麻烦,这意味着我无法完全弄清楚为什么接下来的两个版本的代码表现得如此不同。
在第一个版本中,当我初始化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
现在是一个返回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()} )
}
}
我已尝试简化代码,以使我的问题更容易理解。
先感谢您
最佳答案
每当内部状态发生变化时,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
组件。