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

在React的官方版本（tic-tac-toe）中，使用了三个组件：

游戏

、

棋盘

、和

方块

游戏包含一组

方块

，可以包含X、O和

null

：这三种都是基本类型

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

例如，我们可以将

Piece

类的对象存储在

squares

数组中，而不是在squares中显示

Piece.name

？我们能把

块

从

i

移动到

j

以反映在方块上吗

有两个原因需要问这个问题：

几乎所有的React示例都围绕组件展开。我还没有见过其他的类

不鼓励对组件（）进行继承，我认为在上面的示例中，需要对

Piece

类进行专门化

---

谢谢。

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

// 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;
}

//保存板的状态并计算视图层
类板扩展了PureComponent{
建造师（道具）{
超级（道具）；
//根据您希望游戏开始的方式创建棋子
这是1.5件={
p1：新件（“伐木工人”），
p2：新件（“伐木工人”），
p3：新件（“伐木工人”），
p4：新作品（“树”），
p5：新作品（“树”），
p6：新作品（“树”）
}
//扁平化，方便快捷
常数{p1，p2，p3，p4，p5，p6}=this.pieces；
//初始状态，这是通过this.setState方法更新的
//更新渲染视图的步骤
这个州={
正方形：[
[p1，p2，p3]，
[null，null，null]，
[p4、p5、p6]
]
};
}
//生成视图的渲染方法
render（）{
const{squares}=this.state；
常数长度=平方长度；
设i，j jLength，components=[]；
//从该状态数据生成正方形
对于（i=0；i

---

你会在一块板上得到9个方块。一边是伐木工人，中间是干净的，而另一边是吓坏了的树。

我想不出你为什么不能，但我能想到你为什么不应该。我认为，使用功能性无状态组件来表示

片段

，可以更好地完成您试图完成的工作。

Piece

的属性将由父组件的状态或

redux

存储提供给它。

作品本身就是一种表象。其所在位置的逻辑应位于较高的组件中。我真的不认为有必要在这里上课。这个问题很可能是主观的，可能无法回答。根据我的经验，对象通常用于state
{age:25，name:'johndoe'}
，类不是用于state，而是用于组件，正如您所说的。请参阅文档。@styfle，同意对象可以包含状态，但不处理继承。一个
人
可以有
{age:25，name:'John Doe'}
，但它是扩展类
雇员
应该有相同的字段和其他字段。这就是OOP透视图。我只是想知道我们会如何反应。无论如何，谢谢你。谢谢@KyleRichardson。“工件的属性将由父组件的状态赋予它”。这就是我的困惑所在。这些属性存储在何处以及如何存储？对象，类，还有别的吗？绝对不是组件（函数或类），因为没有呈现任何内容，而组件正是用于这些内容的。@TalhaAwan如果它们需要与它们直接相关的状态，则它们的状态将存储在父组件状态的对象中，或存储在
存储区中。他们甚至可能不需要状态，这取决于你想做什么和可能不想做什么。他们可能只会得到一些潜在的道具。他们的定位将由董事会的状态决定。它们的名称、外观等将由创建它们时使用的道具决定。您使用了片段构造函数，为什么不使用类？假设我们也要移动棋盘上的棋子。伐木工人和树木的移动方式不同，但两者都不能跳出木板。这就是我想到的
片段
类具有
move（）
方法的地方<代码>伐木工人
和
树
继承自
工件
。如果我们
move（）
Lumberjack，它会调用super.move（）来确认它没有离开桌子，然后检查它自己的逻辑，最后在允许的情况下移动。这样的事情。谢谢你的回答。真的很感激！你可以在你的棋盘上放置一个移动方法，该方法获取参数，并将参数存储在棋盘上。对我来说似乎是一个更简单的解决方案。是的
move（）
将位于
Board
和
isMoveLegal（src，dest）
中
Piece
。我想，
Piece
还需要一门课。为什么不将类与方法一起使用是我不明白的：），因为构造函数本质上也在做同样的事情。谢谢你的时间和回答。接受它。
isMoveLegal
方法也可以在董事会上。您可以使用
sr