react hooks map渲染显示问题

Question

问题遇到的现象和发生背景

在onMouseOverOut值改变的时候 列表都会重新渲染一次，每次移入移开 都会

用代码块功能插入代码，请勿粘贴截图

import { useEffect, useRef, useState } from 'react';
const demo: React.FC<{}> = (props: any) => {
  const [onMouseOverOut, setOnMouseOverOut] = useState<any>({});//鼠标进入和鼠标离开
  const [myUsed, setMyUsed] = useState<any>([
    {
      id: 1,
      tit: '测试1',
    },
    {
      id: 2,
      tit: '测试2',
    },
    {
      id: 3,
      tit: '测试3',
    },
    {
      id: 4,
      tit: '测试4',
    },
    {
      id: 5,
      tit: '测试5',
    },
  ])

  const mewsHander = (e) => {
    if (e) {
      setOnMouseOverOut(() => e)
    } else {
      setOnMouseOverOut(() => ({}))
    }
  }
  return (
    <div style={
      {
        'width': '100%',
        'height': '100%',
        marginLeft: '300px'
      }
    }>

      {
        myUsed.map((item: any) => {
          console.log("打印执行");
          return <div key={item.id} style={{
            width: '60px',
            height: '60px',
            'background': '#f7f7f7',
            'boxSizing': 'border-box',
            position: 'relative',
            'border': onMouseOverOut == item ? '1px solid rgb(15, 157, 151)' : '1px solid #f7f7f7'
          }} onMouseOver={() => mewsHander(item)}
            onMouseOut={() => mewsHander(0)}>
            {item.tit}

Answer 1

问题已经解决，这种渲染是没法避免的 ， 思路错了 ， 在子组件加个 memo 就可以避免重复的问题