React子组件重渲染失效：点击刷新网格按钮无法重置已点击格子状态

核心问题根源 #

• 状态管理不符合单向数据流规范：每个格子的激活状态存储在Box子组件内部，父组件Grid无法直接访问修改这部分状态，调用setGrid时自然没法重置子组件的内部状态。
• 错误将JSX组件实例存入Grid的state：React的state设计用来存储纯数据，不应该存储渲染后的组件实例，会导致DOM diff逻辑异常。
• 列表渲染未添加唯一key属性：每次调用setGrid生成新的Box数组时没有添加唯一key，React的diff算法会默认按顺序复用已有的Box组件实例，不会销毁重建，因此旧组件的内部状态会被保留，不会触发componentDidMount调用initiate重置状态。

修复代码（遵循React最佳实践） #

核心调整为状态提升，把所有格子的激活状态放到父组件Grid中管理，Box改为受控的纯展示组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 受控Box组件：无内部状态，所有数据和回调来自父组件props
const Box = ({ activated, onClick }) => {
  return (
    <div 
      className="box" 
      style={{ backgroundColor: activated ? 'orange' : 'white' }} 
      onClick={onClick}
    />
  )
}

class Grid extends React.Component {
  constructor() {
    super();
    // state仅存储格子激活状态的纯数据
    this.state = {
      gridStatus: new Array(20 * 20).fill(false)
    }
    // 提前绑定方法的this指向
    this.toggleBox = this.toggleBox.bind(this);
    this.setGrid = this.setGrid.bind(this);
  }

  // 切换指定位置格子的激活状态
  toggleBox(index) {
    const newGridStatus = [...this.state.gridStatus];
    newGridStatus[index] = !newGridStatus[index];
    this.setState({ gridStatus: newGridStatus });
  }

  // 重置网格直接清空状态数组即可
  setGrid() {
    this.setState({
      gridStatus: new Array(20 * 20).fill(false)
    })
  }

  render() {
    // 渲染逻辑统一放在render中，根据状态动态生成JSX
    return (
      <>
        <div className="grid">
          {this.state.gridStatus.map((activated, index) => (
            <Box 
              key={index}
              activated={activated}
              onClick={() => this.toggleBox(index)}
            />
          ))}
        </div>
        <button onClick={this.setGrid}>Refresh Grid</button>
      </>
    )
  }
}

ReactDOM.render(
  <Grid />,
  document.getElementById('root')
);

临时快速修复方案（不推荐长期使用） #

如果暂时不想调整状态结构，只需要在生成Box组件时添加随setGrid变化的唯一key即可，让React每次都销毁旧组件重建新组件，自动触发状态重置：

// 修改Grid的setGrid方法
setGrid() {
  const resetKey = Date.now(); // 每次重置生成唯一前缀
  let grid = [];
  for (let row = 0; row < 20; row++) {
    for (let col = 0; col < 20; col++) {
      grid.push(<Box key={`${resetKey}-${row}-${col}`} />)
    }
  }
  this.setState({grid: grid})
}

最佳实践建议 #

• 优先使用受控组件：可被父组件通过props完全控制的组件更易维护，避免出现父组件无法同步子组件状态的问题。
• state仅存储纯数据：渲染逻辑统一放在render方法中，根据state动态生成JSX，不要把组件实例、DOM节点这类非数据内容存入state。
• 列表项必须添加唯一key：渲染列表时给每个项加稳定的唯一标识，帮助React正确处理列表的增删改，避免不必要的复用或者渲染错误。
• 类组件方法提前绑定this：可以在constructor中绑定this，或者直接用类属性箭头函数定义方法，避免每次render生成新的匿名函数带来的额外性能开销。

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