React：通过id更新元素的数据变量

Question

由于性能问题，为了跑得更快，我想一个一个地刷新一个格子的单元格。我已经成功地能够通过以下方式更改这些单元格的设计：document.getElementById(`cell-${cell.row}-${cell.col}`).className =      "cell cell-isPlaced";每个单元格都有一个数据变量props.data.num，我想在更改其设计时以相同的方式刷新它。由于某些原因，下面的代码没有刷新网格上的数字（为了更容易理解，每个单元格的值为 0，我想将其更改为 1）：document.getElementById(`cell-${cell.row}-${cell.col}`).num = 1;细胞：const Cell = (props) => {  let cell = () => {    return (      <div        className={`cell ${getColor(props)}`}        id={`cell-${props.data.row}-${props.data.col}`}      >        {props.data.num}      </div>    );  };  return cell();};export default Cell;元素的数据可以按照我想要的方式更改吗？（一般情况下，所有单元格都显示 0 num，这没有问题）。网格渲染：let grid = this.state.grid.map((row, index) => {      return (        <div key={index} className="row">          {row.map((cell, cellIndex) => {            return (              <Cell                key={cellIndex}                data={cell}              />            );           })}       </div>      );    });初始化期间单元格中的数据： function createGrid(props) {  let grid = [];  for (let i = 0; i < props.rows; i++) {    grid.push([]);    for (let j = 0; j < props.columns; j++) {      grid[i].push({        row: i,        col: j,        num: 0,      });    }  }  return grid;}

Answer 1

嗯，基本上你的组件不会刷新，因为React不知道它应该重新渲染：

每次组件状态发生变化时，React 都会安排一次渲染。

和

因此，子组件仅在使用其中一个函数更改了父组件的状态时更新。

由于您不通过setState函数或等效功能更改组件的状态，因此不会触发重新渲染。

为了解决这个问题，我想你有两个选择。要么将 num props 的更新转换为 setState 函数，要么尝试暴力方式并this.forceUpdate()为类组件做一个，或者为功能组件做这样的事情：

const [update, setUpdate] = useState(0);
const refresh = () => setUpdate(update + 1);