react

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

@@ -1,4 +1,14 @@
 import { useCallback, useMemo, memo, useState } from "react"
+const MemoButton = memo(function MemoButton({ children, onClick, color }) {
+    console.log(children, '子组件')
+    return (
+        <button onClick={onClick} style={{
+            background: color,
+            color: '#ff0',
+            border: 'none'
+        }}>{children}</button>
+    )
+})
 
 function UseLearnCallBack() {
     // const cachedFn = useCallback(fn, dependencies)
@@ -10,30 +20,20 @@ function UseLearnCallBack() {
     // 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 [text, setText] = useState(1);
 
     const handleClick = useCallback(() => {
         console.log("num触发")
         setNum(n => n + 1)
     }, [])
 
-    const handleClickText = () => {
+    const handleClickText = useCallback(() => {
         console.log("text触发")
         setText(t => t + 1)
-    }
+    }, [])
     return (
         <div>
-            <h1>{text}</h1>
+            <h1>{num}-{text}</h1>
             <h1>useCallBack:缓存函数</h1>
             <MemoButton children={'稳定'} onClick={handleClick} color={'red'}>稳定</MemoButton>
             <MemoButton children={'不稳定'} onClick={handleClickText} color={'blue'}>不稳定</MemoButton>