React 入门：面向组件编程

西涯三锋

已于 2022-10-18 22:54:42 修改

阅读量431

点赞数

分类专栏： React 学习实战笔记文章标签： react.js javascript 前端

于 2022-10-18 00:39:09 首次发布

本文链接：https://blog.csdn.net/assokoo123/article/details/127380103

版权

React 学习实战笔记专栏收录该内容

30 篇文章 5 订阅

订阅专栏

文章目录

模块与组件、模块化与组件化的理解
React 面向组件编程
- 函数式组件
- 类式组件

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

模块

如何理解模块？
模块就是向外提供特定功能的 js 程序，一般就是一个 js 文件。
为什么要拆成模块？
随着业务逻辑增加，代码越来越多且复杂，根据业务逻辑或者其他规则，将大块复杂的代码拆分成模块，更容易管理和复用。
模块的作用
可以复用 js，简化 js 的编写，提高 js 运行效率。

组件

如何理解组件？
组件用来实现局部功能效果的代码和资源的集合（html/css/js/image 等等）。
为什么要有组件？
一个界面的功能更复杂，很多结构类似的功能重复，为了复用和便于管理，便引入了组件的概念。
组件的作用
复用编码，简化项目编码，提高运行效率。

模块化

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

组件化

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

React 面向组件编程

React 提供了两种定义组件的方式：

函数式组件

创建函数式组件，必须注意以下几点：
- 函数名称首字母必须大写；
- 函数必须有返回值；
- 函数内的this为undefined，是因为 babel 编译后开启了js的严格模式。
渲染函数组件注意项：
- 调用组件必须使用组件标签（如：<MyComponent/>），不能直接使用函数名称。
函数式组件代码简单语法示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_函数式组件</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建函数式组件
        function MyComponent() {
            console.log(this) // 此处的 this 是 undefined，是因为 babel 编译后开启了js的严格模式
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<MyComponent/>, document.getElementById('app'))
    </script>
</body>

</html>

【语法解析】
执行了ReactDOM.render(……)之后，发生了什么？

React 解析组件标签，找到了MyComponent组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，并呈现到页面中。

类式组件

见名知意，类式组件就是基于 ES6 的 Class 实现的，如果您对 ES6 的类不熟悉或者有所遗忘，请移步《js 中类 class 的基本知识》快速 GET。

创建类式组件，必须注意以下几点：
- 必须继承 React 的 Component 类；
- 必须有 render 方法，而且 render 方法必须有返回值（返回虚拟DOM）：
- 调用组件必须使用组件标签（如：<MyComponent/>），不能直接使用类名。
类式组件代码简单语法示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_类式组件</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建类式组件
        class MyComponent extends React.Component {
            render() {
                // render 是放在哪里的？—— MyComponent 的原型对象上，供实例使用。
                // render 中的 this 是谁？—— MyComponent 的实例对象 或者 MyComponent 组件对象实例。
                console.log('render 中的 this: ', this)
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }
        }

        // 渲染组件到页面
        ReactDOM.render(<MyComponent/>, document.getElementById('app'));
    </script>
</body>

</html>

【语法解析】
执行了 ReactDOM.render(……)之后，发生了什么？

React 解析组件标签，找到了 MyComponent 组件。
发现组件标签是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。
将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

本文只是简单介绍了一下 React 组件编程的思维和方式，作为一个引子，后续我会继续分享更深入 React 组件编程的相关知识。