React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>

超、凢脫俗 2022-06-06 09:07 235阅读 0赞

[上一篇][Link 1]

# 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>
        );
      }
    }

**更改前：**  
![1566a4f8490d6b4b1ed36cd2c11fe4b6-5b52d.png][]  
**更改后：**  
![685df774da6da48f451356f33f4be8b2-858fa.png][]

[查看最新的代码][Link 2]

### 交互式组件 ###

这一步，让 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 组件树。

![878d91461c78d8f238e116477dfe0b46-fc71e.png][]

它能让你检查组件树中任何一个组件的属性和状态。

安装之后，单击页面中的任何元素，点击 “Inspect” 来打开开发者工具，React 标签就会出现在标签栏最右处。

然而，需要注意的是，要想在 CodePen 中使用，还需要以下步骤：

1.登录或者注册你的邮箱(防止垃圾邮件)  
2.点击 “Fork” 按钮  
3.点击 “Change View”，接着选择 “Debug mode”  
4.在新打开的标签中，开发者工具里就应该有 React 标签了

### **更新** ###

[React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>][React _ _tic-tac-toe_ _ _3_]

[Link 1]: http://blog.csdn.net/beijiyang999/article/details/78444850
[1566a4f8490d6b4b1ed36cd2c11fe4b6-5b52d.png]: /images/20220606/abb5bbd07ba447bf831d8faab1294c75.png
[685df774da6da48f451356f33f4be8b2-858fa.png]: /images/20220606/90758bca1a7b45cc93372316bf4f1d74.png
[Link 2]: https://codepen.io/gaearon/pen/aWWQOG?editors=0010
[878d91461c78d8f238e116477dfe0b46-fc71e.png]: /images/20220606/74582cf39ccb464db068f9efe1ff7399.png
[React _ _tic-tac-toe_ _ _3_]: http://blog.csdn.net/Beijiyang999/article/details/78447685