在对象中将对象绑定为组件状态键值的正确方法

Question

我正在创建一个minesweeper React应用，并在板有状态的组件内部进行了初始化，并使用地雷和其他信息填充了板。

该板的初始化如下

// Method that creates a board of empty tiles, populates it with mines and gets the number of neighbouring
// mines for every tile on the board. Returns the initialized board  
initializeBoard(height, width, mines){
    const emptyTiles = this.createEmptyArray(height, width);
    const populatedTiles = this.populateBoard(emptyTiles, height, width, mines);
    const neighbourTiles = this.getNumOfMinesNeighbours(populatedTiles,height, width);
    return this.renderBoard(neighbourTiles);
   }

renderBoard返回一个JSX组件。

我从另一个组件传递来的道具收到高度，宽度和地雷。

我的董事会状态如下：

state = {
    mineCount: this.props.mines,
    gameStatus: null,
    boardData: null
}

我想动态呈现初始化的板并更新boardData键的Board状态值。 现在，我到达了两种不同的方法：

1. 在Board的render（）方法中动态调用Initialize board（），并以某种方式更新其状态
2. 通过调用initializeBoard（）直接分配状态boardData值

方法1在render（）中看起来像这样：

render() {  
    const board= this.initializeBoard(this.props.height, this.props.width, this.props.mines);
    //Save state throws Maximum update depth exceeded.
    return (
        <div>
            {board}
        </div> ...} //end of render

方法2：

state = {
    mineCount: this.props.mines,
    gameStatus: null,
    boardData: this.initializeBoard(this.props.height, this.props.width, this.props.mineCount)
}

现在，我知道在render（）中设置组件的状态是不行 ，但我也找不到合适的生命周期挂钩 ，当在render（）之前创建对象然后将其动态渲染到对象时，该挂钩将起作用JSX，因为我没有通过道具接收此对象。

所以我想知道的是 ：

• 方法2是好的/适当的方法吗？ 还是调用存储状态键值的方法是一种不好的做法？
• 关于生命周期挂钩和在render（）之前创建的对象，我是否缺少某些东西？
• 在这种情况下，是否有任何“最佳实践”来存储国家的关键值？

Answer 1

方法2是好的/适当的方法吗？ 还是调用存储状态键值的方法是一种不好的做法？

不，为什么要这样？

关于生命周期挂钩和在render（）之前创建的对象，我是否缺少某些东西？

不，没有正当理由要钩在那里。

在这种情况下，是否有任何“最佳实践”来存储国家的关键值？

是的，＃2。

Answer 2

也许代码中的更多注释将帮助我更好地理解问题。

constructor(super) {
   state = {
     mineCount: this.props.mines,
     gameStatus: null,
     boardData: null
   }
   this.board = null
   this.populatedTiles = null;
   this.neighbourTiles = null; 
   this.width = this.props.width;
   this.height = this.props.height; 
}

componentDidMount() {
   this.initializeBoard(this.height, this.width, this.state.mines);
}

initializeBoard(height, width, mines){
   const emptyTiles = this.createEmptyArray(height, width);
   this.populatedTiles = this.populateBoard(emptyTiles, height, width, mines);
   this.neighbourTiles = this.getNumOfMinesNeighbours(populatedTiles,height, width);
}

render() {
   const board = this.renderBoard(this.neighbourTiles, this.state) || null;
   return (
     <div>
        {board}
     </div>
   )
} 

Answer 3

上一张海报回答了您的前两个问题，我将在第三个问题上稍作扩展。

简短的答案是＃2是更好的做法。

尝试将其更多地视为面向对象编程问题，而不是反应问题。 您引用的react组件只是react组件类的一个实例。 像任何类一样，它们具有构造函数。 这个想法是您想在构造函数中进行任何状态初始化。 您想在首次实例化该类时准备好“真理之源”。

因此，当您第一次设置状态时，最好在构造函数中进行板初始化。 这样，您可以避免在第一次实例化该类和尝试操纵该板之间的任何状态不一致。 它也更干净，更容易理解，并且符合典型的OOP原则。