當給定新的道具值時，我如何強制孩子組件重新渲染？

Question

我試過這種模式。

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

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

據我瞭解初始部件渲染被觸發通過道具的變化，並作爲的setState是異步的（出於某種原因），用新狀態更新的呈現沒有在第一輪完成。

但我不明白的是，爲什麼當它最終決定更新狀態時，它不會重新渲染組件。我認爲由setState引起的狀態變化總是觸發重新渲染。

所以最後我有一個組件在狀態實際更改之前無用地重新渲染，然後在/ if（？）狀態更新時不做任何事情。我根本不理解這種行爲。

Answer 1

setState將觸發componentUdpate→componentWillUpdate→render。在此鏈之前，props更改將觸發componentWillReceiveProps。你可以看看這張關於React lifecycle的圖片。您可以看到React在props和state上的行爲方式。

所以：

但是我不明白的是，爲什麼當它終於決定以更新狀態時，它不會重新呈現組件。

更新state通過setState將觸發render功能（重新渲染）。並且props也觸發render。

以下代碼：

1. componentWillReceiveProps：
   • this.props.newProps="newPropsValue"
   • this.state.propsKey="newPropsValue"
2. render：同上，沒有什麼變化。
3. 如果發生childComponent設置propsKeysetState（onClick,onChange ...）的任何事件。假設setState({propsKey: "anotherValue"})。然後render將與this.state.propsKey="anotherValue和this.props.newProps="newPropsValue"

現在再次被觸發，讓我們更新您的childComponent的props內parentComponent，假設newProps="latestPropsValue"：

1. 之前componentWillReceiveProps：
   • this.props.newProps="latestPropsValue"
   • this.state.propsKey="anotherValue"
2. componentWillReceiveProps後：
   • this.props.newProps="latestPropsValue"
   • this.state.propsKey="latestPropsValue"

如何強制子組件賦予了新的道具值時，重新呈現？

如果您render使用state然後setState內render。如果您在render內部使用props，它也會相應更新