javascript - React/Redux - 在渲染之前调整状态是否安全

Question

I'm making Tetris in React/Redux, using Brandly's non-redux version for reference/tips and pulling some utilities.

假设我有一个商店(游戏板)，由二维数组表示。这些值要么是 false，要么是该作品的类名称(用于着色)。

此外，还有第二个存储，代表下一个要播放的轨道(并包括正在播放但尚未设置的当前轨道)。

在负责渲染的板组件内部，商店按如下方式附加到 Prop :

const mapStateToProps = (state) => {
  return {
    Board: state.Board,
    PieceList: state.PieceList
  }
}

我的渲染函数如下所示:

  render() {
    var piece = this.props.PieceList.currentPiece;
    var newBoard = _.cloneDeep(this.props.Board);
    pieceSetter(newBoard)(piece._piece.blocks[piece._rotation], piece._position, piece._piece.className);
    return (
      <div className="board">
        {newBoard.map((x, i) =>
          <Row value={x} key={i}/>
        )}
      </div>
    )
  }

其中pieceSetter是一个向棋盘添加棋子的实用函数。

渲染方法是否适合进行一些数据按摩来组合信息？在这个特定的实例中，它将“当前棋子”添加到棋盘上进行显示。

我想避免将当前 block 添加到板的存储中，因为当前处理移动验证功能的方式(板当前忽略用于移动验证的“当前” block 并考虑该 block 将在哪里，没有“未放置的棋子”的概念)

我是否在创建反模式，或者这可以被认为是合适的吗？

Answer 1

最好将这种逻辑放在渲染函数之外。例如，您可以将该代码放置在 mapStateToProps 中，并 trim render 函数仅用于演示。

此外，无需使用_.cloneDeep复制Board对象；渲染链中的 React 组件和容器不会改变存储中对象的状态。