react

react/react高阶/project/src/App.js

@@ -6,6 +6,9 @@ import Count from './components/Count.jsx'
 import Part2 from './components/LearnUseEffect.jsx'
 import Part3 from './components/LearnUseMemo.jsx'
 import Part4 from './components/LearnUseCallBack.jsx'
+import Part5 from './components/LearnUseRef.jsx'
+import Clock from './components/Clock.jsx'
+import Part6 from './components/CustomHook.jsx'
 function App() {
   let [open,setOpen] = useState(true)
   function show() {
@@ -19,6 +22,9 @@ function App() {
       <Part2/>
       <Part3></Part3>
       <Part4/>
+      <Part5/>
+      <Clock/>
+      <Part6/>
     </div>
   ) : <div className='App'>
       <button onClick={show}>显示</button>

react/react高阶/project/src/components/Clock.jsx

@@ -0,0 +1,55 @@
+import { Component } from "react";
+class Clock extends Component {
+  constructor() {
+    super();
+    this.state = {
+      date: new Date(),
+      timer: null,
+    };
+  }
+  componentDidMount() {
+    // this.startEvent();
+  }
+  componentDidUpdate() {}
+  componentDidUnMount() {}
+  handleClick = () => {
+    if (this.state.timer) {
+      this.event();
+    } else {
+      this.startEvent();
+    }
+  };
+  startEvent() {
+    let time1;
+    this.timer = time1 = setInterval(() => {
+      this.setState(() => ({
+        date: new Date(),
+        timer: time1,
+      }));
+    }, 1000);
+  }
+  /**
+   * 类组件中
+   * this指向问题
+   * 第一种：call bind apply
+   * 第二种：直接调用 进入页面就会触发
+   * 第三种：箭头函数:箭头函数没有this指向 this如果指向  只会指向它的上级/父级
+   */
+  event = () => {
+    console.log(this, "this");
+    clearInterval(this.state.timer);
+    this.setState({
+      timer: null,
+    });
+  };
+  render() {
+    return (
+      <>
+        <h2>计时器</h2>
+        <p>初始事件：{this.state.date.toLocaleString()}</p>
+        <button onClick={this.handleClick}>点我</button>
+      </>
+    );
+  }
+}
+export default Clock;

react/react高阶/project/src/components/CustomHook.jsx

@@ -0,0 +1,16 @@
+import useStorage from "../hooks/useStorage.js";
+function Part6() {
+    let [count,setCount] = useStorage('count')
+    console.log(count,'数量')
+    function handleClick() {
+        setCount(count * 2)
+    }
+    return (
+        <>
+            <h1>自定义hook</h1>
+            <p>初始值:{count}</p>
+            <button onClick={handleClick}>修改数值</button>
+        </>
+    )
+}
+export default Part6;

react/react高阶/project/src/components/LearnUseRef.css

@@ -0,0 +1,3 @@
+h1 {
+    color: red;
+}

react/react高阶/project/src/components/LearnUseRef.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+import "./LearnUseRef.css";
+function Part5() {
+  let [time, setTime] = useState(new Date());
+  /**
+   * useRef返回一个对象 {current:null}
+   * 该缓存值 会在整个函数组件内保持不变
+   */
+  let timer = useRef(null); //缓存当前定时器
+  let inpRef = useRef(null); //缓存dom对象
+  // let timer = null;
+  /**
+   * useRef的作用
+   * 1.获取dom对象 函数组件实例
+   * 2.在整个函数组件内 缓存数据
+   */
+  useEffect(() => {
+    timer.current = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    // useRef获取dom对象 聚焦操作
+    inpRef.current.focus();
+    return ()=>{
+      clearInterval(timer.current)
+    }
+  }, []);
+  function stopEvent() {
+    clearInterval(timer.current);
+  }
+  return (
+    <>
+      <h1>当前时间:{time.toLocaleString()}</h1>
+      <button onClick={stopEvent}>停止计时</button>
+      <input type="text" ref={inpRef} />
+    </>
+  );
+}
+export default Part5;

react/react高阶/project/src/hooks/useStorage.js

@@ -0,0 +1,18 @@
+import {useState} from 'react';
+/**
+ * 自定义一个可以获取/修改本地存储中的钩子
+ * key:属性名
+ * value == 从key获取的值 属性值
+ * newValue:新值
+ */
+function useStorage(key) {
+    let [value,setValue] = useState(()=>localStorage.getItem(key))
+    function setStorage(newValue){
+        localStorage.setItem(key,newValue)
+        setValue(newValue)
+    }
+
+    return [value,setStorage]
+}
+
+export default useStorage;