React入门（二）

　　这一讲，我们来说说React的代码细节。

　　一、整体结构

　　React官网给出的这个案例，实现的功能是一个小游戏：tic-tac-toe。游戏在一个九宫格中进行，双方对弈，一方使用圈，另一方使用叉，看看谁先在横、竖或对角线上形成三连。

　　index.js文件的结尾有几行代码：

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

　　ReactDOM是模块名，还记得创建项目时，已经引入react、react-dom和react-scripts模块了吧？

　　ReactDOM模块的render()方法用于将组件渲染并显示在指定的HTML元素中。

　　render()方法有两个参数，第一个参数是一个组件，第二个参数是一个HTML元素。

　　index.html文件的代码很简单：

<body>
  <div id="root"></div>
</body>

　　React框架中，界面元素由一系列组件构成：

　　index.js文件中定义了三个组件类，分别是Game、Board、Square，即游戏、游戏区、格子。

　　在这个小游戏程序中，游戏类可以保存关于游戏的信息，游戏区表示九宫格，格子表示九宫格的一格。这种设计方式很常见，我们以前设计俄罗斯方块游戏时，也使用了类似的设计。

　　二、游戏类的代码

　　Game类的代码如下：

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

　　Game类是一个组件，所以它要继承React模块的Component类，Component类是React中所有组件的父类。

　　每一个组件要求重写render()方法，render()方法用于展示组件。

　　render()方法的返回中，可以包含普通的HTML标签，也可以包含组件，还可以用{}包含JavaScript脚本，十分灵活。React规定，如果标签首字母小写，就是普通的HTML标签，如果标签首字母大写，就是组件。

　　这种写法称为“JSX”，React在处理JSX文件时，会将它转换成JavaScript。所以如果在HTML标签中使用到class属性，为了不与JavaScript中的class关键字冲突，要写成className。

　　可以看到，Game类的render()方法返回两个div，一个用于显示游戏区，另一个用于显示游戏信息。游戏区包含了另一个组件“<Board />”。

　　React框架的设计思想可以参看“王沛——深入浅出React（一）：React的设计哲学 - 简单之美”，以及他后续的几篇文章，这里出于篇幅限制，就不展开说了。

　　三、游戏区的代码

　　Board类的代码如下：

class Board extends React.Component {
    renderSquare(i) {
        return <Square />;
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
                <div className="status">{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>
        );
    }
}

　　同样的，Board类也是一个组件，其render()方法用于展示游戏区。

　　从代码中可以看到，游戏区中有4个div，第一个div，显示游戏状态。第二个、第三个和第四个div展示九宫格。

　　九宫格的div中包含了三个脚本块，每个脚本块通过方法调用，包含了另一个组件“<Square />”。

　　四、格子的代码

　　Square类的代码如下：

class Square extends React.Component {
    render() {
        return (
            <button className="square">
                {/* TODO */}
            </button>
        );
    }
}

　　Square类也是一个组件，其render()方法用于展示九宫格的一格。

　　这一讲简单分析了tic-tac-toe小游戏的框架结构，接下去我们会逐步实现它的功能。

React入门（二）

猜你喜欢