React井字棋

井字棋

React官方文档示例WebApp

三个组件

• Square：棋盘的一小格
• Board：棋盘
• Game：游戏信息的显示和过程的监控

其中Square、Board是展示组件不负责数据交互，Game是容器组件，负责数据交互。

实现功能

1. 轮流下子
2. 判断胜负
3. 历史纪录
4. 历史纪录升降序转换
5. 高亮显示获胜行

代码

index.js

    import React from 'react';import ReactDOM from 'react-dom';import './index.css';function Square(props) {if (props.highlight) {return ( props.onClick()} style={{color: "red"}}> {props.value});}else {return ( props.onClick()}>{props.value});}}

Square组件：对其属性highligt进行判断，来决定颜色是否为红色。按钮的值是他的value属性。同时还有一个onclick方法继承自父组件。

    class Board extends React.Component {renderSquare(i) {return ( this.props.onClick(i)}highlight={this.props.line.includes(i)}/>);}render() {var rows = [];for (var i = 0; i < 3; i++) {var row = [];for (var j = 3 * i; j < 3 * i + 3; j++) {row.push(this.renderSquare(j));}rows.push({row})}return ({rows});}}

Board组件：使用renderSquare(i)方法来创建Square组件，其value值是Board组件square[i]，onclick是继承自Board组件的方法，highlight是判断Board组件的line中是否有i，render方法中用两个for循环来渲染出九宫格。

    class Game extends React.Component {constructor(props) {super(props);this.state = {history: [{squares: Array(9).fill(null),lastPos:'Get Game Start'}],stepNumber: 0,xIsNext: true,sort:true};}handleClick(i) {const history = this.state.history.slice(0, this.state.stepNumber + 1);const current = history[history.length - 1];const squares = current.squares.slice();const posX = Math.ceil((i+1) / 3);const posY = (i + 1) % 3 ? (i + 1) % 3 : 3;const position = '(' + posX + ', ' + posY + ')';if (calculateWinner(squares).winner || squares[i]) {return;}squares[i] = this.state.xIsNext ? "X" : "O";this.setState({history: history.concat([{squares: squares,lastPos:squares[i] + ' To ' + position}]),stepNumber: history.length,xIsNext: !this.state.xIsNext,});}jumpTo(step) {this.setState({stepNumber: step,xIsNext: (step % 2) === 0});}toggleSort() {this.setState({sort:!this.state.sort,})}render() {let history = this.state.history;const current = history[this.state.stepNumber];const winner = calculateWinner(current.squares).winner;const line = calculateWinner(current.squares).line;if (!this.state.sort){history = this.state.history.slice();history.reverse();}const moves = history.map((step, move) => {const desc = step.lastPos;if (this.state.stepNumber == move) {return (
 this.jumpTo(move)}>{desc}
);} else {return (
 this.jumpTo(move)}>{desc}
);}  });let status;if (winner) {status = "Winner: " + winner;} else {status = "Next player: " + (this.state.xIsNext ? "X" : "O");}return ( this.handleClick(i)}line={line}/> this.toggleSort()}>Sort{status}
{moves}
);}}

Game组件：首先看他的状态（state），一个是history数组，其中每个元素是一个对象，对象里有一个记录着棋盘形态的数组和这一步走的位置；stepNumber，记录走的步数；xIsNext判断轮到谁下子；sort判断升降序。
handleClick()方法：是最终传入Square的方法，它获得了历史纪录和这步没走之前棋局，如果已经获胜或这格已经落子，就直接返回，没有的话就计算他的位置并更新history，stepNumber，和xIsNext
render()中获取历史纪录和当前的棋局，计算胜者和获胜的棋子，判断是否需要升降序，moves对数组history进行map，如果stepNumber与索引相等，就返回加粗显示的列表，否则返回普通列表（这里注意列表项要有key值）。jumpTo()方法接受步数，并将stepNumber设置为参数，并更新xIsNext。下面通过status来显示游戏状态，最终渲染Board组件，升降序按钮，状态显示，历史记录列表。

    // ========================================ReactDOM.render(, document.getElementById("root"));function calculateWinner(squares) {const lines = [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6]];for (let i = 0; i < lines.length; i++) {const [a, b, c] = lines[i];if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {return {winner:squares[a], line:[a, b, c]};}}return {winner:null, line:[]};}

总结

初次使用React开发，感觉难度是有的，一些细节了解的也不是很清楚，但是组件化开发显而易见的好处就是思路清晰，各组件联系紧密又各司其职。代码逻辑性很强也有利于后期维护和功能的升级。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！