react

21.react/高阶/project3/src/App.jsx

@@ -2,6 +2,8 @@ import './App.css'
 import UseLearnState from './components/UseLearnState'
 import UseLearnEffect from './components/UseLearnEffect'
 import UseDemo from './components/UseDemo'
+import UseLearnMemo from './components/UseLearnMemo'
+import UseLearnCallBack from './components/UseLearnCallBack'
 import { useState } from 'react'
 
 
@@ -10,7 +12,8 @@ function App() {
   return (
     <>
       <h1>首页</h1>
-      <UseLearnState />
+      <UseLearnCallBack />
+      {/* <UseLearnMemo /> */}
       {/* {isShow ? <UseLearnEffect /> : '无内容'} */}
       {/* {isShow ? <UseDemo /> : '无内容'} */}
     </>

21.react/高阶/project3/src/components/UseLearnCallBack.jsx

@@ -0,0 +1,45 @@
+import { useCallback, useMemo, memo, useState } from "react"
+
+function UseLearnCallBack() {
+    // const cachedFn = useCallback(fn, dependencies)
+    /**
+     * fn 函数
+     * dependencies 依赖项
+     */
+    // useCallback是useMemo 写法等价
+    // const aa = useCallback(() => fn1(a, b), [a, b])
+    // const bb = useMemo(() => fn1(a, b), [a, b])
+    const [num, setNum] = useState(0);
+    const [text, setText] = useState('');
+    const MemoButton = memo(function MemoButton({ children, onClick, color }) {
+        console.log(children, onClick, color, '子组件')
+        return (
+            <button onClick={onClick} style={{
+                background: color,
+                color: '#ff0',
+                border: 'none'
+            }}>{children}</button>
+        )
+    })
+
+    const handleClick = useCallback(() => {
+        console.log("num触发")
+        setNum(n => n + 1)
+    }, [])
+
+    const handleClickText = () => {
+        console.log("text触发")
+        setText(t => t + 1)
+    }
+    return (
+        <div>
+            <h1>{text}</h1>
+            <h1>useCallBack:缓存函数</h1>
+            <MemoButton children={'稳定'} onClick={handleClick} color={'red'}>稳定</MemoButton>
+            <MemoButton children={'不稳定'} onClick={handleClickText} color={'blue'}>不稳定</MemoButton>
+
+        </div>
+    )
+}
+
+export default UseLearnCallBack;

21.react/高阶/project3/src/components/UseLearnMemo.jsx

@@ -0,0 +1,42 @@
+import { useMemo, useState } from "react";
+function UseLearnMemo() {
+    // const cachedValue = useMemo(calculateValue, dependencies)
+    // calculateValue 返回要缓存的值的函数
+    // dependencies 依赖数组 只有依赖发生变化时才会重新计算
+    /**
+     * 注意:
+     * 1.不要过渡使用 
+     * 2.缓存计算结果 不缓存函数
+     * 3.如果依赖频繁变化 反而会有额外的开销
+     * 4.可以搭配React.memo去使用
+     */
+    const [range, setRange] = useState(100)
+    const [text, setText] = useState(0);
+    const prime = useMemo(() => {
+        console.log(range, 'range')
+        const result = [];
+        for (let i = 2; i < text; i++) {
+            let isPrime = true
+            for (let j = 2; j <= Math.sqrt(i); j++) {
+                if (i % j == 0) {
+                    isPrime = false;
+                    break;
+                }
+            }
+            if (isPrime) result.push(i)
+        }
+        return result;
+    }, [text])
+    return (
+        <div>
+            <h1>useMemo:缓存计算结果</h1>
+            <p>质数范围: 2 ~ {range}</p>
+            <input type="text" value={range} onChange={(e) => setRange(Math.max(2, e.target.value))} />
+            <p>干扰输入:(不触发计算)</p>
+            <input type="text" value={text} onChange={e => setText(e.target.value)} />
+            <h1>找到{prime}质数</h1>
+        </div>
+    )
+}
+
+export default UseLearnMemo;