React 入门教程系列（四）—

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

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

文章目录

- - 1. 组件
  - 1. 自定义组件的两种方式
  - 1. 源码

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>
<!-- ... -->