React:useMemo&useCallback的使用

15_React/day-4/code/my-app/src/App.js

@@ -1,15 +1,19 @@
 import './App.css';
-import LearnUseState from './components/LearnUseState';
-import LearnUseEffect from './components/LearnUseEffect';
-import LearnUseRef from './components/LearnUseRef';
+// import LearnUseState from './components/LearnUseState';
+// import LearnUseEffect from './components/LearnUseEffect';
+// import LearnUseRef from './components/LearnUseRef';
+// import LearnUseMemo from './components/LearnUseMemo';
+import LearnUseCallback from './components/LearnUseCallback';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <LearnUseState />
+        {/* <LearnUseState />
         <LearnUseEffect />
         <LearnUseRef />
+        <LearnUseMemo /> */}
+        <LearnUseCallback />
       </header>
     </div>
   );

15_React/day-4/code/my-app/src/components/LearnUseCallback.jsx

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+function MyButton({ onClick }) {
+  // console.log(`output->MyButton`);
+  return <button onClick={onClick}>点击</button>;
+}
+
+function LearnUseCallback() {
+  let [c, setC] = useState(0);
+
+  let cbRef = useRef(null);
+
+  // useEffect(() => {
+  //   cbRef.current = handleClick;
+  // }, []);
+
+  useEffect(() => {
+    document.title = `你点击按钮 ${c} 次`;
+  }, [c]);
+
+  let handleClick = useCallback(() => {
+    setC((prevC) => prevC + 1);
+  }, []);
+
+  // let handleClick = useCallback(() => {
+  //   setC(c + 1);
+  // }, [c]);
+
+  // useEffect(() => {
+  //   console.log(`output->`, cbRef.current == handleClick);
+  // });
+
+  return (
+    <div>
+      <MyButton onClick={handleClick} />
+    </div>
+  );
+}
+
+export default LearnUseCallback;

15_React/day-4/code/my-app/src/components/LearnUseMemo.jsx

@@ -0,0 +1,26 @@
+import { useMemo, useState } from 'react';
+
+function LearnUseMemo() {
+  let [count, setCount] = useState(0);
+
+  let doubleCount = useMemo(() => count * 2, [count]);
+
+  return (
+    <div>
+      <p>计数的2倍：{count * 2}</p>
+      <p>计数的2倍：{doubleCount}</p>
+
+      <p>
+        <button
+          onClick={() => {
+            setCount((prevState) => prevState + 1);
+          }}
+        >
+          +
+        </button>
+      </p>
+    </div>
+  );
+}
+
+export default LearnUseMemo;