优化组件结构、优化下拉菜单组件re render的问题

Author: xgChange

src/assets/index.scss

@@ -98,3 +98,7 @@ body,
   background: transparent;
   color: #000;
 }
+
+.ant-input-textarea-show-count::after {
+  color: #e5e5e5;
+}

src/components/my-header/index.tsx

@@ -1,20 +1,34 @@
-import React, { ChangeEvent, memo, PropsWithChildren, useCallback, useState } from 'react'
+import React, { ChangeEvent, memo, PropsWithChildren, useState } from 'react'
 
 import MySvg from '../svg/index'
 import styles from './style.module.scss'
-import { Input, message, Dropdown } from 'antd'
-import {SettingOutlined} from '@ant-design/icons'
-import {settingMenu} from 'src/mock'
-import MyMenu from 'src/components/my-menu'
-import { SettingMenuItem} from 'src/utils'
+import { Input, message, Dropdown, Menu } from 'antd'
+import { SettingOutlined, CheckOutlined } from '@ant-design/icons'
+import { settingMenu } from 'src/mock'
+import { SettingMenuItem } from 'src/utils'
 
 interface MyHeaderProps {
   onInputValue?: (val: string) => void
   onMenuChange?: (val: any) => void
 }
 
-export default memo(function index({ onInputValue, onMenuChange }: PropsWithChildren<MyHeaderProps>) {
-  console.log('header')
+const handleItemContent = (item: SettingMenuItem) => {
+  if (item.type === 'check') {
+    const activedClass = item.value === '1' ? styles['actived'] : ''
+    return (
+      <>
+        <CheckOutlined className={activedClass} />
+        <span className={activedClass}>{item.content}</span>
+      </>
+    )
+  }
+  return item.content
+}
+
+export default memo(function index({
+  onInputValue,
+  onMenuChange,
+}: PropsWithChildren<MyHeaderProps>) {
   const [menuData, setMenuData] = useState<SettingMenuItem[]>(settingMenu)
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -25,23 +39,30 @@ export default memo(function index({ onInputValue, onMenuChange }: PropsWithChil
     onInputValue && onInputValue(value)
   }
 
-  const onChangeKey = (key: string) => {
-    const newData = menuData.map(item => {
+  const onChangeKey = ({ key }: any) => {
+    const newData = menuData.map((item) => {
       if (item.id === parseInt(key)) {
         if (key === '120') {
           const changeValue = item.value === '0' ? '1' : '0'
+          changeValue === '1' && message.success('已启用markdown语法')
           onMenuChange && onMenuChange(changeValue)
-          return {...item, value: changeValue}
+          return { ...item, value: changeValue }
         }
       }
       return item
     })
     setMenuData(newData)
   }
 
-  const showMenu = useCallback(() => {
-    return <MyMenu menuData={menuData} onChangeKey={onChangeKey}/>
-  }, [menuData])
+  const menu = (
+    <Menu onClick={onChangeKey} className={styles['menu-container']}>
+      {menuData.map((item) => (
+        <Menu.Item key={item.id} className={styles['menu-item']}>
+          {handleItemContent(item)}
+        </Menu.Item>
+      ))}
+    </Menu>
+  )
 
   return (
     <div className={styles['header-container']}>
@@ -56,7 +77,7 @@ export default memo(function index({ onInputValue, onMenuChange }: PropsWithChil
         </div>
       </div>
       <div className={`${styles['header-right']} all-center`}>
-        <Dropdown overlay={showMenu}>
+        <Dropdown overlay={menu} trigger={['click']}>
           <SettingOutlined className={styles['setting']} />
         </Dropdown>
       </div>

src/components/my-header/style.module.scss

@@ -40,7 +40,7 @@ $navHeight: 80px;
         border-bottom: 1px dashed #d9d9d9;
         color: #d9d9d9;
         font-size: 18px;
-        &:focus{
+        &:focus {
           font-weight: 700;
           box-shadow: none;
           outline: none;
@@ -55,15 +55,24 @@ $navHeight: 80px;
       }
     }
   }
-  .header-right{
+  .header-right {
     font-size: 22px;
     width: 50px;
     text-align: center;
     .setting {
       cursor: pointer;
       &:hover {
-        opacity: .2;
+        opacity: 0.2;
       }
     }
   }
 }
+.menu-container {
+  .menu-item {
+    user-select: none;
+  }
+
+  .actived {
+    color: green;
+  }
+}

src/components/my-menu/index.tsx

@@ -17,17 +17,15 @@ export default memo(function index() {
   }
   return (
     <div className="top-bot-layout">
-      <MyHeader onInputValue={getInputValue} onMenuChange={getMenuChangeData}/>
+      <MyHeader onInputValue={getInputValue} onMenuChange={getMenuChangeData} />
       {/* 以后这里填 renderRoutes */}
       <ResumName.Provider value={resumName}>
         <ShowMarkdown.Provider value={useMarkdown}>
           <div className="main-container">
             <MyHome />
           </div>
         </ShowMarkdown.Provider>
-
       </ResumName.Provider>
-      
     </div>
   )
 })

src/components/my-menu/style.module.scss

@@ -1,7 +1,4 @@
 .self-skill {
   :global {
-    .ant-input-textarea-show-count::after {
-      color: #e5e5e5;
-    }
   }
 }