update

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>

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>
+    );
+};

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;