no message

basic/6/P05.html

@@ -38,11 +38,15 @@
                 this.forceUpdate()
             }
             // 定义在类自身，接收props state两个参数，必须返回状态对象
-            // 返回状态对象后会劫持原有state   state的值在任何时候都取决于props
+            // 返回状态对象后会劫持原有state   
+            // 返回null则不劫持原有state
+            // 应用场景 state值与props相关
+
             static getDerivedStateFromProps(props,state){
                 console.log("xx")
                 console.log(props,state)
-                return props
+                // return props
+                return null
             }
             render(){
                 console.log("3-render")

basic/6/P06.html

@@ -30,21 +30,12 @@
                 count+=1;
                 this.setState({count})
             }
-            death=()=>{
-                ReactDOM.unmountComponentAtNode(document.getElementById('app'))
-            }
-            // 强制更新不受shouldComponentUpdate控制
-            force=()=>{
-                this.forceUpdate()
-            }
             render(){
                 console.log("3-render")
                 return (
                     <div>
                         <h2>当前求和为：{this.state.count}</h2>
                         <button onClick={this.add}>点我+1</button>
-                        <button onClick={this.death}>销毁</button>
-                        <button onClick={this.force}>强制更新</button>
                     </div>
                 )
             }
@@ -60,8 +51,10 @@
                 return true
             }
             // 组件更新之前搞一些事情
-            getSnapshotBeforeUpdate(){
+            // 次钩子函数的任何值都会传递给componentDidUpdate
-                return "xxx"
+            getSnapshotBeforeUpdate(prevProps,prevState){
+                // console.log(preState)
+                return "getSnapshotBeforeUpdate"
             }
             componentDidUpdate(preProps,preState,snapshotValue){
                 console.log(snapshotValue)

basic/6/P07.html

@@ -11,7 +11,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <title>getSnapshotBeforeUpdate</title>
+    <title>getSnapshotBeforeUpdate实践</title>
     <script src="../package/new/react.development.js"></script>
     <script src="../package/new/react-dom.development.js"></script>
     <script src="../package/new/babel.min.js"></script>
@@ -50,7 +50,6 @@
                 this.refs.list.scrollTop+=this.refs.list.scrollHeight-height
             }
             render(){
-                // console.log(this.state.news)
                 return (
                     <div className="list" ref="list">
                         {