Удаление глобальных временных таблиц (##tempTable) в SQL Server

Создайте дублирующую функцию initGrid, предназначенную для использования только в конструкторе (присваивая непосредственно this.state вместо использования setState) , Помимо дублирования кода и явного нарушения DRY, это также создает дополнительный метод «одноразового использования» , который приводит к предупреждению «Не изменять состояние напрямую, используйте setState ()», что довольно раздражает. .

Использовать анонимную самопризывающую функцию, которая присваивает непосредственно this.state.grid и this.state.fullColumns в конструкторе:

constructor(props) {
  // ...

  [this.state.grid, this.state.fullColumns] = (function(rows) {
    let grid = [];
    let fullColumns = [];
    let cols = rows + 1;
    for (let c = 0; c < cols; c++) {
      fullColumns.push(false);
      let column = [];
      for (let r = 0; r < rows; r++) {
        column.push(null);
      }
      grid.push(column);
    }
    return [grid, fullColumns];
  })(this.state.rows);
}

componentWillMount теперь можно удалить. Это также избавляет от предупреждения «Не изменять состояние напрямую, используйте setState ()» и не приводит к бессмысленному созданию другого метода для одноразового использования. Но он все еще излишне дублирует код из this.initGrid.

Просто жестко закодируйте начальную сетку и массивы fullColumns в состоянии:

constructor(props) {
  super(props);
  this.state = {
    rows: 6,
    grid: [
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
            [null, null, null, null, null, null],
          ],
    fullColumns: [false, false, false, false, false, false, false]
  }
}

componentWillMount теперь можно удалить. Это приносит в жертву настраиваемость и чувствует себя довольно непрофессионально. Однако, это не без его собственных преимуществ; это приводит к меньшему количеству логики, более эффективно, а также помогает в визуализации / документировании кода.

Измените функцию initGrid, чтобы отличать вызов ее от конструктора от вызова из другого места:

initGrid(rows) {
  // Create grid data structure to keep track of which grid cells
  // contain checkers of which color:
  // 'grid' = array of COLUMN arrays!
  let cols = rows + 1;
  let grid = [];
  let fullColumns = [];
  for (let c = 0; c < cols; c++) {
    fullColumns.push(false);
    let column = [];
    for (let r = 0; r < rows; r++) {
      column.push(null);
    }
    grid.push(column);
  }

  // If 'this.state.grid' is already initialised (i.e. non-empty),
  // the call is NOT from inside the constructor:
  if (this.state.grid.length !== 0) {
    this.setState({
      rows,
      grid,
      fullColumns,
    });
  } else {
    // If the grid is empty, this call came from inside the constructor,
    // so we disable the "Do not mutate state directly, Use setState()" warning:
    // eslint-disable-next-line react/no-direct-mutation-state
    this.state = {
      ...this.state,
      grid,
      fullColumns,
    }
  }
}

Это не излишне дублирует код и сохраняет настраиваемость. Он по-прежнему имеет предупреждение «Не изменять состояние напрямую, используйте setState ()», но он глушит комментарий // eslint-.... Теперь мы можем вызвать this.initGrid(this.state.rows) в конструкторе, а не в componentWillMount.

Это похоже на самое профессиональное решение для меня.