React入门(二)
这一讲,我们来说说React的代码细节。
一、整体结构
React官网给出的这个案例,实现的功能是一个小游戏:tic-tac-toe。游戏在一个九宫格中进行,双方对弈,一方使用圈,另一方使用叉,看看谁先在横、竖或对角线上形成三连。
index.js文件的结尾有几行代码:
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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小游戏的框架结构,接下去我们会逐步实现它的功能。