edit md

Wscats · Wscats · commit 9e1e504126bc · 2018-12-06T15:30:30.000+08:00
diff --git a/react/component/src/lifecycle/README.md b/react/component/src/lifecycle/README.md
@@ -13,6 +13,32 @@ React 是一个由虚拟 DOM 渲染成真实 DOM 的过程，这个过程称为
     - componentWillUnmount()
     - 这个阶段没有对应的 did 方法
 
+![image](https://user-images.githubusercontent.com/17243165/27114514-c1b0c79a-50f6-11e7-92a3-c671afc26109.png)
+
+组件在初始化时会触发5个钩子函数：
+
+|id|钩子函数|用处|
+|-|-|-|
+|1|getDefaultProps()|设置默认的props，也可以用defaultProps设置组件的默认属性|
+|2|getInitialState()|在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props|
+|3|componentWillMount()|组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state|
+|4|render()|react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了|
+|5|componentDidMount()|组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次|
+
+在更新时也会触发5个钩子函数：
+
+|id|钩子函数|用处|
+|-|-|-|
+|6|componentWillReceivePorps(nextProps)|组件初始化时不调用，组件接受新的props时调用|
+|7|shouldComponentUpdate(nextProps, nextState)|react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤|
+|8|componentWillUpdate(nextProps, nextState)|组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state|
+|9|render()|同上|
+|10|componentDidUpdate()|组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。还有一个卸载钩子函数|
+|11|componentWillUnmount()|组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
+
+
+以上可以看出来react总共有10个周期函数（render重复一次），这个10个函数可以满足我们所有对组件操作的需求，利用的好可以提高开发效率和组件性能
+
 ## Mounting
 
 指首次渲染或者组件从 DOM 中移除后再次重新渲染，后者场景不会执行 getDefaultProps
@@ -166,4 +192,5 @@ ReactDOM.render(<UnmountingComponent/>, document.getElementById('div3'));
 
 ### 效果预览
 
-- [组件的生命周期](https://wscats.github.io/react-tutorial/react/component/src/lifecycle/lifecycle.html)
+- [组件的生命周期DEMO1](https://wscats.github.io/react-tutorial/react/component/src/lifecycle/lifecycle.html)
+- [组件的生命周期DEMO2](https://wscats.github.io/react-tutorial/react/component/src/lifecycle/生命周期.html)
diff --git a/react/component/src/lifecycle/生命周期.html b/react/component/src/lifecycle/生命周期.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="demo">
+
+    </div>
+    <!--React 核心库-->
+    <script src="../../../js/react.js"></script>
+    <!--React 跟 Dom 相关的功能库-->
+    <script src="../../../js/react-dom.js"></script>
+    <!--jsx 转换 js 的框架 babel-->
+    <script src="../../../js/browser.min.js"></script>
+    <!-- ES6 JSX -->
+    <script type="text/babel">
+        class Xpeople extends React.Component {
+            // 构造函数，组件初始化的时候获取props,state
+            // 第一个生命周期
+            constructor(props){
+                super(props)
+                // 父传子 老爸给我的
+                this.props = props;
+                // 自己拥有的 就是vue组件里面data  Model
+                this.state = {
+                    "title":"微信",
+                    "inputValue":""
+                };
+            }
+            // 登场前
+            componentWillMount(){
+                this.setState({
+                    "title":"支付宝"
+                })
+            }
+            // render
+            // 排练
+
+            // 正式登场
+            componentDidMount(){
+               
+            }
+            // 只要props和state变化，该生命周期必定触发
+            shouldComponentUpdate(){
+                if(this.state.inputValue.length>5){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            changeValue(){
+                console.log(this);
+                this.setState({
+                    "title":"支付宝"
+                })
+            }
+            getInputValue(e){
+                console.log(e.target.value)
+                this.setState({
+                    "inputValue":e.target.value
+                })
+
+            }
+            // view
+            render() {
+                return (
+                <div>
+                    <p>
+                        <input onChange={this.getInputValue.bind(this)} />
+                        {this.state.title}
+                    </p>
+                </div>);
+            }
+        }
+        ReactDOM.render(
+            <div>
+                <Xpeople name="btn" />
+            </div>,
+            document.querySelector("#demo")
+        )
+
+    </script>
+</body>
+
+</html>
