使用组件以外的 es6 类（React Js）

Question

在React的官方tutorial（井字游戏）中，使用了三个组件：Game、Board和Square。

Game 包含一个 squares 数组，可以包含 X、O 和 null：这三个都是原始类型。

我的问题：使用 es6 类（不扩展组件，因为不渲染任何东西）来保存信息原语肯定不能保存，这是一种公认的做法吗？这些类也可以从其他类继承。

例如，我们可以将Piece 类的对象存储在squares 数组中，而不是X/O 显示piece.name 在正方形中吗？我们可以将piece 从i 移动到j 以反映在棋盘上吗？

需要问这个有两个原因：

1. 几乎所有 React 示例都围绕组件展开。我还没有看到其他使用的类。

2. 不鼓励对组件 (composition vs inheritance) 进行继承，我认为在上面的示例中需要专门化 Piece 类。

谢谢。

Answer 1

这是我所说的一个例子。我没有包含任何状态更新机制，这是相当概念性的，但我想你会明白要点的。

// holds the state of your board and calculates the view layer
class Board extends PureComponent {
    constructor( props ) {
        super( props );

        // create pieces for however you want the game to start
        this.pieces = {
            p1: new piece( "Lumberjack" ),
            p2: new piece( "Lumberjack" ),
            p3: new piece( "Lumberjack" ),
            p4: new piece( "Tree" ),
            p5: new piece( "Tree" ),
            p6: new piece( "Tree" )
        }

        // flatten for easy and speed of access
        const { p1, p2, p3, p4, p5, p6 } = this.pieces;

        // initial state, this is what gets updated by this.setState method
        // to update the rendered view
        this.state ={
            squares: [
                [ p1, p2, p3 ],
                [ null, null, null ],
                [ p4, p5, p6 ]
            ]
        };
    }

    // render method that produces the view
    render() {
        const { squares } = this.state;
        const iLength = squares.length;
        let i, j jLength, components = [ ];

        // generate the Squares from this.state data
        for ( i = 0; i < iLength; i++ ) {
            jLength = squares[ i ].length;
            for ( j = 0; jLength; j++ ) {
                components.push( <Square piece={ squares[ i ][ j ] } /> );
            }
        }

        // render the Squares containing the pieces
        return (
            <div className="board">
                { components }
            </div>
        );
    }
}

// piece constructor
function piece( name ) {
    this.name = name;
}

你最终会在一个板上有 9 个方格。一边是伐木工人，中间是空旷的，另一边是非常害怕的树。