react

20.react/高阶/my-app/src/App.js

@@ -1,11 +1,13 @@
 import LearnUseState from "./components/LearnUseState";
 import LearnUseEffect from "./components/LearnUseEffect";
 import { useState } from "react";
+import LearnUseRef from "./components/LearnUseRef";
 function App() {
   const [show, setShow] = useState(true)
   return show ? ( <div>
       <LearnUseState></LearnUseState>
       <LearnUseEffect></LearnUseEffect>
+      <LearnUseRef></LearnUseRef>
     </div>) : (
     <div>
       <LearnUseState></LearnUseState>

20.react/高阶/my-app/src/components/LearnUseEffect.jsx

@@ -24,16 +24,22 @@ function LearnUseEffect() {
     // },[name,time])
     // 第四种: 如果传入的回调函数  返回一个函数(fn1) 该函数(fn1)就会在组件卸载前执行
     let timer;
+    // console.log(timer,'time的值1')
     useEffect(()=>{
         timer = setInterval(()=>{
             setTime(new Date())
         },1000)
-        console.log(1)
+        // console.log(timer,'time的值2')
         return ()=>{
+        // console.log(timer,'time的值3')
             clearInterval(timer); // 清不掉定时器
-            console.log(2)
         }
     },[])
+    function stop() {
+
+        // console.log(timer,'time的值4')
+        clearInterval(timer)
+    }
     return (
         <div>
             <h1>useEffect</h1>
@@ -45,6 +51,7 @@ function LearnUseEffect() {
             <button onClick={() => {
                 setName("哆啦A梦")
             }}>修改名字</button>
+            <button onClick={stop}>清除定时器</button>
         </div>
     )
 }

20.react/高阶/my-app/src/components/LearnUseRef.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+function LearnUseRef() {
+    /**
+     * useRef 
+     * 1.获取dom值 或者 组件实例
+     * 2.在函数组件整个生命周期内 缓存数据
+     */
+    const [time,setTime] = useState(new Date())
+    const timer = useRef(null);
+    const inpRef = useRef(null);
+    // useRef中返回一个对象 {current:缓存值}
+    // 缓存值 会在整个函数组件的生命周期内保持不变
+    console.log(timer)
+    useEffect(()=>{
+       timer.current = setInterval(()=>{
+            setTime(new Date())
+        },1000)
+        return () => {
+            clearInterval(timer.current)
+        }
+    },[])
+    function stopTime() {
+        clearInterval(timer.current)
+    }
+    inpRef.current.focus()
+    return (
+        <div>
+            <h1>useRef</h1>
+            <p>
+                当前时间:{time.toLocaleString()}
+            </p>
+            <button onClick={stopTime}>清掉定时器</button>
+            <input type="text" ref={inpRef} />
+        </div>
+    )
+}
+export default LearnUseRef;

20.react/高阶/my-app/src/index.js

@@ -6,11 +6,12 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App/>
 );
 
+  // <React.StrictMode>
+  //   <App />
+  // </React.StrictMode>
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals