每天学点React - 模块与组件、模块化与组件化的简单理解持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

模块与组件、模块化与组件化的理解

模块

什么是模块：向外提供特定功能的js程序，一般是一个js文件
为什么要拆分：解耦，随着业务逻辑的增加，代码复杂度
有什么用：可以复用js，简化代码编码，提高运行效率

组件

什么是组件：用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）
为什么要拆分：界面功能复杂
有什么用：复用编码，简化项目编码，提高运行效率

模块化

当应用的js都以模块来编写的时候，这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式来实现的，这个应用就是一个组件化的应用

React面向组件编程

前置

需要安装React提供的一款浏览器插件用于调试，不能访问谷歌应用商场的小伙伴可以通过下面的链接进行下载：

React浏览器插件：www.chrome666.com/chrome-exte…

函数式组件

函数式组件，通过函数来定义组件。

需要注意的地方如下：

不能将函数定义成React的子节点，必须定义为组件；
自定义组件需要首字母大写；
组件标签需要闭合；
不能在函数中使用this，babel在编译时会开启严格模式，导致this变成undefined。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数式组件</title>
</head>
<body>

<!-- 测试容器 -->
<div id="test"></div>

<!-- 加载 React 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 加载 React DOM 用于支持 React 操作 DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<!-- 设置类型为babel -->
<script type="text/babel">
    // 创建函数式组件
    function SimpleFun(){
        console.log('this: ', this)
        return <h2>函数定义的组件（适用于【简单组件】的定义）</h2>
    }

    // 将组件渲染到页面（需要定义为标签而不是子节点）
    ReactDOM.render(<SimpleFun/>, document.getElementById('test'))
</script>
</body>
</html>

类式组件

使用类式组件：

自定义的类必须继承React.Component类；
重写render()方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类式组件</title>
</head>
<body>
    
    <!-- 测试容器 -->
    <div id="test"></div>

    <!-- 加载 React 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 加载 React DOM 用于支持 React 操作 DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 加载 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 设置类型为babel -->
    <script type="text/babel">
        // 创建类式组件
        class MyComponent extends React.Component {
            render() {
                return <h2>类定义的组件（适用于【复杂组件】的定义）</h2>;
            }
        }
        // 将组件渲染到页面
        ReactDOM.render(<MyComponent/>, document.getElementById('test'))
    </script>
</body>
</html>