首页 发现 帮助
登录
lovecoding
/
w1020
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

react

郑柏铃 3 天之前
父节点
8433348a71
当前提交
449cad1a03
共有 2 个文件被更改，包括 122 次插入 和 0 次删除
合并视图 显示文件统计
  1. 76 0
      20.react/初阶/10.生命周期.html
  2. 46 0
      20.react/初阶/9.组件状态.html

+ 76 - 0
20.react/初阶/10.生命周期.html
查看文件 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./babel.min.js"></script>
 
+    <script src="./react.development.js"></script>
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root">
 
+    </div>
 
+    <script type="text/babel">
 
+        const root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App () {
 
+            return <Good/>
 
+        }
 
+        class Good extends React.Component {
 
+            // 构造器 this.state 赋值对象 为事件处理函数绑定实例
 
+            // state 可以修改
 
+            constructor(props) {
 
+                super(props);
 
+                this.state = {
 
+                    now: new Date()
 
+                };
 
+            }
 
+            componentDidMount() {
 
+                // 挂载  会在组件挂载后进行使用
 
+                console.log("1");
 
+               this.timer = setInterval(()=>{
 
+                    // 在React中 更新状态的唯一方式：调用组件实例setState方法
 
+                    // setState方法在修改状态的时候 就是新值与旧值合并 相同属性再覆盖掉旧的状态
 
+                    this.setState({
 
+                        now:new Date()
 
+                    })
 
+                   
+                },1000)
 
+
 
+            }
 
+            componentDidUpdate(prevProps, prevState, snapshot) {
 
+                // 更新  会在组件更新后调用 首次渲染不执行次方法
 
+                console.log("2",prevProps, prevState, snapshot)
 
+            }
 
+            componentWillUnmount() {
 
+                // 卸载 会在组件卸载及销毁之前调用
 
+                console.log("3")
 
+                clearInterval(this.timer)
 
+            }
 
+            static getDerivedStateFromProps(props, state) {
 
+                // 会在初始挂载和后续更新时调用 render 之前调用它
 
+                // 它应该返回一个对象来更新 state，或者返回 null 就不更新任何内容
 
+                console.log("4",props, state)
 
+            }
 
+            getSnapshotBeforeUpdate(prevProps, prevState){
 
+                // 会在 React 更新 DOM 之前时直接调用它
 
+                console.log("5",prevProps, prevState)
 
+                return 12;
 
+            }
 
+            render() { // 是类组件中唯一必须实现的方法
 
+                console.log("你好")
 
+                return (
 
+                    <div>
 
+                        <h1>现在是{this.state.now.toUTCString()}</h1> 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        root.render(<App/>);
 
+    </script>
 
+
 
+</body>
 
+
 
+</html>

+ 46 - 0
20.react/初阶/9.组件状态.html
查看文件 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./babel.min.js"></script>
 
+    <script src="./react.development.js"></script>
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root">
 
+    </div>
 
+    <script type="text/babel">
 
+        const root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App () {
 
+            return <Good/>
 
+        }
 
+        class Good extends React.Component {
 
+            // 构造器 用于实例初始化
 
+            constructor(props) {
 
+                // 接受父组件传递的参数
 
+                super(props);
 
+                // 给类组件添加状态
 
+                // 通过this访问当前创建的实例 但是 一定要在super函数后才可以
 
+                // 相当于Vue中的data属性
 
+                this.state = {
 
+                    type: '晴天'
 
+                };
 
+            }
 
+            render () {
 
+                return (
 
+                    <div>
 
+                        <p>{this.state.type}</p>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        root.render(<App/>);
 
+    </script>
 
+
 
+</body>
 
+
 
+</html>