react

20.react/高阶/my-app/src/App.js

@@ -3,6 +3,7 @@ import LearnUseEffect from "./components/LearnUseEffect";
 import LearnUseRef from "./components/LearnUseRef";
 import LearnUseMemo from './components/LearnUseMemo';
 import LearnUseCallBack from "./components/LearnUseCallBack";
+import CustomHook from './components/CustomHook';
 import { useState } from "react";
 function App() {
   const [show, setShow] = useState(true)
@@ -12,6 +13,7 @@ function App() {
       <LearnUseRef></LearnUseRef>
       <LearnUseMemo></LearnUseMemo>
       <LearnUseCallBack></LearnUseCallBack>
+      <CustomHook></CustomHook>
     </div>) : (
     <div>
       <LearnUseState></LearnUseState>

20.react/高阶/my-app/src/components/CustomHook.jsx

@@ -0,0 +1,14 @@
+import useStorage from "../hooks/useStorage";
+
+function CustomHook() {
+    const [num,setNum] = useStorage('num')
+    return (
+        <div>
+            <h1>自定义Hook</h1>
+            <button onClick={()=>{
+                setNum(num+100)
+            }}>+一百</button>
+        </div>
+    )
+}
+export default CustomHook;

20.react/高阶/my-app/src/components/LearnUseCallBack.jsx

@@ -1,10 +1,13 @@
-import { useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 
 
-function MyButton({onClick}) {
+// function MyButton({onClick}) {
+//     return <button onClick={onClick}>点击</button>
+// }
+const MyButton = memo(({onClick}) =>{
+    console.log(121)
     return <button onClick={onClick}>点击</button>
-}
-
+})
 function LearnUseCallBack() {
     const [num,setNum] = useState(0);
     /**

20.react/高阶/my-app/src/components/LearnUseMemo.jsx

@@ -19,6 +19,7 @@ function LearnUseMemo() {
             <button onClick={()=>{
                 setCount((prevState) => prevState+2)
             }}>修改数值</button>
+            <input type="range" onChange={(e)=>console.log(e)} />
         </div>
     )
 }

20.react/高阶/my-app/src/components/LearnUseState.jsx

@@ -16,6 +16,7 @@ function LearnUseState() {
    * 第一个字段是初始值，
    * 第二个字段是修改状态变量的函数
    * 当函数被调用时  会修改状态 同时也会更新组件
+   * 一个页面中可以有多个state
    */
 //   console.log(useState())
     return (

20.react/高阶/my-app/src/hooks/useStorage.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+/**
+ * 
+ * @param {*} key 
+ * @returns 
+ * 调用useStorage()传入 存储的名字
+ * 可以通过存储的名字获取到本地存储的值
+ * 返回一个数组 两个字段
+ * 第一个字段：本地存储的值
+ * 第二个字段：修改本地存储值的方法
+ */
+function useStorage(key) {
+    const [val,setVal] = useState(()=>localStorage.getItem(key));
+    // setVal(12)
+    function setStorage(newVal) {
+        localStorage.setItem(key,newVal);
+        setVal(newVal);
+    }
+    return [val,setStorage]
+}
+export default useStorage;