Javascript 使用React Redux的生命游戏

目前我正在工作，我认为这将是一个伟大的项目，以测试我的知识反应Redux

因为我是Redux的新手，所以我很难理解在这个项目中什么是哑组件，什么是智能组件

在我看来，这就是我的看法：

注意：当我说“智能组件”和“哑组件”时，我的意思是，作为“智能组件”，它是一个容器，或者是与应用程序状态相关的东西，而作为“哑组件”，它的工作只是简单地呈现它所提供的任何内容

如果我的假设是正确的，那么我很难在单元格上正确设置应用程序状态

以下是我到目前为止所写的内容：

组件/board.js

import React, { Component } from 'react';
import Cell from '../containers/cell'

export default class Board extends Component {
  constructor(props){
    super(props);
    this.state = {height: 18, width: 40}
    this.test = this.test.bind(this)
  }
  test(){
    console.log(this.state)
  }
  render(){
    let rows = [];
    for (var i = 0; i < this.state.height; i++){
      let rowID = `row${i}`
      let bin = []
      for (var idx = 0; idx < this.state.width; idx++){
        let cellID = `cell${i}-${idx}`
        bin.push(<Cell key={cellID} id={cellID}/>)
      }
      rows.push(<tr key={i} id={rowID}>{bin}</tr>)
    }
    return(
      <div className="container">
        <div className="row">
          <div className="col s12 board"></div>
            <table id="simple-board">
               <tbody>
                 {rows}
               </tbody>
             </table>
          </div>
      </div>
    )
  }
}

import React, { Component } from 'react';

// import from '../actions/index';
// import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';


export default class Cell extends Component{
  constructor(props){
    super(props);
    this.state = {
      color: 'dead'
    };
    this.test = this.test.bind(this);
  }

  test(){
    this.state.color === 'dead' ? this.setState({color:'alive'}) : this.setState({color:'dead'})
  }

  render(){
    return (
      <td
        className={this.state.color}
        key={this.props.cellID}
        id={this.props.cellID}
        onClick={this.test}>
      </td>
    )
  }
}

// function mapDispatchToProps(dispatch){
//   return bindActionCreators({}, dispatch)
// }

// export default connect(null,mapDispatchToProps)()

import React，{Component}来自'React'；
从“../containers/Cell”导入单元格
导出默认类板扩展组件{
建造师（道具）{
超级（道具）；
this.state={高度：18，宽度：40}
this.test=this.test.bind（this）
}
测试（）{
console.log（this.state）
}
render（）{
让行=[]；
对于（var i=0；i

容器/cell.js

import React, { Component } from 'react';
import Cell from '../containers/cell'

export default class Board extends Component {
  constructor(props){
    super(props);
    this.state = {height: 18, width: 40}
    this.test = this.test.bind(this)
  }
  test(){
    console.log(this.state)
  }
  render(){
    let rows = [];
    for (var i = 0; i < this.state.height; i++){
      let rowID = `row${i}`
      let bin = []
      for (var idx = 0; idx < this.state.width; idx++){
        let cellID = `cell${i}-${idx}`
        bin.push(<Cell key={cellID} id={cellID}/>)
      }
      rows.push(<tr key={i} id={rowID}>{bin}</tr>)
    }
    return(
      <div className="container">
        <div className="row">
          <div className="col s12 board"></div>
            <table id="simple-board">
               <tbody>
                 {rows}
               </tbody>
             </table>
          </div>
      </div>
    )
  }
}

import React, { Component } from 'react';

// import from '../actions/index';
// import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';


export default class Cell extends Component{
  constructor(props){
    super(props);
    this.state = {
      color: 'dead'
    };
    this.test = this.test.bind(this);
  }

  test(){
    this.state.color === 'dead' ? this.setState({color:'alive'}) : this.setState({color:'dead'})
  }

  render(){
    return (
      <td
        className={this.state.color}
        key={this.props.cellID}
        id={this.props.cellID}
        onClick={this.test}>
      </td>
    )
  }
}

// function mapDispatchToProps(dispatch){
//   return bindActionCreators({}, dispatch)
// }

// export default connect(null,mapDispatchToProps)()

import React，{Component}来自'React'；
//从“../actions/index”导入；
//从'react redux'导入{connect}；
//从“redux”导入{bindActionCreators}；
导出默认类单元格扩展组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：“死亡”
};
this.test=this.test.bind（this）；
}
测试（）{
this.state.color==='dead'？this.setState（{color:'alive'}）：this.setState（{color:'dead'}）
}
render（）{
返回(
)
}
}
//功能图DispatchToprops（调度）{
//返回bindActionCreators（{}，dispatch）
// }
//导出默认连接（null，mapDispatchToProps）（）

我不确定在这一点上我该如何接近。起初，我想必须将所有单元格包装在一个数组中，这将是应用程序的状态，但我不知道如何继续

---

任何回复都将不胜感激

我建议您将层次结构设置为这样。我将以类似JSON的语法表示组件层次结构，以便您能够理解：

App (smart) {
  dispatchProps: {
    ...gameControlActions, // gets passed into GameControls
    onCellClick, // gets passed down to Board, and then to each Cell
  }
  stateProps: {
    cells: [{
      id: #
      status: 'dead', // or 'alive'
    }], // gets passed down to Board, to render cells
    ...generationData, // gets passed down to Generation
  }
}
  // Children of App
  GameControls (dumb) // start, clear, randomize
  Board (dumb)
    Cells (dumb)
  Generation (dumb)

渲染单元时，将按如下方式渲染它们：

<Cell key={cellID} id={cellID} status={status} onClick={this.props.onCellClick} />

function onCellClick(cellId) {
  return {
    type: 'CELL_CLICK',
    payload: cellId,
  };
}

您的

onCellClick

操作将如下所示：

<Cell key={cellID} id={cellID} status={status} onClick={this.props.onCellClick} />

function onCellClick(cellId) {
  return {
    type: 'CELL_CLICK',
    payload: cellId,
  };
}

然后，通过在单元格数组中切换该单元格的

状态

（记住返回

单元格的新副本

），可以在reducer中处理该操作。此外，如有必要，您可能需要使您的

单元格

组件扩展

PureComponent

，以加快对账过程或实现

shouldComponentUpdate

---

如果这没有意义，或者你有问题，请告诉我（我想你会的）。

在

cell.js

中，

key={this.props.cellID}

应该是

key={this.props.key}

和

id={this.props.cellID}

be

id={this.props.id}

我完全同意，但有一点除外：如此微不足道的单元组件可能无法从sCU中获得任何好处（事实上，它会变得更慢）。是的，我不想过早地进行优化。在做这件事之前，我们应该真正衡量一下业绩。更新了我的答案。谢谢大家的回复！明天早上我会调查这件事。