# aaaa

**Repository Path**: jayhony/aaaa

## Basic Information

- **Project Name**: aaaa
- **Description**: 项目测试，面试项目测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-12
- **Last Updated**: 2023-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 主要功能实现
1. 导航： 
- 自己写了一个自定义Hooks，内容如下
``` javascript
export default function useSetColor(arr){
    let [activeItem, setActiveItem] = useState(arr[0])
    useEffect(()=> {
        setActiveItem(arr[0])
    },[arr])
    // 通过useCallbacl优化(子组件不会重新渲染)
    const changePage = useCallback((e) => {
      return () => {
        setActiveItem(e)
      }
    },[])
    return [
        activeItem,
        changePage
    ]
  }
```

该hooks主要用于导航菜单的样式切换，可以传入一个数组对象，例如
[
    {
        name: "最新",
        to: "/zuixin"
    },
    {
        name: "热门",
        to:"/remen"
    }
]
传入后，内部会默认数组中第一个元素为active
然后它会返回一个数组,数组中包裹active和一个回调函数
该回调函数可以传入到你for循环的导航标签中，当点击某个导航栏标签时，会自动改变active对象，即调用render并重新传出一个新的active，你就可以通过这个active去修改样式。



# 程序图片展示
![输入图片说明](2f312951c8a6f6508cad165c041669a.png)
![输入图片说明](b91bd6cc359448ede667bc8879a4847.png)
![输入图片说明](c57a1a30ed7ff5b17ceeb0c91473467.png)
![输入图片说明](9e7e507e21553baa7216fdd717b7939.png)