React 入门教程系列（四）—— 组件

1. 组件

React 的特点之一就是组件化，组件是用来实现特定或局部功能效果的代码集合(html/css/js)，在我们编写一个页面时，往往可以将不同部位进行拆分，拆分的部分就称为组件。

同样的，组件拆分也可以复用代码，简化项目编码，提高运行效率。

2. 自定义组件的两种方式

React 中组件有两种方式，分别为工厂函数组件和ES6 类组件。

下面分别使用这两种方式定义组件，并向页面输出元素。

  <!-- ... -->
  <div id="example1"></div>
  <div id="example2"></div>

  <script type="text/javascript" src="../build/react.development.js"></script>
  <script type="text/javascript" src="../build/react-dom.development.js"></script>
  <script type="text/javascript" src="../build/babel.min.js"></script>
  
  <script type="text/babel">
    // 1. 定义组件
    // 方式1: 工厂函数组件（简单组件）
    function MyComponent() {
      return <h2>工厂函数组(简单组件)</h2>
    }

    // 方式2: ES6类组件（复杂组件）
    class MyComponent2 extends React.Component {
      render () {
        console.log(this)
        return <h2>ES6类组件（复杂组件）</h2>
      }
    }
    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example1'))
    ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
  </script>
<!-- ... -->

上面的两种方式向页面输出了数据：

在自定义组件时，需要注意下面的几点：

1. 组件名必须首字母大写
2. 虚拟 DOM 元素只能有一个根元素
3. 虚拟 DOM 元素必须有结束标签

3. 源码

本次文章源代码地址：https://github.com/Mayandev/react-tutorial/blob/master/code/react-component/react-component.html