这篇笔记是官方教程的延续笔记,所有代码基于第一篇笔记的结尾代码。旨在解决教程后面提出的五个问题。


一 . 用(X,Y)来取代原有的数字坐标

原来的数字坐标是这样的:

现在的要求是把原来的代码坐标改为二维坐标系的表达形式,并且在历史记录面板中打出转换后的坐标。

如果只是为了输出好看。只需要写一个转换方法,这些在顶层的Game组件中实现就够了。而不需要修改原来的代码核心。

很自然想到用switch语句,其实都行,怎么喜欢怎么写。

convert:function(i){//i是一维坐标
var x=Math.floor(i/3)+1;
var y=0;
if((i+1)%3===0){
y=3;
}else{
y=(i+1)%3;
}
return [x,y];
},

调用就直接在渲染前调用。把它存到state里面去。

接下来问题是把这个方法怎么获取参数i,最直接的办法是写一个全局变量,然后从handleClick里面拿到i。但是全局变量不环保。或许再设一个顶层状态lastLocation是个不错的选择,渲染队列是一个数组,姑且称之为historyLocation

根据React的价值观,能根据其它原有状态计算出来的东西,就不需要设置额外的状态。但如果思路不明确,就在这里先写出来。

回退步骤的本质

在上一篇笔记最后,官方文档没有说清楚一个问题。就是状态中的stepNumber是什么。现在再次遇到,需要写明白给自己提个醒。

回退步骤

每走一步,history状态就会在最后追加一个最新版本。

stepNumber实际上是一个指针,根据这个指针,发送history状态的版本(可能是旧的,也可能是最新的),用它来调控渲染状态。

点击回退步骤,就是把指针往前挪。

通过暂存器刷新状态

如果没有任何其它操作直接触发handleClick,stepNumber指针直接指向最新的版本。

如果在回退步骤上发生了handleClick,那么将发生以下事情:

  • 根据指针生成若干个状态暂存器,这个暂存器是独立且不具备任何效力的,抛开环境来看就是普通变量;
  • 追加新的状态到暂存器;
  • 再用这个暂存器替换掉原有的状态,在此,回退步骤列表将被刷新。

究竟有几个状态暂存器?在这里就两个:

  • 一个储存history的当前指针版本:

    handleClick:function(i){
    //history指针版本暂存
    var history=this.state.history.slice(0,this.state.stepNumber+1);
    var lastHistory=history[this.state.stepNumber];
    var squares=lastHistory.squares.slice();
  • 一个储存二维坐标轴版本:

    /**上接handleClick***/
    //二维坐标数据暂存器
    var historyLocation=this.state.historyLocation;
    historyLocation=historyLocation.slice(0,this.state.stepNumber);
    historyLocation.push(this.convert(i));//刷新状态暂存器

通过状态暂存器,既可以在指针位置重新开始,又能在屏幕上保留历史步骤数方便查看,即实现官方文档所谓的“时间旅行”。

在这里意识到状态暂存器其实应该只有一个是最好的。

judgeWinner的完善

按理来说,判断胜负的函数judgeWinner应该是在组件的里面,这样比较环保,也可以更好地调用组件中的状态。

现在就把它拿进来。直接生成渲染方法中的status。并且添加一个和棋的判断。实现思路是调用指针版本的history状态数组。然后遍历这个数组对象,如果发现9个位置全部不为null,就返回和棋。

放进来之后,参数也没有必要再写,全部改为state相关的表达。

这样一来就没办法用原来的禁着点判断了。因为不好判断棋局是否完结。在此根据返回的结果进行indexOf判断,留下的坑后面填。

所以到此为止,Game组件应该是:

getInitialState:function(){
return {
history:[
{squares:Array(9).fill(null)}
],
turnToX:true,
stepNumber:0,
historyLocation:[]
}
},
// 判断胜负的函数,穷举法
judgeWinner:function(){
var history=this.state.history;
var lastHistory=history[this.state.stepNumber];
var squares=lastHistory.squares;
var win=[
[0,1,2],
[0,3,6],
[0,4,8],
[1,4,7],
[2,5,8],
[2,4,6],
[3,4,5],
[6,7,8]
];
for(var i=0;i<win.length;i++){
var winCase=win[i];
if(squares[winCase[0]]&&squares[winCase[0]]===squares[winCase[1]]&&squares[winCase[1]]===squares[winCase[2]]){//三子一线
return ('获胜方是:'+squares[winCase[0]]);//返回胜利一方的标识
}
} // 定义当前棋盘上被填满的格子数量
var fill=lastHistory.squares.filter((item)=>item!=null).length;
if(fill==9){
return '和棋!'
}else{
var player=this.state.turnToX?'X':'O';
return ('轮到'+player+'走');
}
},
// 点击事件是把暂存器的内容存为真正的状态。
handleClick:function(i){
//历史squares暂存
var history=this.state.history;
history=history.slice(0,this.state.stepNumber+1); var lastHistory=history[this.state.stepNumber];
var winner=this.judgeWinner();
var squares=lastHistory.squares.slice(); //历史步骤暂存器
var historyLocation=this.state.historyLocation;
historyLocation=historyLocation.slice(0,this.state.stepNumber);
historyLocation.push(this.convert(i)); if((winner.indexOf('轮到')==-1)||squares[i]){
return false;
//胜负已分或是已有子则不可落子。indexOf这是一种暂时的非主流写法
}
// 判断下棋的轮换色
squares[i]=this.state.turnToX?'X':'O'; this.setState({
history:history.concat([{squares:squares}]),
turnToX:!this.state.turnToX,
stepNumber:history.length,
historyLocation:historyLocation
}); },
// 历史步骤跳转是把状态还原到某个时间点,状态根据stepNumber呈现内容,但不会改变最终状态。
jumpTo:function(step){
this.setState({
stepNumber:step,
turnToX:step%2?false:true
});
},
// 坐标转换函数
convert:function(i){
var x=Math.floor(i/3)+1;
var y=0;
if((i+1)%3===0){
y=3;
}else{
y=(i+1)%3;
}
return [x,y];
}, render:function(){
var history=this.state.history.slice();
var lastHistory=history[this.state.stepNumber];//渲染方法遵照的是stepNumber而不是最后一步
var status=this.judgeWinner();//获胜状态
var arr=[];
var location=this.state.historyLocation.slice();
var _this=this;
history.map(function(step,move){
var content='';
if(move!==0){
content='Move#'+move+':'+'('+location[move-1][0]+','+location[move-1][1]+')';
//console.log(location[move-1])
}else{
content='游戏开始~';
}
arr.push(<li key={move}><a onClick={()=>_this.jumpTo(move)} href="javascript:;">{content}</a></li>);
}); return (
<div className="game">
<Board lastHistory={lastHistory.squares} onClick={(i)=>this.handleClick(i)} />
<div className="info">
<div>{status}</div>
<ol>{arr}</ol>
</div>
</div>
);
}
});

二. 对右方的被选中的当前记录进行加粗显示

样式这种东西,就交给CSS来实现吧!

.back-active{
font-weight: bolder;
color: #EE9611;
}

简单实现

思路就是加个class。操作方法是jumpTo。

问题在于,当前的jumpTo已经给定了参数。为了拿到e.target还得在改改。

jumpTo在这个问题中实际上要完成两件事,删除所有a的class中可能.back-active;给当前对象加个.back-active

有了e.target,就能用DOM找到该有的内容。比方说e.target.parentNode.parentNode.childNode就代表所有点击对象上层的所有li集合

然而这个集合不是一个数组啊,不能map。只能用for循环。根据查到的性能资料,for循环还真的比其它迭代方法高。

jumpTo:function(e,step){
// console.log(e.target)
var aList=e.target.parentNode.parentNode.childNodes;
for(var i=0;i<aList.length;i++){
var item=aList[i];
if(item.childNodes[0].classList.contains('back-active')){
item.childNodes[0].classList.remove('back-active');
}
} e.target.classList.add('back-active');
this.setState({
stepNumber:step,
turnToX:step%2?false:true
});
},

这个问题就算解决了。

点击实现高亮当前的步骤

其实就个人理解来说,不应该再对handleClick再加什么高亮当前步骤的操作了。当前步骤明摆着就是最后一个。纵观就当前的代码实现,用户体验已经很好了,进程不会乱七八糟,用户还可以很清晰地知道指针指向的还原点。还高亮什么?

但是假设老板就要求点击按钮时最后一步也高亮,那也只能照做。

显然,这个应该放渲染前判断:如果这是状态最后一步(是this.state.history.length-1,不是this.state.stepNumber),那么就高亮。反正样式也不要钱,就多写一个样式给它。

.process-active{
font-weight: bolder;
color: green;
}/*写在.back-active之后,方便覆盖*/

这样,渲染前的处理里还得多加一个判断:是最后一个就加.process-active——这段获取历史步骤的方法已经变得太长了。为了阅读方便把它放一个getMoveList函数里吧。

...
getMoveList:function(){
var history=this.state.history.slice();
var arr=[];
var location=this.state.historyLocation.slice();
var _this=this;
history.map(function(step,move){
var content='';
if(move!==0){
content='Move#'+move+':'+'('+location[move-1][0]+','+location[move-1][1]+')';
//console.log(location[move-1])
}else{
content='游戏开始~';
}
//console.log(_this.state.stepNumber)
if(arr.length==_this.state.history.length-1){
arr.push(<li key={move}><a className="process-active" onClick={(e)=>_this.jumpTo(e,move)} href="javascript:;">{content}</a></li>);
}else{
arr.push(<li key={move}><a onClick={(e)=>_this.jumpTo(e,move)} href="javascript:;">{content}</a></li>);
}
});
return arr;
},
...

这样,第二个问题就解决了。


三. 用两个循环重写Board组件,替代掉原来生硬的代码结构

因为只有9宫格,复用也毫无意义。所以写死也问题不大。

想到的处理方法就是这样了。

var Board=React.createClass({
renderSquare:function(i){
return <Square key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
},
getSquare:function(rows){
var index=rows*3;
var arr=[];
for(var i=index;i<index+3;i++){
arr.push(this.renderSquare(i));
}
return arr;
},
getBoardRow:function(){
var arr=[];
for(var i=0;i<3;i++){
arr.push(<div key={i} className="board-row">{this.getSquare(i)}</div>)
}
return arr;
},
render:function(){
return (
<div clasName="board">
<div className="status"></div>
{this.getBoardRow()}
</div>
);
}
});

四. 对你的历史记录进行升降序排列

接下来又回到Game组件上面来了。在渲染结构中加一个按钮。点击,触发事件。大概就是这样。

<input type="button" value={this.state.isAscending} onClick={this.sortToggle} />

因为默认就是降序,因此这个toggleSort只做一件事:切换开关。至于是升序还是降序,又要多设置一个开关状态(isAscending,初始为降序排列)。

根据这个状态,getMoveList方法决定生成数组后是直接return还是return arr.reverse()

sortToggle:function(){
this.setState(function(prevState){
var sort=prevState.isAscending;
var content='';
if(sort=='升序排列'){
content='降序排列';
}else{
content='升序排列'
}
return {
isAscending:content
}
})
},

然后再到getMoveList方法的最后,加一个判断:

.....
if(this.state.isAscending=='降序排列'){
return arr;
}else{
return arr.reverse();
}
}

嗯,第四个问题解决。


五. 高亮显示获胜的结果

扩展judgeWinner的功能

judgeWinner判断函数已经被纳入到了组件中,而且只是返回一个status,现在要扩展它的功能,把胜负情况反应出来。

在原来的判断胜负函数里面加个console就可以知道胜负手了。

for(var i=0;i<win.length;i++){
var winCase=win[i];
if(squares[winCase[0]]&&squares[winCase[0]]===squares[winCase[1]]&&squares[winCase[1]]===squares[winCase[2]]){//三子一线
console.log(winCase)//这里的winCase就是胜负手
return ('获胜方是:'+squares[winCase[0]]);//返回胜利一方的标识
}
}

既然是扩展功能,再来大改就没必要了。可以考虑把return一个字符串改为return一个数组。第0项放status,第1项放winCase或null

有了这个方法,handleClick中那种非主流写法就可以删掉了。

				var winner=this.judgeWinner();
if(winner[1]||squares[i]){
return false;
//胜负已分或已有子:则不可落子。
}

传递胜负手

再写一个 CSS

.win-case{
color: red;
}

现在可以通过winner[1]拿到胜负手了。它是一个数组。现在就得在Game组件render方法里面在var一个数据。通过props传下去,传到Board组件之后,做一个判断,看看参数是否符合点位条件,是的话就继续把class名传下去。

/********<Game/>*******/
render:function{
var winCase=this.judgeWinner()[1];//获胜状态
return (
<div className="game">
<Board winCase={winCase} lastHistory={lastHistory.squares} onClick={(i)=>this.handleClick(i)} />
...
/**********<Board/>***********/
renderSquare:function(i){
if(this.props.winCase){
for(var j=0;j<this.props.winCase.length;j++){
if(this.props.winCase[j]==i){
return <Square winCase="win-case" key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
}
}
}
return <Square key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
},
...
/************<square/>******************/
var Square=React.createClass({
render:function(){
if(this.props.winCase){
return (
<button className={"square "+this.props.winCase} onClick={() => this.props.onClick()}>{this.props.value}</button>
);
}else{
return (
<button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>
);
}
}
});
。。。。。。

那么第五个问题就完成了。


结束

现在,功能已经完备。思路已经理清。再看之前留下的大坑:historyLocation

之前提到过,historyLocation是可以和history相互计算得出的。historyLocation只用于展示步数。组件的判断引擎是用兼容history的一维数组实现的,为了后期实现AI书写方便,也显然是history更好。还是删掉这个historyLocation。

不好之处在于每次都要多一点计算,相比React每次动辄重新渲染,这点计算也不是很多。

写一个根据history获取坐标的方法,拿到坐标之后在转换为二维坐标,这本质上是一件事,所以convert方法也可以删掉了。

getRectangular:function(){
var arr=[];
var mainArr=this.state.history.slice();
for(var i=0;i<mainArr.length;i++){
if(i<mainArr.length-1){
for(var j=0;j<9;j++){
//比较mainArr[i].squares和mainArr[i+1].squares[j])不同,拿到坐标值
if(mainArr[i].squares[j]!==mainArr[i+1].squares[j]){
arr.push(j);
}
}
}
}
var result=[]
for(var i=0;i<arr.length;i++){
var x=Math.floor(arr[i]/3)+1;
var y=(arr[i]+1)%3===0?3:(arr[i]+1)%3;
result.push([x,y])
}
return result;
},

可以再自己优化下算法和css,或者加个重置button之类的。把不必要的变量删掉。

效果:

下一篇笔记将解决最大的一个坑。


附录:组件代码

var Game=React.createClass({
getInitialState:function(){
return {
history:[
{squares:Array(9).fill(null)}
],
turnToX:true,
stepNumber:0,
isAscending:'降序排列'
}
},
// 判断胜负的函数,穷举法,返回一个数组,如果胜负已定,第二个元素就是胜负手
judgeWinner:function(){
var lastHistory=this.state.history[this.state.stepNumber];//获取指针版本
var squares=lastHistory.squares;
var win=[
[0,1,2],
[0,3,6],
[0,4,8],
[1,4,7],
[2,5,8],
[2,4,6],
[3,4,5],
[6,7,8]
];
for(var i=0;i<win.length;i++){
var winCase=win[i];
if(squares[winCase[0]]
&&squares[winCase[0]]===squares[winCase[1]]
&&squares[winCase[1]]===squares[winCase[2]]){//三子一线
return [('获胜方是:'+squares[winCase[0]]),winCase];//返回一个status和胜负情况
}
}
// 获取当前棋盘上被填满的格子数量
var fill=lastHistory.squares.filter((item)=>item!=null).length;
if(fill==9){
return ['和棋!',null];
}else{
var player=this.state.turnToX?'X':'O';
return [('轮到'+player+'走'),null];
}
}, // 点击事件是把暂存器的内容存为真正的状态。
handleClick:function(i){
//history指针版本暂存
var history=this.state.history.slice(0,this.state.stepNumber+1);
var lastHistory=history[this.state.stepNumber];
var squares=lastHistory.squares.slice(); var winner=this.judgeWinner();
if(winner[1]||squares[i]){
return false;
//胜负已分或是已有子则不可落子。
}
// 判断下棋的轮换色
squares[i]=this.state.turnToX?'X':'O';
//覆盖掉原来的状态!
this.setState({
history:history.concat([{squares:squares}]),
turnToX:!this.state.turnToX,
stepNumber:history.length
}); },
// 转化history状态为各个版本的平面直角坐标
getRectangular:function(){
var arr=[];
var mainArr=this.state.history.slice();
for(var i=0;i<mainArr.length;i++){
if(i<mainArr.length-1){
for(var j=0;j<9;j++){
//比较mainArr[i].squares和mainArr[i+1].squares[j])不同,拿到坐标值
if(mainArr[i].squares[j]!==mainArr[i+1].squares[j]){
arr.push(j);
}
}
}
}
var result=[]
for(var i=0;i<arr.length;i++){
var x=Math.floor(arr[i]/3)+1;
var y=(arr[i]+1)%3===0?3:(arr[i]+1)%3;
result.push([x,y])
}
return result;
},
// 历史步骤跳转是把状态还原到某个时间点,状态根据stepNumber呈现内容,但不会改变最终状态。
jumpTo:function(e,step){
var aList=e.target.parentNode.parentNode.childNodes;
for(var i=0;i<aList.length;i++){
var item=aList[i];
if(item.childNodes[0].classList.contains('back-active')){
item.childNodes[0].classList.remove('back-active');
}
}
e.target.classList.add('back-active');
this.setState({
stepNumber:step,
turnToX:step%2?false:true
});
},
// 坐标转换函数
convert:function(i){
var x=Math.floor(i/3)+1;
var y=(i+1)%3===0?3:y=(i+1)%3; return [x,y];
},
// 获取历史步骤列表
getMoveList:function(){
var history=this.state.history.slice();
var arr=[];
var _this=this;
var rectangular=this.getRectangular();//获取二维坐标 history.forEach(function(step,move){
var content='';
if(move!==0){
content='Move#'+move+':'+'('+rectangular[move-1][0]+','+rectangular[move-1][1]+')';
}else{
content='游戏开始~';
}
// 高亮最后一个
if(arr.length==_this.state.history.length-1){
arr.push(
<li key={move}>
<a
className="process-active"
onClick={(e)=>_this.jumpTo(e,move)}
href="javascript:;">
{content}
</a>
</li>
);
}else{
arr.push(
<li key={move}>
<a onClick={(e)=>_this.jumpTo(e,move)}
href="javascript:;">
{content}
</a>
</li>
);
}
});
// 排序方式
if(this.state.isAscending=='降序排列'){
return arr;
}else{
return arr.reverse();
}
},
// 切换排序方式
sortToggle:function(){
this.setState(function(prevState){
var sort=prevState.isAscending;
var content='';
if(sort=='升序排列'){
content='降序排列';
}else{
content='升序排列'
}
return {
isAscending:content
}
})
},
// 重置
reset:function(){
this.setState({
history:[
{squares:Array(9).fill(null)}
],
turnToX:true,
stepNumber:0,
isAscending:'降序排列'
});
}, render:function(){
var lastHistory=this.state.history[this.state.stepNumber];//渲染遵照的是stepNumber而不是最后一步
var status=this.judgeWinner()[0];//获胜描述
var winCase=this.judgeWinner()[1];//获胜状态 return (
<div className="game"> <div>
<h1 classNme="status">React的井字过三关(2)</h1>
<Board
winCase={winCase}
lastHistory={lastHistory.squares}
onClick={(i)=>this.handleClick(i)} />
</div>
<div className="info">
<div>{status}</div>
<input
type="button"
value={this.state.isAscending}
onClick={this.sortToggle} />
<input
type="button"
value="重置"
onClick={this.reset} />
<ol>{this.getMoveList()}</ol>
</div>
</div>
);
}
}); var Board=React.createClass({
renderSquare:function(i){
if(this.props.winCase){
for(var j=0;j<this.props.winCase.length;j++){
if(this.props.winCase[j]==i){
return (
<Square
winCase="win-case"
key={i}
value={this.props.lastHistory[i]}
onClick={() => this.props.onClick(i)} />
);
}
}
}
return (
<Square key={i}
value={this.props.lastHistory[i]}
onClick={() => this.props.onClick(i)} />
);
}, getSquare:function(rows){
var index=rows*3;
var arr=[];
for(var i=index;i<index+3;i++){
arr.push(this.renderSquare(i));
}
return arr;
}, getBoardRow:function(){
var arr=[];
for(var i=0;i<3;i++){
arr.push(
<div key={i}
className="board-row">
{this.getSquare(i)}
</div>
);
}
return arr;
}, render:function(){
return (
<div clasName="board">
<div className="status"></div>
{this.getBoardRow()}
</div>
);
}
}); var Square=React.createClass({
render:function(){
if(this.props.winCase){
return (
<button
className={"square "+this.props.winCase}
onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
return (
<button
className="square"
onClick={() => this.props.onClick()}>
{this.props.value}
</button>
); }
}); ReactDOM.render(
<Game />,
document.getElementById('container')
);