当给出新的道具值时，如何强制子组件重写？

Question

我试过这种模式。

ParentComponent
...
render(
return <ChildComponent newProps="newPropsValue />)

ChildComponent
...
ComponentWillReceiveProps{
this.setState({"propsKey": "newPropsValue"})
}

据我所知，最初的组件呈现是由props更改触发的，而由于setState是异步的（出于某种原因），带有新状态更新的呈现不是在第一次传递时完成的。

然而，我不明白的是，为什么当它最终决定更新状态时，它没有重新发布组件。我以为由setState引起的状态变化总是会触发一个rerender。

所以最后，我有一个组件，它在状态实际改变之前无用地重新呈现，然后什么都不做，当/如果（？）状态更新。我一点也不理解这种行为。

Answer 1

SetState将触发ComponentUdpate->ComponentWillUpdate->Render。props更改将在此链之前触发ComponentWillReceiveProps。您可以在这里看一下关于React生命周期的图像。您可以看到react在props和state上的不同行为。

所以：

然而，我不明白的是，为什么当它最终决定更新状态时，它没有重新呈现组件。

通过setstate更新state将触发render函数（重新呈现）。而且道具也会触发呈现。

遵循您的代码：

• ComponentWillReceiveProps:
  • this.props.newprops=“newpropsvalue”
  • this.state.propskey=“newpropsvalue”

  现在，让我们在parentcomponent中更新childcomponent的props，假设newprops=“latestpropsvalue”:

  ComponentWillReceiveProps之前的
  • :
    • this.props.newprops=“latestpropsvalue”
    • this.state.propskey=“AnotherValue”
    • this.props.newprops=“latestpropsvalue”
    • this.state.propskey=“latestpropsvalue”

    当给出新的道具值时，如何强制子组件重写？

    如果您的render正在使用state，则在render内部使用setstate。如果您在render中使用props，它也会相应地更新