add: unmouting 03

docs/life-cycle/002-lifecycle-unmounting-03.md

@@ -0,0 +1,19 @@
+# lifecycle
+> Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.
+- https://www.w3schools.com/react/react_lifecycle.asp
+
+## Unmounting(更新)
+> The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
+
+- componentWillUnmount
+- The componentWillUnmount method is called when the component is `about to be removed from the DOM`.
+
+
+
+
+
+
+
+
+
+

docs/life-cycle/002-lifecycle-updating-02.md

@@ -10,7 +10,7 @@
 - static getDerivedStateFromProps()
 - shouldComponentUpdate()
 - render()
-- static getSnapshotBeforeUpdate()
+- getSnapshotBeforeUpdate()
 - componentDidUpdate()
 
 - 这个是当一个组件更新的时候处理的一些阶段
@@ -83,3 +83,56 @@ ReactDOM.render(<Header />, document.getElementById('root'));
 
 ### getSnapshotBeforeUpdate
 
+In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.
+
+If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.
+
+The example below might seem complicated, but all it does is this:
+
+When the component is mounting it is rendered with the favorite color "red".
+
+When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".
+
+This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.
+
+- 取dom的一些状态 `check what the values were before the update`
+
+### componentDidUpdate()
+- The componentDidUpdate method is called after the component is updated in the DOM.
+- The example below might seem complicated, but all it does is this:
+- When the component is mounting it is rendered with the favorite color "red".
+- When the component has been mounted, a timer changes the state, and the color becomes "yellow".
+
+```jsx
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {favoritecolor: "red"};
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({favoritecolor: "yellow"})
+    }, 1000)
+  }
+
+  componentDidUpdate() {
+    document.getElementById("mydiv").innerHTML =
+    "The updated favorite is " + this.state.favoritecolor;
+  }
+
+  render() {
+    return (
+      <div>
+      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
+      <div id="mydiv"></div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Header />, document.getElementById('root'));
+```
+
+
+