优化 tile re-render

GenniaApp · Feb 7, 2024 · 4a358d0 · 4a358d0
1 parent d33dce6
commit 4a358d0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/client/components/game/GameMap.tsx b/client/components/game/GameMap.tsx
@@ -50,7 +50,7 @@ function GameMap() {
   };
 
   const { setSelectedMapTileInfo, halfArmy, clearQueue, popQueue, selectGeneral,
-    
+
     handlePositionChange, testIfNextPossibleMove,
     handleClick,
     attackUp, attackDown, attackLeft, attackRight } = useGameDispatch();
@@ -373,17 +373,17 @@ function GameMap() {
         {displayMapData.map((tiles, x) => {
           return tiles.map((tile, y) => {
             return (
-              <MapTile
-                isNextPossibleMove={testIfNextPossibleMove(tile.tile[0], x, y)}
-                handleClick={() => handleClick(tile.tile, x, y, myPlayerIndex)}
-                // handleClick={() => { }}
-                key={`${x}/${y}`}
-                zoom={zoom}
-                size={tileSize}
-                x={x}
-                y={y}
-                {...tile}
-                warringStatesMode={room.warringStatesMode} />
+              <div key={`${x}/${y}`}
+                onClick={() => handleClick(tile.tile, x, y, myPlayerIndex)}>
+                <MapTile
+                  isNextPossibleMove={testIfNextPossibleMove(tile.tile[0], x, y)}
+                  zoom={zoom}
+                  size={tileSize}
+                  x={x}
+                  y={y}
+                  {...tile}
+                  warringStatesMode={room.warringStatesMode} />
+              </div>
             );
           });
         })}

diff --git a/client/components/game/MapTile.tsx b/client/components/game/MapTile.tsx
@@ -28,7 +28,6 @@ interface MapTileProps {
   isSelected: boolean;
   isNextPossibleMove: boolean;
   warringStatesMode: boolean;
-  handleClick: () => void;
 }
 
 export default React.memo(function MapTile(props: MapTileProps) {
@@ -46,9 +45,8 @@ export default React.memo(function MapTile(props: MapTileProps) {
     isSelected,
     isNextPossibleMove,
     warringStatesMode = false,
-    handleClick
   } = props;
-  // console.log(`${x} ${y} render`, new Date().toISOString());
+  console.log(`${x} ${y} render`, new Date().toISOString());
   const [cursorStyle, setCursorStyle] = useState('default');
 
   const [tileType, color, unitsCount] = tile;
@@ -151,7 +149,6 @@ export default React.memo(function MapTile(props: MapTileProps) {
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
     >
       <div
         style={{