react

react/react高阶/project/src/App.js

@@ -4,6 +4,8 @@ import './App.css';
 import Part from './components/LearnUseState.jsx'
 import Count from './components/Count.jsx'
 import Part2 from './components/LearnUseEffect.jsx'
+import Part3 from './components/LearnUseMemo.jsx'
+import Part4 from './components/LearnUseCallBack.jsx'
 function App() {
   let [open,setOpen] = useState(true)
   function show() {
@@ -15,6 +17,8 @@ function App() {
       <Part/>
       <Count/>
       <Part2/>
+      <Part3></Part3>
+      <Part4/>
     </div>
   ) : <div className='App'>
       <button onClick={show}>显示</button>

react/react高阶/project/src/components/LearnUseCallBack.jsx

@@ -0,0 +1,48 @@
+import { useState, useCallback, useEffect } from "react";
+/**
+ * useCallBack
+ * 允许你在多次渲染中缓存函数的
+ * 只能执行一个函数
+ * useCallback(fn, dependencies)
+ */
+// props state
+function News({use,onClick,onChange}) {
+    useEffect(()=>{
+        console.log("新的执行了")
+    })
+    console.log(use,'use')
+    console.log(onClick,'onClick')
+    return (
+        <>
+            <button onClick={onClick}>修改名字</button>
+            <input type="text" onChange={onChange}  />
+        </>
+    )
+}
+
+function Part4() {
+    let [name,setName] = useState("猪八戒");
+    let [count,setCount] = useState(20)
+    // function handleClick() {
+    //     setName("唐僧")
+    // }
+    // function handleClick() {
+    //     useCallback(()=>{
+    //         setName("哪吒")
+    //     },[])
+    // }
+    const handleClick =  useCallback(()=>{
+        setName("哪吒")
+    },[])
+    const handleChange = useCallback(()=>{
+        setCount(count + 2)
+    },[count])
+    return (
+        <>
+            <h2>我叫{name}</h2>
+            <h4>初始值:{count}</h4>
+            <News use={'你好'} onClick={handleClick} onChange={handleChange}  />
+        </>
+    )
+}
+export default Part4;

react/react高阶/project/src/components/LearnUseMemo.jsx

@@ -0,0 +1,24 @@
+import {useMemo,useState} from 'react';
+/**
+ * useMemo
+ * 能够缓存计算的结果。
+ * useMemo(calculateValue<要缓存计算值的函数>, dependencies< 函数中使用的响应式变量组成的数组>)
+ * 1.提高开发性能
+ * 2.不适合太多计算量的内容 不适用于频繁发生依赖变化的场景
+ * 3.适用于计算场景不是很多的时候
+ * 4.适用于父子数据传递  数据缓存的时候
+ */
+export default function Prat3() {
+    let [num,setNum] = useState(100);
+    // function handleDouble() {
+    //     useMemo
+    // }
+    let doubleNum =  useMemo(()=> num * 2,[num])
+    return (
+        <>
+            <p>初始值：{num}</p>
+            {/* <button onClick = {handleDouble}>点我双倍</button> */}
+            <h1>双倍：{doubleNum}</h1>
+        </>
+    )
+}