react

21.react/高阶/project3/src/App.jsx

@@ -4,6 +4,8 @@ import UseLearnEffect from './components/UseLearnEffect'
 import UseDemo from './components/UseDemo'
 import UseLearnMemo from './components/UseLearnMemo'
 import UseLearnCallBack from './components/UseLearnCallBack'
+import UseDemo1 from './components/UseDemo1'
+import UseLearnContext from './components/UseLearnContext'
 import { useState } from 'react'
 
 
@@ -12,7 +14,7 @@ function App() {
   return (
     <>
       <h1>首页</h1>
-      <UseLearnCallBack />
+      <UseLearnContext />
       {/* <UseLearnMemo /> */}
       {/* {isShow ? <UseLearnEffect /> : '无内容'} */}
       {/* {isShow ? <UseDemo /> : '无内容'} */}

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

@@ -0,0 +1,52 @@
+import { memo, useCallback, useMemo, useState } from "react";
+
+const Button = memo(({ children, onClick, color, onSend }) => {
+    console.log("触发")
+    return (
+        <button onClick={onClick} style={{
+            background: color,
+            color: '#ff0',
+            border: 'none'
+        }}>
+            <span >{children}</span>
+        </button>
+    )
+})
+
+// useMemo - useCallBack
+/**
+ * 
+ * useCallBack(fn,[]) == useMemo(() => {return fn}, [])
+ */
+
+function UseDemo1() {
+    const [count, setCount] = useState(1);
+    // const handleCount = useCallback(() => {
+    //     console.log('1')
+    //     setCount(count + 1)
+    // }, [])
+    // const handleCount = useMemo(() => {
+    //     console.log('2')
+    //     return () => setCount(c => c + 1)
+    //     // return 
+    // }, [])
+
+    const handleCount = () => {
+        // setCount(count + 1)
+    }
+    const handleClick = useCallback(() => {
+        setCount(count => count + 1)
+        console.log(count, 'count')
+    }, [count])
+
+
+    return (
+        <div>
+            <h1>练习:useCallBack--useMemo</h1>
+            <h1>{count}</h1>
+            <Button onClick={handleClick} children={'加一'} color="red">加一</Button>
+        </div>
+    )
+}
+
+export default UseDemo1;

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

@@ -1,4 +1,6 @@
 import { useCallback, useMemo, memo, useState } from "react"
+
+
 const MemoButton = memo(function MemoButton({ children, onClick, color }) {
     console.log(children, '子组件')
     return (
@@ -9,7 +11,6 @@ const MemoButton = memo(function MemoButton({ children, onClick, color }) {
         }}>{children}</button>
     )
 })
-
 function UseLearnCallBack() {
     // const cachedFn = useCallback(fn, dependencies)
     /**

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

@@ -0,0 +1,50 @@
+import { useContext, useState, createContext } from "react";
+// import { createContext } from "react";
+const UserContext = createContext(null);
+const ThemeContext = createContext(null);
+
+// provider 组件
+function UseLearnContext() {
+    // 跨组件数据共享
+    // const value = useContext(SomeContext)
+    const [user, setUser] = useState({
+        name: "图图"
+    })
+    const [theme, setTheme] = useState('light')
+
+    return (
+        <div>
+            <h1>useContext</h1>
+            <ThemeContext.Provider value={{ theme, setTheme }}>
+                <UserContext.Provider value={{ user, setUser }}>
+                    <Main></Main>
+                </UserContext.Provider>
+            </ThemeContext.Provider>
+        </div>
+    )
+}
+
+// 接受组件 Context 
+function Main() {
+    const { user, setUser } = useContext(UserContext);
+    const { theme, setTheme } = useContext(ThemeContext);
+    function handleClick() {
+        setUser({
+            name: '小妹'
+        })
+    }
+
+    function handleChange() {
+        setTheme('dark')
+    }
+    return (
+        <div >
+            <h1>新组件:我的用户是{user.name}</h1>
+            <h2>当前主题是：{theme == 'light' ? '浅色' : '深色'}</h2>
+            <button onClick={handleClick}>修改</button>
+            <button onClick={handleChange}>修改主题</button>
+        </div>
+    )
+}
+
+export default UseLearnContext;