React 从零开始学习（十四）—— 类组件 VS 函数式组件

React 定义组件

React 定义组件的方式有两种：（1）类组件（2）函数式组件

注意，原生 HTML 元素名以小写字母开头，自定义的 React 类名以大写字母开头。比如 下面的例子，ClassTable 不能写成 classTable。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

类组件（Class Components）

类组件：使用 class 关键字来创建组件。

新建 ClassTable.js：

import React, { Component } from 'react';

class ClassTable extends Component {
  render () {
    return (
      <table style={{ "width": '400px' }}>
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>王小虎</td>
            <td>上海市普陀区金沙江路 1518 弄</td>
          </tr>
          <tr>
            <td>王小虎</td>
            <td>上海市普陀区金沙江路 1518 弄</td>
          </tr>
          <tr>
            <td>王小虎</td>
            <td>上海市普陀区金沙江路 1518 弄</td>
          </tr>
          <tr>
            <td>王小虎</td>
            <td>上海市普陀区金沙江路 1518 弄</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default ClassTable;

函数式组件（Functional Components）

函数式组件：使用 ES6 箭头函数来创建组件。

格式：

const Example = (props) => {
  return <div />;
}

或者：

function Example(props) {
  return <div />;
}

新建表头组件 TableHeader.js：

const TableHeader = () => {
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
            </tr>
        </thead>
    );
}
export default TableHeader

新建表格内容组件 TableBody.js：

const TableBody = () => {
  return (
    <tbody>
      <tr>
        <td>王小虎</td>
        <td>上海市普陀区金沙江路 1518 弄</td>
      </tr>
      <tr>
        <td>王小虎</td>
        <td>上海市普陀区金沙江路 1518 弄</td>
      </tr>
      <tr>
        <td>王小虎</td>
        <td>上海市普陀区金沙江路 1518 弄</td>
      </tr>
      <tr>
        <td>王小虎</td>
        <td>上海市普陀区金沙江路 1518 弄</td>
      </tr>
    </tbody>
  );
}
export default TableBody

接下来，新建 FunctTable.js，引入表头文件 TableHeader.js 和表格内容文件 TableBody.js：

import React, { Component } from 'react'
import TableHeader from './TableHeader'
import TableBody from './TableBody'
class FunctTable extends Component {
  render () {
    return (
      <table style={{ "width": '400px' }}>
        <TableHeader />
        <TableBody />
      </table>
    )
  }
}
export default FunctTable

在 App.js 中引入类组件 ClassTable 和函数式组件 FunctTable：

import './assets/css/App.css';
import ClassTable from './components/ClassTable'
import FunctTable from './components/FunctTable'

function App () {
  return (
    <div className="App">
      <p>类组件（Class Components）</p>
      <ClassTable />
      <p>函数式组件（Functional Components）</p>
      <FunctTable />
    </div>
  );
}
export default App;

页面展示如下：