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

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍：

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

用法：

<ShoppingList name="Mark" />

等同于：

return React.createElement('div', {
   className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

通过 Props 传递数据

class Board extends React.Component {
   
	renderSquare(i) {
   
		return <Square value={
   i} />;
  	}
}

class Square extends React.Component {
   
  render()