前端框架 使用React 开发一个井字棋（2）React.Component组件介绍

React 是什么？ React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。 React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍： class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); } 在React中，`React.Component`是构建用户界面的基础单元，它是React组件的基类。组件是React的核心概念，它们允许我们将UI分解为独立、可复用的部分，每个部分都有自己的逻辑和视图。在给定的描述中，我们首先看到了一个简单的`ShoppingList`组件示例，它继承自`React.Component`。 `ShoppingList`组件的定义如下： ```jsx class ShoppingList extends React.Component { render() { return <div>Shopping List for {this.props.name}</div>; } } ``` 这里，`render`方法是每个React组件必须实现的方法，它返回组件在页面上应展示的React元素。`this.props`用于访问组件接收到的属性（props），在这个例子中，`name`是从父组件传递过来的数据。 接下来，我们探讨如何通过`Props`传递数据。在React中，我们可以使用`props`来向组件传递数据。例如，`Board`组件和`Square`组件之间通过`props`进行通信： ```jsx class Square extends React.Component { render() { return <button onClick={() => this.setState({ value: 'X' })}>{this.props.value}</button>; } } ``` 在这里，`Square`组件接收`value`作为`props`，并根据它显示内容。同时，我们使用`onClick`事件监听器，当按钮被点击时，`Square`组件的`state`会被更新。但是，由于`Square`不能直接修改其父组件`Board`的状态，我们需要采用状态提升（Lifting State Up）的策略。 状态提升是React中处理组件间共享状态的一种方法。在这个例子中，我们将`Board`组件的`state`提升，使其管理所有方格的状态。`Board`的构造函数初始化一个9个元素的数组，每个元素初始值为`null`： ```jsx class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null) }; } renderSquare(i) { return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />; } } ``` 现在，`Board`通过`props`向`Square`传递`value`和一个`onClick`回调函数。当`Square`被点击时，它调用`onClick`，并将方格的索引作为参数传递。`Board`组件的`handleClick`方法负责更新自身的`state`，从而改变方格的状态。 在`Square`组件中，`onClick`事件触发时，我们不再直接更新`state`，而是调用父组件传递下来的回调函数： ```jsx class Square extends React.Component { render() { return ( <button onClick={() => this.props.onClick()}>{this.props.value}</button> ); } } ``` 这样，我们就实现了井字棋游戏的方格组件交互，通过`React.Component`的使用和`Props`、`State`的管理，构建了一个可以响应用户操作的界面。这个例子展示了React在前端开发中的强大功能，以及如何通过组件化和状态管理来构建复杂的应用。