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

冷不防 2023-06-08 06:39 2阅读 0赞

### 文章目录 ###

*   *   *  1. 组件
         *  2. 自定义组件的两种方式
         *  3. 源码

### 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>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

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

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

### 3. 源码 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20230531/12d56f687e034ce28010849a24ef10a1.png