React:自定义hook

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

@@ -3,7 +3,8 @@ import './App.css';
 // import LearnUseEffect from './components/LearnUseEffect';
 // import LearnUseRef from './components/LearnUseRef';
 // import LearnUseMemo from './components/LearnUseMemo';
-import LearnUseCallback from './components/LearnUseCallback';
+// import LearnUseCallback from './components/LearnUseCallback';
+import CustomHook from './components/CustomHook';
 
 function App() {
   return (
@@ -12,8 +13,10 @@ function App() {
         {/* <LearnUseState />
         <LearnUseEffect />
         <LearnUseRef />
-        <LearnUseMemo /> */}
+        <LearnUseMemo />
         <LearnUseCallback />
+         */}
+        <CustomHook />
       </header>
     </div>
   );

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

@@ -0,0 +1,25 @@
+import useStorage from '../hooks/useStrorage';
+
+function CustomHook() {
+  let [count, setCount] = useStorage('count');
+  let [msg, setMsg] = useStorage('message');
+  return (
+    <div>
+      <p>
+        local storage：{count} == {msg}
+      </p>
+      <p>
+        <button
+          onClick={() => {
+            setCount(count + 10);
+            setMsg(`加1--${Date.now()}`);
+          }}
+        >
+          +10
+        </button>
+      </p>
+    </div>
+  );
+}
+
+export default CustomHook;

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

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

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

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+function useStorage(key) {
+  let [value, setValue] = useState(() => localStorage.getItem(key));
+
+  function setStorage(newValue) {
+    localStorage.setItem(key, newValue);
+    setValue(newValue);
+  }
+  return [value, setStorage];
+}
+
+export default useStorage;