xxx

B/6/P05.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: chenxuan
  * @Date: 2022-01-13 00:00:14
- * @LastEditTime: 2022-01-13 00:42:36
+ * @LastEditTime: 2022-01-13 22:57:30
  * @LastEditors: chenxuan
 -->
 <!DOCTYPE html>
@@ -10,7 +10,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>生命周期函数</title>
+    <title>getDerivedStateFromProps</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>
@@ -38,7 +38,7 @@
                 this.forceUpdate()
             }
             // 定义在类自身，接收props state两个参数，必须返回状态对象
-            // 返回状态对象后会劫持原有props
+            // 返回状态对象后会劫持原有state   state的值由props决定
             static getDerivedStateFromProps(props,state){
                 console.log(props,state)
                 return props

B/6/P06.html

@@ -0,0 +1,77 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-13 22:59:55
+ * @LastEditTime: 2022-01-13 23:14:43
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/babel">
+        class Count extends React.Component{
+            constructor(props){
+                console.log("1-constructor")
+                super(props)
+                this.state={count:100}
+            }
+            
+            add=()=>{
+                let {count}=this.state;
+                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>
+                )
+            }
+            componentDidMount(){
+                console.log('4-componentDidMount')
+            }
+            componentWillUnmount(){
+                console.log("5-componentWillUnmount")
+            }
+            // 控制组件更新的阀门
+            shouldComponentUpdate(){
+                console.log('shouldComponentUpdate') 
+                return true
+            }
+            // 组件更新之前搞一些事情
+            getSnapshotBeforeUpdate(){
+                return "xxx"
+            }
+            componentDidUpdate(preProps,preState,snapshotValue){
+                console.log(snapshotValue)
+                // console.log(preProps,preState)
+                // console.log('componentDidUpdate') 
+            }
+        }
+        ReactDOM.render(
+			<Count count={1999} />,document.getElementById('app')
+		)
+    </script>
+</body>
+</html>

B/6/P07.html

@@ -0,0 +1,74 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-13 23:49:27
+ * @LastEditTime: 2022-01-14 00:40:51
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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>
+    <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>
+    <style>
+        .list{
+            width: 150px;
+            height: 150px;
+            border: 1px solid red;
+            overflow-y: auto;
+        }
+        .list li{
+            width: 100%;
+            list-style: none;
+            height: 30px;
+            line-height: 30px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/babel">
+        class Count extends React.Component{
+            state={news:["新闻"]}
+            componentDidMount(){
+                setInterval(()=>{
+                    const {news}=this.state;
+                    const news_="新闻"+(news.length+1);
+                    news.unshift(news_);
+                    this.setState({news:news})
+                },1000)
+            }
+            getSnapshotBeforeUpdate(){
+                return this.refs.list.scrollHeight;
+            }
+            componentDidUpdate(preProps,preState,height){
+                this.refs.list.scrollTop+=this.refs.list.scrollHeight-height
+            }
+            render(){
+                // console.log(this.state.news)
+                return (
+                    <div className="list" ref="list">
+                        {
+                            this.state.news.map((item,index)=>{
+                                return (
+                                    <li key={index}>{item}</li>
+                                )
+                            })
+                        }
+                    </div>
+                )
+            }
+        }
+       
+        ReactDOM.render(
+			<Count count={1999} />,document.getElementById('app')
+		)
+    </script>
+
+</body>
+</html>