React | React组件化开发

最新推荐文章于 2025-05-19 17:49:16 发布

coderHing[专注前端]

最新推荐文章于 2025-05-19 17:49:16 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：教你11天学会React 文章标签： react.js 前端 javascript reactjs 前端框架

本文链接：https://blog.youkuaiyun.com/coderhing/article/details/130448958

本文详细介绍了React的组件化开发思想，包括函数组件和类组件的定义，以及组件的无状态和有状态。接着，阐述了React组件的生命周期，如挂载、更新和卸载阶段的关键函数。文章还讨论了组件间的通信方式，如props的传递，以及非父子组件间通信的ContextAPI。最后，深入探讨了setState的异步更新机制及其在React18之后的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

✨ 个人主页：CoderHing

🖥️ React .js专栏：React .js React组件化开发
🙋‍♂️ 个人简介：一个不甘平庸的平凡人🍬

💫 系列专栏：吊打面试官系列 16天学会Vue 11天学会React Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力！❤️

类组件

函数组件

参数propTypes

setState一定是异步吗？（React18之前）

setState默认是异步的（React18之后）

一、React组件化开发

什么是组件化开发?

组件化是一种分而治之的思想:
- 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展
- 但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了
我们需要通过组件化的思想来思考整个应用程序
- 我们将一个完整的页面分成很多个组件
- 每个组件都用于实现页面的一个功能块
- 而每一个组件又可以进行细分
- 而组件本身又可以在多个地方进行复用

React的组件化

组件化是React的核心思想,前面我们封装的App本身就是一个组件
- 组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
- 任何的应用都会被抽象成一颗组件树
组件化思想的应用
- 有了组件化的思想,在之后的开发中就要充分的利用它
- 尽可能的将页面拆分成一个个小的,可复用的组件
- 这样让我们的代码更加方便组织和管理,并且扩展性也更强
React的组件相对于Vue更加的灵活和多样,按照不同的方式可以分成很多类别组件
- 根据组件的定义方式,可以分为：函数组件(Functional Component )和类组件(Class Component)
- 根据组件内部是否有状态需要维护,可以分成:无状态组件(Stateless Component )和有状态组件(Stateful Component)
- 根据组件的不同职责,可以分成:展示型组件(Presentational Component)和容器型组件(Container Component)
这些概念有很多重叠,但是他们最主要是关注数据逻辑和UI展示的分离
- 函数组件,无状态组件,展示型组件主要关注UI的展示
- 类组件,有状态组件,容器型组件主要关注数据逻辑
当然还有很多组件的其他概念：比如异步组件、高阶组件等

类组件

类组件的定义有如下要求:
- 组件的名称是大写字符开头（无论类组件还是函数组件）
- 类组件需要继承自 React.Component
- 类组件必须实现 render函数
在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义
使用class定义一个组件
- constructor是可选的，我们通常在constructor中初始化一些数据
- this.state中维护的就是我们组件内部的数据
- render() 方法是 class 组件中唯一必须实现的方法

render函数的返回值

当render被调用时,它会检查this.props和this.state的变化并返回以下类型之一:
React元素:
- 通常通过 JSX 创建
- 如,<div /> 会被 React 渲染为 DOM 节点,<MyComponent /> 会被 React 渲染为自定义组件
- 无论是 <div /> 还是 <MyComponent /> 均为 React 元素
数组或 fragments: 使得 render 方法可以返回多个元素
Portals: 可以渲染子节点到不同的 DOM 子树中
字符串或数值类型: 它们在 DOM 中会被渲染为文本节点
布尔类型或 null: 什么都不渲染

函数组件

函数组件是使用function来进行定义的函数,只是这个函数会返回和类组件中render函数返回一样的内容
函数组件有自己的特点(没有hooks前是这样的,hooks后就不一样了)
- 没有生命周期,也会被更新挂载,但是没有生命周期函数
- this关键字不能指向组件实例(因为没有组件实例)
- 没有内部状态(state)
我们来定义一个函数组件:

二、React组件生命周期

认识生命周期

很多的事物都有从创建到销毁的整个过程,这个过程就称为生命周期;
React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能
生命周期和生命周期函数的关系
生命周期是一个抽象的概念,在生命周期的整个过程,分成了很多个阶段
- 如装载阶段（Mount）组件第一次在DOM树中被渲染的过程
- 如更新过程（Update）组件状态发生变化，重新更新渲染的过程
- 如卸载过程（Unmount）组件从DOM树中被移除的过程