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篇。