From 24f7f9524ee678e0192f4fe2bb69974057901f6a Mon Sep 17 00:00:00 2001
From: pincman <pincman1988@gmail.com>
Date: Sun, 12 May 2024 06:07:54 +0800
Subject: [PATCH] update

---
 apps/admin/src/app.tsx                      |  4 +++
 apps/admin/src/components/demo/callback.tsx | 30 ++++++++++++++++
 apps/admin/src/components/demo/memo.tsx     | 40 +++++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 apps/admin/src/components/demo/callback.tsx
 create mode 100644 apps/admin/src/components/demo/memo.tsx

diff --git a/apps/admin/src/app.tsx b/apps/admin/src/app.tsx
index 114527e..22153b0 100644
--- a/apps/admin/src/app.tsx
+++ b/apps/admin/src/app.tsx
@@ -6,7 +6,9 @@ import zhCN from 'antd/locale/zh_CN';
 import { FC } from 'react';
 
 import $styles from './app.module.css';
+import { CallbackDemo } from './components/demo/callback';
 import EffectDemo from './components/demo/effect';
+import MemoDemo from './components/demo/memo';
 import RefDemo from './components/demo/ref';
 import StateDemo from './components/demo/state';
 
@@ -25,6 +27,8 @@ const App: FC = () => {
                         <StateDemo />
                         <EffectDemo />
                         <RefDemo />
+                        <MemoDemo />
+                        <CallbackDemo />
                     </div>
                 </AntdApp>
             </StyleProvider>
diff --git a/apps/admin/src/components/demo/callback.tsx b/apps/admin/src/components/demo/callback.tsx
new file mode 100644
index 0000000..21d887d
--- /dev/null
+++ b/apps/admin/src/components/demo/callback.tsx
@@ -0,0 +1,30 @@
+import { Button } from 'antd';
+import clsx from 'clsx';
+import { FC, memo, useCallback, useEffect, useState } from 'react';
+
+import $styles from './style.module.css';
+
+const Info: FC<{ call: () => void }> = memo(() => {
+    console.log('渲染消息');
+    return null;
+});
+
+export const CallbackDemo: FC = () => {
+    const [, setCount] = useState<number>(0);
+    const changeCount = () => setCount(Math.ceil(Math.random() * 10));
+    const getInfo = useCallback(() => {}, []);
+    useEffect(() => {
+        console.log('getInfo函数的值改变');
+    }, [getInfo]);
+    return (
+        <div className={clsx($styles.container, 'tw-w-[20rem]')}>
+            <h2 className="tw-text-center">useCallback Demo</h2>
+            <div className="tw-flex tw-justify-around">
+                <Info call={getInfo} />
+                <Button onClick={changeCount} type="dashed">
+                    变化coun1
+                </Button>
+            </div>
+        </div>
+    );
+};
diff --git a/apps/admin/src/components/demo/memo.tsx b/apps/admin/src/components/demo/memo.tsx
new file mode 100644
index 0000000..ce1d2a0
--- /dev/null
+++ b/apps/admin/src/components/demo/memo.tsx
@@ -0,0 +1,40 @@
+import { Button } from 'antd';
+import clsx from 'clsx';
+import { FC, memo, useState } from 'react';
+
+import $styles from './style.module.css';
+
+const ChildCom1: FC<{ value: number }> = memo(() => {
+    console.log('渲染子组件1');
+    return null;
+});
+const ChildCom2: FC<{ value: number }> = memo(() => {
+    console.log('渲染子组件2');
+    return null;
+});
+const MemoDemo: FC = () => {
+    const [count1, setCount1] = useState<number>(0);
+    const [count2, setCount2] = useState<number>(0);
+    // const ChildWrap1 = useMemo(() => <ChildCom1 value={count1} />, [count1]);
+    // const ChildWrap2 = useMemo(() => <ChildCom2 value={count2} />, [count2]);
+    return (
+        <div className={clsx($styles.container, 'tw-w-[20rem]')}>
+            <h2 className="tw-text-center">useMemo Demo</h2>
+            <div className="tw-flex tw-justify-around">
+                <Button onClick={() => setCount1(Math.ceil(Math.random() * 10))} type="dashed">
+                    变化coun1
+                </Button>
+                <Button onClick={() => setCount2(Math.ceil(Math.random() * 10))} type="dashed">
+                    变化coun2
+                </Button>
+            </div>
+            <div className="tw-flex tw-justify-around">
+                <ChildCom1 value={count1} />
+                <ChildCom2 value={count2} />
+                {/* {ChildWrap1}
+                {ChildWrap2} */}
+            </div>
+        </div>
+    );
+};
+export default MemoDemo;