React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>
2-概览
什么是 React
React 用于构建用户界面,它是一种声明式的,高效灵活的 JavaScript 库。
React 有拥有众多组件,现在我们要从 React.Component
子类开始:
code
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
很快我们就会用到些有趣的、看起来很像 XML 的标签。你的组件会告诉 React 你想渲染什么。然后,当你组件中的数据变化时,React 将立刻更新数据,并将其渲染出来。
这里,ShoppingList 是一个 React 组件类。组件接受参数,调用 props,并通过 render 方法返回视图层,将内容展示出来。
render
会返回 React 元素 :它是轻量化的描述,描述了你想渲染的那个东西。
React 拿到这个描述,并把它渲染到屏幕上。大多数 React 开发者使用一种特殊的语法:JSX,它让我们可以更容易地写这样的结构。在构建的时候,<div />
语法会被转换为React.creatElement('div')
。所以上面这个例子等同于:
code
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
如果你对 creatElement()
感兴趣,请在 API 引用中进一步查看详情。在本教程中,我们不会直接用到它,而是会继续使用 JSX。
在 JSX 中,不论任何 JavaScript 表达式,你都可以把它放进花括号中。每个 React 元素都是真实的 JavaScript 对象,你可以用来存储变量,或者传入你的程序。
虽然 ShoppingList
组件只会渲染內建的 DOM 组件,但你其实可以很容易地构建自定制的 React 组件:只需要写 <ShoppingList />
就可以。每个组件都被包裹着,所以它们能独立运行。这个机制让你得以用简单的组件来构建复杂的 UI。
开始编写
我们从这个例子开始:初始代码。
这份代码已经提供程序的外壳和样式。你只需要填充其中的 JavaScript 就可以。
注意,我们有三个组件:
- Square
- Board
- Game
Square 组件会渲染一个单独的 <button />
, Board 组件会渲染出9个这样的小方格,Game 组件渲染出一块棋盘,它有一些占位符,待会儿我们会在里头填入东西。到现在,组件还都不是交互式的。
通过 Props 传数据
开始在实践中学习吧!试着从 Board 组件传一些数据到 Square 组件中去。
在 Board 组件中的 renderSquare
方法里,改写代码,把 value
值传给 Square 组件:
code
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
接着,改写 Square 组件中的 render
方法,用 {this.props.value}
替代 {/* TODO */}
,来显示出那些传进来的数据:
code
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
更改前:
更改后:
交互式组件
这一步,让 Square 组件实现这样的效果:你点击它,就会填进去一个 “X”。试着修改 Square 组件的 render()
函数返回的 button 标签,改成这样:
code
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
现在,如果你点击小方格,浏览器应该会跳出一个弹窗。
这里使用了JavaScript的新语法:箭头函数。需要注意的是,我们把一个函数作为 cnClick
的属性传了进去。如果执行的是 onClick={alert('click')}
,那么,弹窗会立即出现,而不是在点击后才出现。
React 组件能够通过在 constructor 中设置 this.state
来拥有状态(state),这种状态是组件私有的。现在,我们把小方格里的当前值存入 state,然后在小方格 被点击时,改变这个值。
首先,在类中,添加一个 constructor,来初始化 state。
code
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
在 JavaScript 类中,定义子类的 constructor 的时候,需要显示地调用 super()
函数。
现在,改写 Square 组件的 render
方法,以实现点击后,把当前状态值显示出来的功能:
- 把
<button>
标签中的this.props.value
换成this.state.value
- 把
() => alert()
事件处理器改为() => this.setState({value: 'X'})
现在的 button
标签看起来是这个样子:
code
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
无论何时调用 this.setState
,组件都会立即触发更新,使 React 合并传进来的新状态,并渲染组件和它的子组件。渲染后, this.state.value
的值会变成 X
,所以格子里会出现 X。
点击任何一个小方块,都会出现 X。
开发者工具
Chrome 和 Firefox 的 React 扩展开发者工具能够让你在浏览器中检查 React 组件树。
它能让你检查组件树中任何一个组件的属性和状态。
安装之后,单击页面中的任何元素,点击 “Inspect” 来打开开发者工具,React 标签就会出现在标签栏最右处。
然而,需要注意的是,要想在 CodePen 中使用,还需要以下步骤:
1.登录或者注册你的邮箱(防止垃圾邮件)
2.点击 “Fork” 按钮
3.点击 “Change View”,接着选择 “Debug mode”
4.在新打开的标签中,开发者工具里就应该有 React 标签了
更新
上一篇: 今晚 华硕RTX 30显卡全系原价开卖!500多万人疯抢
下一篇: js+canvas 人机井字棋