【React】组件:全面解析现代前端开发的基石

文章目录

    • 一、什么是组件?
    • 二、组件的类型
    • 三、组件的生命周期
    • 四、状态管理
    • 五、属性传递
    • 六、组合与继承
    • 七、最佳实践

在现代前端开发中,React 已成为开发者构建用户界面的首选框架之一。React 的强大之处在于其组件化设计,允许开发者将 UI 拆分为独立、可复用的组件。本文将详细介绍 React 中的组件,包括组件的定义、类型、生命周期、状态管理、属性传递以及最佳实践,帮助开发者深入理解和高效使用 React 组件。

一、什么是组件?

组件是 React 的基本构建块。每个组件都可以看作是一个独立的模块,负责实现界面中的一部分。组件可以嵌套使用,从而构建出复杂的用户界面。组件的设计理念是将 UI 和业务逻辑分离,使代码更加模块化和易于维护。一个组件就是首字母大写的函数。

二、组件的类型

React 中的组件主要分为两种类型:函数组件和类组件。

  1. 函数组件

    函数组件是定义组件的最简单方式。它们本质上是接收 props 并返回 JSX 的普通 JavaScript 函数。自 React 16.8 引入 Hooks 以来,函数组件变得更加强大,可以处理状态和副作用。

    function Greeting(props) {return <h1>你好, {props.name}</h1>;
    }
    
  2. 类组件

    类组件是通过 ES6 类语法定义的组件,具有更多的特性,如状态管理和生命周期方法。在 Hooks 引入之前,类组件是实现复杂组件逻辑的主要方式。

    class Greeting extends React.Component {render() {return <h1>你好, {this.props.name}</h1>;}
    }
    

三、组件的生命周期

类组件具有生命周期方法,可以在组件的不同阶段执行特定的操作。React 的组件生命周期分为三个主要阶段:挂载、更新和卸载。

  1. 挂载阶段
    • constructor(): 构造函数,在组件实例化时调用。
    • static getDerivedStateFromProps(): 每次在组件实例被重新渲染之前调用。
    • componentDidMount(): 在组件挂载到 DOM 后调用,可以在这里进行 DOM 操作或数据请求。
  2. 更新阶段
    • shouldComponentUpdate(): 在重新渲染前调用,可以根据条件决定是否重新渲染组件。
    • getSnapshotBeforeUpdate(): 在最新的渲染输出提交到 DOM 之前调用,可以捕获一些信息。
    • componentDidUpdate(): 在组件更新后调用,可以在这里进行 DOM 操作或数据请求。
  3. 卸载阶段
    • componentWillUnmount(): 在组件从 DOM 中移除之前调用,可以在这里执行清理操作,如取消定时器或网络请求。

四、状态管理

