react

16.react/react高阶/project1/src/App.js

@@ -4,6 +4,9 @@ import './App.css';
 import LearnUseState from './components/LearnUseState.jsx';
 import Clock from './components/Clock.jsx';
 import LearnUseEffect from './components/LearnUseEffect.jsx';
+import LearnUseRef from './components/LearnUseRef.jsx';
+import LearnUseMemo from './components/LearnUseMemo.jsx';
+import LearnUseCallBack from './components/LearnUseCallBack.jsx';
 function App() {
   return (
     <div className="App">
@@ -11,6 +14,9 @@ function App() {
      <LearnUseState />
      <Clock/>
      <LearnUseEffect/>
+     <LearnUseRef/>
+     <LearnUseMemo/>
+     <LearnUseCallBack/>
     </div>
   );
 }

16.react/react高阶/project1/src/components/LearnUseCallBack.jsx

@@ -0,0 +1,40 @@
+import {useState,useCallback} from 'react';
+/**
+ * useCallback
+ * 允许在多次渲染中缓存函数的
+ * const cachedFn = useCallback(fn, dependencies)
+ * fn：想要缓存的函数
+ * dependencies：有关是否更新 fn 的所有响应式值的一个列表
+ */
+function Other({onClick1,aa}) {
+    return (
+        <>
+            <button onClick={onClick1}>修改名字</button>
+            <input type="text" onChange={aa} />
+        </>
+    )
+}
+function LearnUseCallback() {
+    const [name,setName] = useState("喜羊羊")
+    const [age,setAge] = useState(7)
+    const changeName = useCallback(() => {
+        setName("小花")
+    }, [])
+    const changeAge = useCallback(()=>{
+        setAge(age + 2)
+    },[age])
+    function showMain() {
+        setName("牛魔王")
+    }
+    return(
+        <>
+            <h1>useCallback</h1>
+            <p>我叫{name}</p>
+            <p>今年{age}岁</p>
+            <h1 onClick={showMain}>出现</h1>
+            {/* <Other onClick1={changeName} aa={changeAge} /> */}
+
+        </>
+    )
+}
+export default LearnUseCallback;

16.react/react高阶/project1/src/components/LearnUseMemo.jsx

@@ -0,0 +1,22 @@
+import {useState,useMemo} from 'react';
+/**
+ * useMemo
+ * 能够缓存计算的结果
+ * useMemo(缓存计算值的函数，所有在 calculateValue 函数中使用的响应式变量组成的数组)
+ * const cachedValue = useMemo(calculateValue, dependencies)
+ * 1.提高开发性能
+ * 2.不适用大量计算内容 不适用于频繁发生变化的依赖
+ * 3.适用于数据缓存
+ */
+function LearnUseMemo() {
+    const [num,setNum] = useState(10);
+    const doubleNum = useMemo(()=>num * 2,[num])
+    return(
+        <>
+            <h1>useMemo</h1>
+            <p>初始值：{num}</p>
+            <p>双倍：{doubleNum}</p>
+        </>
+    )
+}
+export default LearnUseMemo;

16.react/react高阶/project1/src/components/LearnUseRef.jsx

@@ -0,0 +1,32 @@
+import { useState,useEffect,useRef } from "react";
+function LearnUseRef() {
+    const [time,setTime] = useState(new Date());
+    let timer = useRef(null); // 缓存当前的定时器
+    let show = useRef(null);// 缓存dom操作
+    console.log(timer.current,'timer.current') // null
+    useEffect(()=>{
+        timer.current = setInterval(()=>{ 
+            setTime(new Date())
+        },1000)
+        show.current.focus();
+        setTimeout(()=>{
+            show.current.blur();
+        },3000)
+        console.log(timer.current,'哈哈哈哈') // 2 
+    },[])
+    function stopTime() {
+        console.log("点击",timer.current) // null
+        clearInterval(timer.current)
+    }
+    // 用单一的timer 无法清除定时器
+    return (
+        <>
+            <h1>useRef</h1>
+            <p>当前时间：{time.toLocaleString()}</p>
+            <button onClick={stopTime}>停止计时</button>
+            <input type="text"  ref={show} />
+
+        </>
+    )
+}
+export default LearnUseRef;