xx

2022-01-10 00:07:02 +08:00
parent 8f3c47ccce
commit 3a764e1f5e
9 changed files with 338 additions and 9 deletions
@@ -0,0 +1,77 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-09 18:31:06
+ * @LastEditTime: 2022-01-09 23:05:36
+ * @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>生命周期函数</title>
+</head>
+<body>
+    <div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+    <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>
+                )
+            }
+            componentWillMount(){
+                console.log("2-componentsWillMount")
+            }
+            componentDidMount(){
+                console.log('4-componentDidMount')
+            }
+            componentWillUnmount(){
+                console.log("5-componentWillUnmount")
+            }
+            // 控制组件更新的阀门
+            shouldComponentUpdate(){
+                console.log('shouldComponentUpdate') 
+                return true
+            }
+            componentWillUpdate(){
+                console.log('componentWillUpdate') 
+            }
+            componentDidUpdate(){
+                console.log('componentDidUpdate') 
+            }
+        }
+        ReactDOM.render(
+			<Count/>,document.getElementById('app')
+		)
+    </script>
+</body>
+</html>