组件的状态(state)是指组件中需要动态变化的数据。类组件使用 this.state 初始化状态,并使用 this.setState() 方法更新状态。函数组件使用 useState Hook 来管理状态。

  1. 类组件中的状态管理

    class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState({ count: this.state.count + 1 });}render() {return (<div><p>计数: {this.state.count}</p><button onClick={this.increment}>增加</button></div>);}
    }
    
  2. 函数组件中的状态管理

    function Counter() {const [count, setCount] = React.useState(0);return (<div><p>计数: {count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
    }
    

五、属性传递

组件通过 props 接收从父组件传递的数据。props 是只读的,不能在子组件中修改。通过 props,组件可以实现数据的传递和复用。

  1. 基本属性传递

    function Greeting(props) {return <h1>你好, {props.name}</h1>;
    }function App() {return <Greeting name="世界" />;
    }
    
  2. 传递回调函数

    可以通过 props 传递回调函数,以实现父子组件之间的通信。

    class Parent extends React.Component {handleChildClick = () => {console.log('子组件按钮被点击了');}render() {return <Child onClick={this.handleChildClick} />;}
    }function Child(props) {return <button onClick={props.onClick}>点击我</button>;
    }
    

六、组合与继承

React 提倡使用组合而非继承来复用组件逻辑。组合可以通过将子组件作为 props 传递给父组件,或使用 React 提供的 children 属性。

  1. 包含关系

    包含关系是指一个组件包含另一个组件,通过 children 属性传递子组件。

    function Container(props) {return <div className="container">{props.children}</div>;
    }function App() {return (<Container><h1>标题</h1><p>这是内容。</p></Container>);
    }
    
  2. 特殊化关系

    特殊化关系是指一个组件通过 props 定制另一个组件,以实现特定的功能。

    function Dialog(props) {return (<div className="dialog"><h1>{props.title}</h1><p>{props.message}</p></div>);
    }function WelcomeDialog() {return <Dialog title="欢迎" message="欢迎使用我们的应用!" />;
    }
    

七、最佳实践

  1. 保持组件的单一职责

    每个组件应只负责一个功能。通过将功能拆分为多个小组件,可以提高代码的可读性和可维护性。

  2. 使用函数组件和 Hooks

    优先使用函数组件和 Hooks 来管理状态和副作用,除非需要使用生命周期方法或有复杂的逻辑需要封装。

  3. 使用 PropTypes 检查

    使用 PropTypes 来进行类型检查,可以在开发过程中捕获类型错误,提高代码的可靠性。

    import PropTypes from 'prop-types';function Greeting(props) {return <h1>你好, {props.name}</h1>;
    }Greeting.propTypes = {name: PropTypes.string.isRequired
    };
    
  4. 保持组件的纯净

    尽量编写纯函数组件,避免在渲染过程中引入副作用。所有的副作用操作(如数据请求、订阅等)应放在 useEffect 或生命周期方法中。


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day09-linux系统优化

01.知识点回顾 常用命令 1.pwd 2.cd-~...../../ 3.ls-l 详细信息-a 查看隐藏的文件 4.touch 5.mkdir-p 递归创建目录 6.cat 查看文件内容-n 显示行号 7.cp 复制文件-r 复制目录 8.mv 移动文件/目录 9.rm 删除文件-r 删除目录-f 强制删除不提示 10.tree 树形结构 11…

Wireshark自定义协议解析器插件C语言开发二

接着上一篇安装文章&#xff0c;在wireshark插件开发完成后&#xff0c;仿真的dll并不能直接分享使用&#xff0c;当另外电脑缺少必要的c环境或依赖项时候&#xff0c;在打开wireshark软件时候即会报错。 上图是仿真得到的dll文件路径&#xff0c;但是并不能在其他没有安装了v…

java——final关键字

final关键字是最终的意思&#xff0c;可以修饰&#xff08;类、方法、变量&#xff09; 修饰类&#xff1a;该类被称为最终类&#xff0c;特点是不能被继承了修饰方法&#xff1a;该方法被称为最终方法&#xff0c;特点是不能被重写了修饰变量&#xff1a;该变量只能被赋值一次…

linux驱动--中断

中断号和中断的申请 中断号的添加-----定义设备节点&#xff0c;描述当前设备 通过设备树文件获取 /dts/xxxx.dts文件中进行设备的设置 在dts设备树文件中进行设备的定义&#xff0c;包括继承的设备&#xff0c;中断号的设置 需要对我们的dts设备树文件进行编译&#xff0…

LeetCode 191, 173, 210

文章目录 191. 位1的个数题目链接标签思路代码Integer.bitCount() 173. 二叉搜索树迭代器题目链接标签思路递归迭代 210. 课程表 II题目链接标签思路代码 191. 位1的个数 题目链接 191. 位1的个数 标签 位运算 分治 思路 这里可以使用一个结论&#xff1a;n & (n - 1…

天机学堂第二天项目 添加我的课表 项目总结

目录 根据产品原型得到数据库表结构 RabbitMq监听 构造器注入 幂等 mybatisplus 分页查询的多种写法 在new page里面添加排序 查询条件中 用orderBydESC指定排序 ​编辑 链式编程中使用page指定排序 stream流 ​编辑 在网关中解析token 根据产品原型得到数据库表结构 根…

基于物联网的区块链算力网络,IGP/BGP协议

目录 基于物联网的区块链算力网络 IGP/BGP协议 IGP(内部网关协议) BGP(边界网关协议) 内部使用ISP的外部使用BGP的原因 一、网络规模和复杂性 二、路由协议的特性 三、满足业务需求 四、结论 基于物联网的区块链算力网络 通 过 多个物联网传感器将本地计算…

Node服务器开发和部署

Node服务器开发和部署 第一步&#xff1a;写一个Node服务 方法1&#xff1a;Express编写 创建一个项目&#xff1a;node_server mkdir node_server && cd node_server && npm init -y安装express&#xff1a; npm install express至此&#xff0c;项目创建…

使用在UE5中使用AirSim插件Eigen库头文件引用报错,出现报错的解决方式

一、概述 如图所示&#xff0c;用红线圈出的两条头文件引用会报错&#xff0c;提示无法找到他们&#xff0c;但是可以发现的是&#xff0c;他们的路径书写是没有问题的。 // #include <Source/Airlib/deps/eigen3/Eigen/Core> // #include <Source/Airlib/deps/eigen…

Android 线程并发:线程通信:Handler机制

文章目录 API源码分析操作总结 API Handler相关 Handler对象.sendMessage(Message) 发送消息 Handler对象.handleMessage()空方法 自定义Handler重写handleMessage方法&#xff0c;处理Message Looper相关 Looper.getMainLooper() 获取App的UI线程的Looper对象 Looper…

【网络爬虫技术】(1·绪论)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;网络爬虫开发技术入门_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 …

日拱一卒 | JVM

文章目录 什么是JVM&#xff1f;JVM的组成JVM的大致工作流程JVM的内存模型 什么是JVM&#xff1f; 我们知道Java面试&#xff0c;只要你的简历上写了了解JVM&#xff0c;那么你就必然会被问到以下问题&#xff1a; 什么是JVM&#xff1f;简单说一下JVM的内存模型&#xff1f;…

梯度下降算法,gradient descent algorithm

定义&#xff1a;是一个优化算法&#xff0c;也成最速下降算法&#xff0c;主要的部的士通过迭代找到目标函数的最小值&#xff0c;或者收敛到最小值。 说人话就是求一个函数的极值点&#xff0c;极大值或者极小值 算法过程中有几个超参数&#xff1a; 学习率n&#xff0c;又称…

代码随想录算法训练营第22天-leetcode-回溯算法part01:

#回溯算法理论基础 能解决的问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割问题&#xff1a;一个字符串按一定规则有几种切割方式子集问题&#xff1a;一个N个数的集合里有多少符合条件的子集排列问题&#xff1a;N个数按一定规则全排列&…

大数据——HBase原理

摘要 HBase 是一个开源的、非关系型的分布式数据库系统&#xff0c;主要用于存储海量的结构化和半结构化数据。它是基于谷歌的 Bigtable 论文实现的&#xff0c;运行在 Hadoop 分布式文件系统&#xff08;HDFS&#xff09;之上&#xff0c;并且可以与 Hadoop 生态系统的其他组…

太美了!智能汽车触摸屏中控让驾驶员和乘客目不转睛

太美了&#xff01;智能汽车触摸屏中控让驾驶员和乘客目不转睛 引言 艾斯视觉作为行业ui设计和前端开发领域的从业者&#xff0c;其观点始终认为&#xff1a;智能汽车已经成为现代交通的新宠。其中&#xff0c;触摸屏中控系统以其美观、智能、人性化的特点&#xff0c;为驾驶…

Electron的入门介绍与使用React18+Vite+Electron(2)共30节

上一篇讲了如何安装Electron和简单例子&#xff0c;Electron的入门介绍与使用&#xff08;1&#xff09;共30节 让我们回顾一下Electron的发展历史&#xff0c;Electron 最初由 GitHub 公司开发&#xff0c;最早用于构建 GitHub Desktop。随着其成功&#xff0c;Electron 逐渐…

在线投稿小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;编辑管理&#xff0c;用户文章管理&#xff0c;文章分类管理&#xff0c;文章展示管理&#xff0c;文章稿酬管理&#xff0c;通知公告管理&#xff0c;系统管理 微信端账号功能包…

从零开始的Python开发日记(3):Flask框架的使用

最近学会了使用Python的Flask框架&#xff0c;并通过该框架实现API的调用以及转发&#xff0c;以下是flask框架下前后端的数据交互模式 后端&#xff1a;python 的 flask 框架 前端&#xff1a;html、css、js前后端数据交互的方式&#xff1a; 一、前端发送数据&#xff0c;后…

Unity ParticleSystem:创造魔法般的视觉效果

Unity的ParticleSystem是一个功能强大的组件&#xff0c;用于创建各种动态的粒子效果&#xff0c;如火焰、烟雾、雨滴、爆炸等。它不仅可以用于增加游戏的视觉吸引力&#xff0c;还可以用于实现复杂的动画效果。本文将探讨如何使用Unity的ParticleSystem组件来实现动画效果。 …