React组件重渲染时自定义类实例方法丢失问题排查

根本原因 #

首次渲染能正常调用方法、重渲染后方法丢失的核心逻辑非常明确：

• 首次渲染时props.tile是通过new Tile()创建的类实例，原型链完整，可以正常访问挂载在Tile.prototype上的adjacentBombCount、explore、toggleFlag等实例方法
• 触发重渲染时，传递给Tile组件的tile已经不是Tile类的实例，而是被切断了原型链的普通JavaScript对象，原型上挂载的方法全部丢失，调用时自然会抛出"方法不存在"的报错

绝大多数场景下问题来自三个编码疏漏：

• 状态更新时对Board/Tile类实例做了对象展开、JSON序列化/反序列化操作，这类操作只会保留对象的自有属性，会直接丢弃原型链上的所有方法
• Board类内部生成、更新棋盘格子的逻辑中，返回了普通对象字面量代替Tile类实例，比如翻开格子、布雷操作后直接替换成{x:0,y:0,isBomb:false}格式的普通对象
• 组件传参时错误解构Tile实例，或者用Immer等不可变工具库包裹类实例，工具自动将类实例转换为普通代理对象，丢失原型方法

可落地修复方案 #

1. 状态更新时保留类实例引用，禁止随意拷贝类实例 #

类实例的方法依赖原型链存在，不要对类实例做展开、深拷贝操作。所有棋盘数据的修改都通过类自身的实例方法完成，更新React状态时直接传入修改后的类实例引用即可：

// Game.jsx 错误写法：会丢失原型方法
const updateGame = (modifiedBoard) => {
  // 展开实例、JSON序列化都会切断原型链
  // setBoard({...modifiedBoard})
  // setBoard(JSON.parse(JSON.stringify(modifiedBoard)))
}

// Game.jsx 正确写法
const [board, setBoard] = useState(() => new Board(16, 40)) // 初始化时直接new实例
const updateGame = () => {
  // 直接调用Board/Tile的实例方法修改内部数据
  // 比如点击格子时调用 board.revealTile(x, y)
  setBoard(prev => {
    // 不要拷贝实例，直接返回修改后的原实例触发重渲染
    return prev
  })
}

2. 所有格子数据必须是Tile类实例 #

检查Board类的generateBoard、plantBombs、revealTile等所有涉及格子创建、更新的方法，确保所有存入tiles数组的格子都是通过new Tile()创建的实例，禁止用普通对象字面量替换：

// Board.js 错误写法：返回普通对象，无原型方法
generateBoard(size) {
  this.tiles = Array(size).fill(0).map((_,y) => 
    Array(size).fill(0).map((_,x) => ({x, y, isBomb: false}))
  )
}

// Board.js 正确写法
generateBoard(size) {
  this.tiles = Array(size).fill(0).map((_,y) => 
    Array(size).fill(0).map((_,x) => new Tile(x, y)) // 所有格子都是Tile实例
  )
}

3. 组件传参时传递完整实例引用 #

遍历渲染Tile组件时，直接将完整的tile实例作为props传递，不要展开实例属性透传，避免丢失实例引用：

// Board.jsx 正确遍历写法
{board.tiles.map(row => 
  row.map(tile => (
    <Tile
      key={`${tile.x}-${tile.y}`}
      tile={tile} // 传递完整Tile实例，不要写 {...tile}
      updateGame={updateGame}
    />
  ))
)}

有效性验证 #

修复后可以在Tile组件渲染逻辑中加一行校验，只要重渲染时输出为true就说明实例引用正常：

// Tile.jsx
console.log(tile instanceof Tile) // 首次渲染、所有重渲染场景下都应返回true

内容的提问来源于stack exchange，提问作者agehlot