【React】归纳篇（三）模块与组件以及模块化与组件化-概念与基本使用

编程轨迹_

已于 2022-04-15 14:36:52 修改

阅读量1.5k

点赞数

分类专栏： React | Vue 文章标签：组件化模块化 React

于 2018-09-05 19:55:21 首次发布

本文链接：https://blog.csdn.net/ImagineCode/article/details/82429702

版权

React | Vue 专栏收录该内容

30 篇文章 12 订阅

订阅专栏

在这里插入图片描述

慨念

模块：向外提供特定功能的JS文件，便于复用JS，简化JS，提升JS效率

数据、对数据的操作（函数）、将想暴露的私有的函数向外暴露（暴露的数据类型是对象）

模块化：形容项目编码方式，即按模块编写与组织的项目。
组件：用来实现特定布局功能效果的代码与资源集合，包含html、css、js、图片资源等，例如一个页面中头部区域的资源集合
组件化：形容项目的编码方式，即按组件方式编写实现的项目。

组件的基本定义与使用

React是一种面向组件编程的框架（面向对象->面向模块->面向组件）

基本使用

组件标签：以大写字母开头，如
使用组件的不变步骤：
1、定义组件
方式1：工厂函数组件（一种简单组件：没有状态的组件）

function MyComponent() {
	return <h2>return 出来的必须是一个虚拟DOM</h2>
}

方式2：ES6类组件（一种复杂组件：有状态的组件）

class MyComponent2 extends React.Component {
	render () {
		return <h2>使用ES6类组件方式</h2>
	}
}

2、渲染组件标签

ReactDOM.render(<MyComponent />,document.getElementById('test'));//MyComponent内部包含了<h2>标签

完整代码（请结合代码注释查看）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
       function MyComponent() {
            return <h2>return 出来的必须是一个虚拟DOM</h2> //return 出来的必须是一个虚拟DOM
        }
        class MyComponent2 extends React.Component {
        		console.log(this);//打印出组件的实例对象（组件对象）
            render () {
                return <h2>使用ES6类组件方式</h2>
            }
        }
        ReactDOM.render(<MyComponent />,document.getElementById('test1'));//MyComponent内部包含了<h2>标签
        
        ReactDOM.render(<MyComponent2 />,document.getElementById('test2'));
        //MyComponent2内部包含了<h2>标签,调用MyComponent2时会创建一个实例，然后这个实例再去调用下面的方法——render()
        
    </script>
</body>
</html>

效果如图：

这里写图片描述