(三)React组件化

组件化

为什么需要组件化开发

在日常开发中 ,系统往往是不是一个简单HelloWorld组件, 它一个庞大的模块, 而若是把整个系统模块的内容在一个页面中编写,实现的话就会导致页面的逻辑复杂, 不易处理, 不易扩展。 而组件化开发则就是把系统划分为多个子模块, 然后子模块在进行细分成更小的一个模块,每个模块都处理自己当前的逻辑与业务。最后一个个组件组装成一个组件树。

组件化开发的优势

  1. 快速开发, 与传统开发一个项目不同, 组件化开发的话我们可以借助已有的组件库,引入所需组件,加快开发效率。
  2. 代码复用, 在组件化开发中,许多模块的代码往往会有许多重复的,而组件化开发则可以将代码进行抽象和封装。
  3. 又灵活,又易扩展,在组件化开发中,每个组件都是独立的,互不影响。这就意味着,我们可以快速、灵活地对单个组件进行修改和扩展。

React的组件化

组件化是React的核心思想, 使用组件化可以让我们开发出一个个可复用的小组件。 任何的应用最后都会被抽象成一颗组件树

React的组件

组件分类

  1. 根据组件的定义方式,可以分为:函数组件和类组件
  2. 根据组件内部是否有状态需要维护,可以分成:无状态组件和有状态组件
  3. 根据组件的不同职责,可以分成:展示型组件和容器型组件

组件分类

函数组件、无状态组件、展示型组件主要关注UI的展示 类组件、有状态组件、容器型组件主要关注数据逻辑

类组件

要求

  1. 组件名称必须大写(函数式组件名称也一致)
  2. 组件必须继承至React.Component
  3. 组件必须实现render函数

定义组件

  1. 组件中constructor方法是可选的, 不写的时候会自动添加, 通常选择是在组件中定义需要数据的时候
  2. this.state中编写需要维护的数据 (就是state, 是不可修改的)
  3. render()是类组件中必须实现的一个方法
js 复制代码
class HelloWorld extends React.Components{
    constructor(){
        super();
        this.state = {
            message: 'Hello World'
        }
    }

    render(){
        // 结构获取需要消息内容
        const {message} = this.state
        return <h2>{message}</h2>
    }
}

函数式组件

特点

  1. 没有生命周期,也会被更新并挂载,但是没有生命周期函数;
  2. this关键字不能指向组件实例(因为没有组件实例);
  3. 没有内部状态(state)

定义组件

js 复制代码
function HelloWorld(){
    return  <h2>Hello World</h2>
}
相关推荐
Winson℡2 小时前
React Native 中的 useCallback
javascript·react native·react.js
谢尔登4 小时前
【Nest】基本概念
javascript·node.js·express
EveryPossible5 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫5 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
林烈涛6 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Magicman8 小时前
JavaScript-事件学习
javascript
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
aidingni88810 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
我是日安11 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter11 小时前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript