它將在紅色組件中進行更改，然后將這個虛擬 DOM 與舊 DOM 進行比較。它將看到不同的部分。然后它將僅將 DOM 更改應用于該不同的組件。
如果 props 或 state 發生變化，更新階段就會開始。如果頂層資料發生變化：
如果它將資料傳遞給它的孩子，所有孩子都將被重新渲染。如果中層組件的狀態發生變化：
這次只有它的孩子會被重新渲染。React 將重新渲染該節點下方的樹的任何部分。因為生成子組件視圖的資料實際上位于父組件（中級組件）。但是任何高于它的東西，父母或兄弟姐妹都不會重新渲染。因為資料不會影響他們。這個概念叫做Unidirectional Data Flow。
You can see in action in chrome browser. chose the rendering and then enable the painting flushing option
If you make any change on the page, you will see that updated components will be flashed.
UPDATING PHASE
componentWillReceiveProps method is invoked first in the component lifecycle's updating phase. It is called when a component receives new properties from its parent component. With this method we compare the current component's properties using the this.props object with the next component's properties
using the nextElement.props object. Based on this comparison, we can choose to update the component's state using the this.setState() function, which will NOT trigger
an additional render in this scenario.
Note that no matter how many times you call this.setState() in the componentWillReceiveProps() method, it won't trigger any additional renders of that component. React does an internal optimization where it batches the state updates together.
shouldComponentUpdated dictates if the components should rerender or not. By default, all class components will rerender whenever the props they receive or their state change. this method can prevent the default behavior by returning False. In this method, existing props and state values get compared with the next props and state values and return boolean to let React know whether the component should update or not. this method is for performance optimization. If it returns False componentWillUpdate(), render() and componentDidUpdate() wont get called.
The componentWillUpdate() method is called immediately before React updates the DOM. It gets two arguments: nextProps and nextState. You can use these arguments to prepare for the DOM update. However, you cannot use this.setState() in the componentWillUpdate() method.
After calling the componentWillUpdate() method, React invokes the render() method that performs the DOM update. Then, the componentDidUpdate() method is called.
The componentDidUpdate() method is called immediately after React updates the DOM. It gets these two arguments: prevProps and prevState. We use this method to interact with the updated DOM or perform any post-render operations. For example, in a counter example, counter number is increased in componentDidUpdate.
After componentDidUpdate() is called, the updating cycle ends. A new cycle is started when a component's state is updated or a parent component passes new properties. Or when you call the forceUpdate() method, it triggers a new updating cycle, but skips the shouldComponentUpdate() method (this method is for optimization) on a component that
triggered the update. However, shouldComponentUpdate() is called on all the child components as per the usual updating phase. Try to avoid using the forceUpdate() method as much as possible; this will promote your application's maintainability
uj5u.com熱心網友回復：
嘿，考慮使用Tree資料結構來滿足您的需要，ReactJs 遵循更新狀態的單向方式，即一旦父狀態發生更改，則所有子級都將通過駐留在父組件中的道具傳遞一勞永逸地更新！考慮使用稱為深度優先搜索的演算法選項，它會為您找到連接到父節點的節點，一旦到達該節點，您將檢查狀態以及是否與共享的狀態變數存在偏差父母你可以更新他們！
注意：這可能看起來有點理論，但如果你可以做一些遠程接近這個事情的事情，你將創建一種更新組件的方法，就像 react 一樣！
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/413753.html
標籤：