Skip to content

Commit 82b8c9f

Browse files
authored
remove componentWillMount/WillReceiveProps (#3475)
1 parent 7a11d71 commit 82b8c9f

File tree

1 file changed

+15
-2
lines changed

1 file changed

+15
-2
lines changed

content/docs/reconciliation.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ When diffing two trees, React first compares the two root elements. The behavior
2727

2828
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.
2929

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.
3131

3232
Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
3333

@@ -43,6 +43,12 @@ Any components below the root will also get unmounted and have their state destr
4343

4444
This will destroy the old `Counter` and remount a new one.
4545

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+
4652
### DOM Elements Of The Same Type {#dom-elements-of-the-same-type}
4753

4854
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.
6975

7076
### Component Elements Of The Same Type {#component-elements-of-the-same-type}
7177

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.
7379

7480
Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
7581

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+
7689
### Recursing On Children {#recursing-on-children}
7790

7891
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

Comments
 (0)