Question

我在React / Redux中制作俄罗斯方块，使用Brandly's non-redux version作为参考/提示并提取一些实用程序。

让我们说我有一个商店（游戏板），由二维数组代表。这些值要么是假的，要么是作品类的名称（用于着色）。

此外，还有第二个商店代表下一个要播放的作品（包括正在播放但尚未设置的当前作品）。

在负责渲染的棋盘组件内部，商店如下所示附加到道具：

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是用于向棋盘添加棋子的实用功能。

渲染方法是否适合进行一些数据按摩以组合信息？在这个特殊情况下，它将“当前部分”添加到电路板上进行显示。

我想避免将当前的部件添加到电路板的商店中，因为当前处理了移动验证功能（电路板当前忽略了“当前”部件的运动验证并考虑了部件的位置，没有“未放置的部分”的概念）

我是在创建反模式，还是认为这是合适的？

Answer 1

最好将此类逻辑放在render函数之外。例如，您可以将该代码放在mapStateToProps内，然后修剪 render函数仅仅是表示。

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

React / Redux - 在渲染之前按摩状态是否安全

1 个答案: