React的井字过三关（1）

React的井字过三关（1）

本文系React官方教程的Tutorial: Intro To React的笔记。由笔者用ES5语法改写。

在本篇笔记中，尝试用React构建一个可交互的井字棋游戏。

---

开始

先布局：

status反映游戏信息。九宫格采用flex布局。右侧有一处游戏信息。

<div id="container">
        <div class="game">
            <div class="board">
                <div class="status">Next player: X</div>
                <div class="board-row">
                    <button class="square"></button>
                    <button class="square"></button>
                    <button class="square"></button>
                </div>
                <div class="board-row">
                    <button class="square"></button>
                    <button class="square"></button>
                    <button class="square"></button>
                </div>
                <div class="board-row">
                    <button class="square"></button>
                    <button class="square"></button>
                    <button class="square"></button>
                </div>
            </div>
            <div class="info">
                <div></div>
                <ol></ol>
            </div>
        </div>
    </div>

再把css写一下：

/*Simple CSS-Reset*/
*{
	margin:0;
	padding:0;
}

body{
  font: 30px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ul{
	list-style: none;
}

a{
	text-decoration: none;
}

ol, ul{
  padding-left: 30px;
}

/*major*/
#container{
	width: 500px;
	margin:0 auto;
}

.game{
  display: flex;
  flex-direction: row;
}

.status{
  margin-bottom: 20px;
  text-align: center;
}

.board-row:after{
  clear: both;
  content: "";
  display: table;
}

.square{
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 36px;
  font-weight: bold;
  line-height: 100px;
  height: 100px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 100px;
}

#container .square:focus {
  background: #ddd;
  outline: none;
}

.info {
  margin-left: 30px;
  font-size:20px;
}

基本效果：

接下来只需要考虑javascript实现就可以了。

整个应用分为三个组件：

• Square（方块）
• Board（九宫格面板）
• Game（整个游戏）

接下来就是把这个结构用React写出来。

var Game=React.createClass({
            render:function(){
                return (
                    <div className="game">
                        <Board />
                        <div className="info">
                            <div></div>
                            <ol></ol>
                        </div>
                    </div>
                );
            }
        });

        var Board=React.createClass({
            renderSquare:function(i){
                return   <Square />
            },
            render:function(){
                return (
                    <div clasName="board">
                        <div className="status">Next player: X</div>
                        <div className="board-row">
                            {this.renderSquare(0)}
                            {this.renderSquare(1)}
                            {this.renderSquare(2)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(3)}
                            {this.renderSquare(4)}
                            {this.renderSquare(5)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(6)}
                            {this.renderSquare(7)}
                            {this.renderSquare(8)}
                        </div>
                    </div>
                );
            }
        });

        var Square=React.createClass({
            render:function(){
                return (
                    <button className="square"></button>
                );
            }
        });

        ReactDOM.render(
            <Game />,
            document.getElementById('container')
        );

---

通过props传递数据

现在尝试从Board组件中传递一些数据给Square组件：

var Board=React.createClass({
            renderSquare:function(i){
                return   <Square value={i} />
            },
  			...

Square内部：

var Square=React.createClass({
            render:function(){
                return (
                    <button className="square">{this.props.value}</button>
                );
            }
        });

数字就被打上去了。

---

交互的组件

当点击方块时，打出“X”。

先把Square设置初始的state.value为null。当点击小方框，触发一个changeState方法。把当下的State改为X.

然后把渲染方法改为：

var Square=React.createClass({
    getInitialState:function(){
        return {
            value:null
        }
    },
    changeState:function(){
        this.setState({
            value:'X'
        })
    },
    render:function(){
        return (
            <button className="square" onClick={this.changeState}>{this.state.value}</button>
        );
    }
});

基本效果：

无论何时，this.setState只要被调用，组件将马上更新并根据状态渲染它的后代。

---

通过开发者工具看组件树

插播一个广告：React为开发者提供了适用于火狐及Chrome的扩展工具。有了它可以很方便看到你构建的组件库。

当然Google商店现在得FQ才行。在安装之后，勾选“允许访问本地网址”，便可激活。

---

解除状态

现在，井字棋已经有了个雏形。但是State被锁定在每个单独小的方块中。

为了让游戏能够正常进行，还需要做一些事情：

• 判断胜负
• X和O的交替

为了判断胜负，我们需要将9个方块的value放到一块。

你可能会想，为什么Board组件为什么不查询每个组件的状态并进行计算？——这在理论上是可行的。但是React不鼓励这样做——这样导致代码难读，脆弱，变得难以重构。

相反,最好的解决方案就是把state放到Board组件上,而不是每个方块里。Board组件可以告诉每个小方块要显示什么——通过之前加索引值的方法。

当你先从各种各样的子代中把它们的数据统一起来，那就把state放到它们的父级组件上吧！然后通过props把数据全部传下去。子组件就会根据这些props同步地展示内容。

在React里，组件做不下去的时候，把state向上放是很常见的处理办法。正好借此机会来试一下：设置Board组件的状态——为一个9个元素的数组（全部是null），以此对应九个方块：

var Board=React.createClass({
    getInitialState:function(){
        return (
            squares:Array(9).fill(null),
        )
    },
  ...

到了后期，这个状态可以指代一个棋局，比如这样：

[
  'O', null, 'X',
  'X', 'X', 'O',
  'O', null, null,
]

然后把这个状态数组分配到每个小方块中（还记得renderSquare方法吗？）：

renderSquare:function(i){
    return   <Square value={this.state.squares[i]} />
},

再次把Square的组件改为{this.props.value}。现在需要改变点击事件的方法。当点击小方块，通过回调props传入到Square中，直接把Board组件state相应的值给改了：

return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />

这里的onClick不是一个事件。而是方块组件的一个props。现在方块组件Square接受到这个props方法，就把它绑定到真正的onClick上面：

<button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>

补白：ES6的箭头函数

x => x * x

以上的意思是：

function (x) {
    return x * x;
}

箭头函数相当于匿名函数，并且简化了函数定义。

React在此引入箭头函数处理的是this的问题。

如果不用箭头函数写是：

renderSquare:function(i){
    var _this=this;
    return   <Square onClick={function(){return _this.handleClick(i)}} value={this.state.squares[i]} />
},

选择自己喜欢的就好。

现在根据就差定义面板组件中handleClick函数了。显然点击一下就刷新Board的状态。以下两种方法都可以。

handleClick:function(i){
    this.setState(function(prev){
        //console.log(prev.squares)
      	var arr=prev.squares;
        arr.squares[i]='X';
        return {
            squares:prev.arr
        };
    })
},

handleClick:function(i){
    var squares=this.state.squares.slice();
    squares[i]='X';
    this.setState({
        squares:squares
    })
},

把状态往上放，使得每个小方框不再拥有自己的状态。面板组件会分配props给他们。只要状态改变，下面的组件就会更新。

---

为什么不突变的数据很重要（Why Immutability Is Important）

在handleClick里面，用了一个slice()方法把原来的数组克隆出来。有效防止了数组被破坏。

“不突变的对象”这是一个重要的概念，值得React文档重开一章来强调。

有两种改变数据的办法，一个是直接改变（突变，mutate），一种是存到一个变量里面。二者的结果是相同，但是后者有额外的好处。

跟踪变化

查找一个突变对象（mutate）的数据变化是非常麻烦的。 这就要求比较当前对象之前的副本，还要遍历整个对象树，比较每个变量和价值。 这个过程变得越来越复杂。

而确定一个不突变的对象的数据变化相当容易。 如果这个对象和之前相比不同，那么数据就已改变了。就这么简单。

决定React何时重新渲染

最大的好处：在构建简单纯粹的组件时， 因为不突变的数据可以更容易地确定是否更改了，也有助于确定一个组件是否需要被重新渲染。

---

功能组件

回到之前的项目，现在你不再需要Square组件中的构造函数了。 事实上，对于一个简单而无状态的功能性组件类型，比如Square，一个渲染方法足够了，它只干一件事：根据上面传下来的props来决定渲染什么，怎么渲染，完全没必要再开一个扩展组件。

var Square=React.createClass({
    render:function(){
        return (
            <button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>
        );
    }
});

可以说这个square组件做到这里就完结了。不用再理他了。

---

决定次序

目前这个App最大的问题就是整个游戏竟然只有X玩家，简直不能忍，还能不能好好的OOXX了？

对这个App来说谁先走肯定是状态。这个状态决定handleClick渲染的是X还是O：

首先，我们定义X玩家先走。

var Board=React.createClass({
    getInitialState:function(){
        return {
            squares:Array(9).fill(null),
            turnToX:true//为ture时轮到X走
        }
    },
  ...

每点击一次，将造成这个开关的轮换。

handleClick:function(i){
    var squares=this.state.squares.slice();
    squares[i]=this.state.turnToX?'X':'O';
    this.setState({
        squares:squares,
        turnToX:!this.state.turnToX
    })
},

现在棋是走起来了。

---

判断胜负

鉴于井字棋很简单，获胜的最终画面只有8个。所以判断胜负用穷举法就可以了。也就是说，当squares数组出现8个情况，就宣告胜者并终止游戏。这里妨自己写写判断胜负的引擎：

function judgeWinner(square){
    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[1]]&&squares[winCase[1]]==squares[winCase[2]]){//三子一线
            return squares(winCase[0]);//返回胜利一方的标识
        }
    }
    return false;
}

这个方法在Board渲染前执行就可以了。

...
render:function(){
    var winner=judgeWinner(this.state.squares);//每次渲染都判断获胜者
    var status='';
    if(winner!==null){
        status='获胜方是：'+winner
    }else{
        var player=this.state.turnToX?'X':'O';
        status='轮到'+player+'走'
    }
    return (
        <div clasName="board">
            <div className="status">{status}</div>
      ...

好啦！现在已经把这游戏给做出来了。你可以在电脑上自己跟自己下井字棋，一个React新手，走到这一步已是winner。来看看效果吧~

什么，真要完了吗？还有一半的内容。

---

储存历史步数

现在我们尝试做一个历史步数管理。方便你悔棋或复盘（井字棋还得复盘？！）

每走一步，就刷新一次状态，那就把这个状态存到一个数组对象（比如history）中。调用这个历史对象的是Game组件，要做这一步，就得把状态进一步往上放（满满的都是套路啊）。

在Game当中设置状态也是一个大工程。但是基本上和在Board里写状态差不多。

• 首先，用一个history状态存放每一步生成的squares数组。turnToX也提到Game组件中。
• 找出最新的状态history[history.length-1]（lastHistory）
• 在handleClick方法中添加落子判断：胜负已分或是已经落子则不响应。
• 在Game渲染函数中写好status，然后放到指定位置。
• 把handleClick函数传到Board组件去！

var Game=React.createClass({
            getInitialState:function(){
                return {
                    history:[
                        {squares:Array(9).fill(null)}
                    ],
                    turnToX:true
                }
            },
            handleClick:function(i){//这里的i是棋盘的点位。
                var history=this.state.history;
                var lastHistory=history[history.length-1];
                var winner=judgeWinner(lastHistory.squares);
                var squares=lastHistory.squares.slice();

                if(winner||squares[i]){//如果胜负已分，或者该位置已经落子，则不会响应！
                    return false;
                }
                squares[i]=this.state.turnToX?'X':'O';//决定该位置是X还是O

                this.setState({
                    history:history.concat([{squares:squares}]),
                    turnToX:!this.state.turnToX
                });//然后把修改后的squares桥接到状态中去
            },
            render:function(){
                var history=this.state.history;
                var lastHistory=history[history.length-1];
                var winner=judgeWinner(lastHistory.squares);

                var status='';
                if(winner){
                    status='获胜方是'+winner;
                }else{
                    var player=this.state.turnToX?'X':'O';
                    status='轮到'+player+'走';
                }

                return (
                    <div className="game">
                        <Board lastHistory={lastHistory.squares} onClick={(i)=>this.handleClick(i)} />
                        <div className="info">
                            <div>{status}</div>
                            <ol></ol>
                        </div>
                    </div>
                );
            }
        });

那么Board组件里面的各种状态完全不需要了，只保留render和renderSquare函数足矣。

var Board=React.createClass({
    renderSquare:function(i){
        return <Square value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
    },
    render:function(){
        return (
            <div clasName="board">
                <div className="status"></div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
});

---

展示历史步数

在之前入门学习中已经有了深刻体会：渲染一串React元素，最好用的方法是数组。

恰好我们的history也是一个数组。而且Game的架构设计中还有一个ol——那么会做了吧？

				...
				var arr=[];
				var _this=this;
                history.map(function(step,move){
                    var content='';
                    if(move){
                        content='Move#'+move;
                    }else{
                        content='游戏开始~';
                    }
                    arr.push(<li key={move}><a onClick={()=>_this.jumpTo(move)} href="javascript:;">{content}</a></li>);
                });
				...

在这个a标记里，还加了个this.jumpToMove。当点击之后j将把该索引值的旧状态作为最后一个状态。

好了，现在话分两头，插播一段关于Key值的论述。

---

论Key值的重要性

任何一个数组，都必须有key值。

当你渲染一串组件，React总是会把一些信息安置到每个单独组件里头去。比如你渲染一串涉及state的组件时，这个state是得存起来的。不管你如何实现你的组件。React都会在背后存一个参照。

你对这些组件增删改查。React通过这些参照信息得知哪些数据需要发生变动。

...
<li>苏三说：xxx</li>
<li>李四说：ooo</li>
..

如上你想修改li的内容，React无法判断哪个li是苏三的，哪个li是李四的。这时就要一个key值（字符串）。对于同辈元素，key是唯一的。

<li key="苏三">苏三说：xxx</li>
<li key="李四">李四说：OOO</li>

key值是React保留的一个特殊属性，它拥有比ref更先进的特性。当创建一个元素，React直接把一个key值传到被return的元素中去。尽管看起来也是props之一，但是this.props.key这样的查询是无效的。

重新渲染一串组件，React通过key来查找需要渲染的匹配元素。可以这么说，key被添加到数组，那这个组件就创建了；key被移除，组件就被销毁。key就是每个组件的身份标志，在重新渲染的时候就可以保持状态。倘若你改变一个组件的key，它将完全销毁，并重新创建一个新的状态。

因此：强制要求你插入到页面的数组元素有key，如果你不方便插入，那么一定是你的设计出了问题。

---

来场说走就走的时间旅行

由于添加了悔棋这一设定，而悔棋是不可预测的。所以井字棋组件初始需要多一个状态：stepNumber:0。另一方面，悔棋导致turnToX需要重新设定。

jumpTo:function(step){
                this.setState({
                    stepNumber:step,
                    turnToX:step%2?false:true
                })
            },

留意到this.state.stepNumber其实可以取代history.length-1——那就在render方法和handleClick方法中全部把它替换了。

最后一个问题还是出在handleClick，虽然可以回退，但是状态最终不能实时更新。用history=history.slice(0,this.state.stepNumber+1);把它剪切一下就行了。

那么全部功能就完成了。嗯，应该是完成了。

var Game=React.createClass({
            getInitialState:function(){
                return {
                    history:[
                        {squares:Array(9).fill(null)}
                    ],
                    turnToX:true,
                    stepNumber:0
                }
            },
            handleClick:function(i){
                var history=this.state.history;
                history=history.slice(0,this.state.stepNumber+1);
                var lastHistory=history[this.state.stepNumber];
                var winner=judgeWinner(lastHistory.squares);
                var squares=lastHistory.squares.slice();

                if(winner||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
                });
                console.log(this.state.history)
            },
            jumpTo:function(step){
                this.setState({
                    stepNumber:step,
                    turnToX:step%2?false:true
                });
            },
            render:function(){
                var history=this.state.history;
                var lastHistory=history[this.state.stepNumber];
                var winner=judgeWinner(lastHistory.squares);

                var status='';
                if(winner){
                    status='获胜方是'+winner;
                }else{
                    var player=this.state.turnToX?'X':'O';
                    status='轮到'+player+'走';
                }

                var arr=[];
                var _this=this;
                history.map(function(step,move){
                    var content='';
                    if(move){
                        content='Move#'+move;
                    }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>
                );
            }
        });

        var Board=React.createClass({
            renderSquare:function(i){
                return <Square value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
            },
            render:function(){
                return (
                    <div clasName="board">
                        <div className="status"></div>
                        <div className="board-row">
                            {this.renderSquare(0)}
                            {this.renderSquare(1)}
                            {this.renderSquare(2)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(3)}
                            {this.renderSquare(4)}
                            {this.renderSquare(5)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(6)}
                            {this.renderSquare(7)}
                            {this.renderSquare(8)}
                        </div>
                    </div>
                );
            }
        });

        var Square=React.createClass({
            render:function(){
                return (
                    <button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>
                );
            }
        });

        ReactDOM.render(
            <Game />,
            document.getElementById('container')
        );
        /**********************************/
        function judgeWinner(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[1]]&&squares[winCase[1]]==squares[winCase[2]]){//三子一线
                    return squares[winCase[0]];//返回胜利一方的标识
                }
            }
            return null;
        }

效果如下：

---

结束的升华

到目前为止，实现了一个井字棋游戏，有了以下基本功能

• 你可以自己跟自己玩井字过三关
• 判断谁赢了
• 记录棋局
• 还允许悔棋

挺好，挺好。

但是，你还可以改进：

• 通过(X,Y)来取代数字坐标
• 对右方的被选中的当前记录进行加粗显示
• 用两个循环重写Board组件，替代掉原来生硬的代码结构
• 对你的历史记录进行升降序排列
• 高亮显示获胜的结果
• 加个人工智能什么的。

这些内容本系列笔记的第2第3篇。