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 标签了

更新

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