You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reconciliation.md
+15-2Lines changed: 15 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ When diffing two trees, React first compares the two root elements. The behavior
27
27
28
28
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `<a>` to `<img>`, or from `<Article>` to `<Comment>`, or from `<Button>` to `<div>` - any of those will lead to a full rebuild.
29
29
30
-
When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive `componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.
30
+
When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive `UNSAFE_componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.
31
31
32
32
Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
33
33
@@ -43,6 +43,12 @@ Any components below the root will also get unmounted and have their state destr
43
43
44
44
This will destroy the old `Counter` and remount a new one.
45
45
46
+
>Note:
47
+
>
48
+
>These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
49
+
>
50
+
>-`UNSAFE_componentWillMount()`
51
+
46
52
### DOM Elements Of The Same Type {#dom-elements-of-the-same-type}
47
53
48
54
When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. For example:
@@ -69,10 +75,17 @@ After handling the DOM node, React then recurses on the children.
69
75
70
76
### Component Elements Of The Same Type {#component-elements-of-the-same-type}
71
77
72
-
When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `componentWillReceiveProps()`and `componentWillUpdate()` on the underlying instance.
78
+
When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `UNSAFE_componentWillReceiveProps()`, `UNSAFE_componentWillUpdate()`and `componentDidUpdate()` on the underlying instance.
73
79
74
80
Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
75
81
82
+
>Note:
83
+
>
84
+
>These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
85
+
>
86
+
>-`UNSAFE_componentWillUpdate()`
87
+
>-`UNSAFE_componentWillReceiveProps()`
88
+
76
89
### Recursing On Children {#recursing-on-children}
77
90
78
91
By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference.
0 commit comments