React 教程第一节 简介概述 以及 特点

devtools/2024/11/19 22:42:47/

概述:

一个用于构建web与原生交互界面的UI库,无论是独立开发者,还是团队协作,React 都可以轻松的组合由不同人群开发的组件,随写随插随用,方便快捷;

特点:

1、声明式设计:

React 采用声明式设计,是开发创建的交互界面变得简单易用。开发人员只需要创建自己想要的UI即可,剩下的由React 数据驱动DOM完成界面的绘制渲染,使得开发便于维护;

2、组件化:

将复杂的界面交互,拆分成单一功能可复用的组件,保证组件清晰的逻辑方便维护管理,同时,组件之间相互组合可以轻易组装成复杂的场景,减少代码冗杂,提升组件的复用性;

3、高效性:

通过虚拟DOM DIFF算法来提高应用的性能,在用户增删改查操作时候,React 会通过对比新旧虚拟DOM,批量更新,减少与真实DOM的交互,来实现快速更新界面;

4、灵活性:

不强制要求开发者使用特定的开发设计模式,只要是开发者自己喜欢的技术栈即可,不管使用的是哪种技术栈,随时可以引入 React 进行开发功能;

5、JSX语法:

React 中允许使用类似 javascriptXML语法一样进行编写代码,可以将 js 与 html 编写在一起,是组件逻辑更加直观易读;

6、单向数据流:

React 的数据流,只会从父级传递到子级,形成单向数据流。子组件无法直接修改父组件的状态,需要通过调用父组件的事件方法来实现;单向数据流,数据管理清晰,状态管理简单,易于维护;

7、生命周期:

每个组件都有 挂载、更新、卸载 三个阶段;类组件中通过 React自带的生命周期函数实现
挂载:componentDidMount,
更新:componentDidUpdate
卸载:componentWillUnmount
实现;函数组件中通过 hook 模拟实现,如:useEffect useCallBack;
生命周期,便于根据不同的阶段,实现相应的逻辑,方便管理,提升代码的可控性;

8、HOOKS:

React 从 16.8开始引入 hooks函数,允许开发人员在函数式组件中使用状态,或者其他特性;简化组件的结构,减少类式组件的使用,可通过自定义hook 将复用的逻辑代码抽离,提高代码的可维护性

9、跨平台:

reactNative 使的一套 react 代码可以实现在web端 移动端开发应用,而实现跨平台;

接下来开始 React 的系统性文档整理之旅,主要针对16.8之后以函数式组件编写开发过程中的注意事项,欢迎各位批评指正


http://www.ppmy.cn/devtools/135316.html

相关文章

【Linux】虚拟地址空间,页表,物理内存

目录 进程地址空间,页表,物理内存 什么叫作地址空间? 如何理解地址空间的区域划分? 地址空间结构体 为什么要有地址空间? 页表 cr3寄存器 权限标记位 位置标记位 其他 每个存储单元是一个字节,一…

UE5 UE4 播放视频没有声音解决

开启AVF插件 在项目设置中,AVF 的调试打开。 在项目设置中,WMF Media 中,allow Non standard Codecs,Low Latency 和 Native Audio Out打开。

Python 小高考篇(3)分支语句

目录 关系运算符条件判断if语句if-elif语句if-elif-else语句 逻辑运算符逻辑与逻辑或逻辑非 其它数据点类型对应的布尔值自测总结结尾 本文由Jzwalliser原创,发布在CSDN平台上,遵循CC 4.0 BY-SA协议。 因此,若需转载/引用本文,请注…

每日学习记录02:(C++)构造函数,代理构造函数和析构函数

每日学习记录02:(C)构造函数,代理构造函数和析构函数 个人学习笔记,如有错误,请指正 构造函数 构造函数是一种特殊的成员函数,它在创建类的新对象时被调用,用于初始化对象的成员变…

AC自动机探究(一)

1.初识AC自动机 1.1什么是AC自动机 可以简单将AC自动机理解为字典树的加强版本,使用AC自动机可以存储敏感词数据,去使用AC自动机筛选出大文本中是否有敏感词数据。 所以使用AC自动机可以简单,快速的根据AC自动机寻找到文本中的敏感词数据&am…

Python学习27天

字典 dict{one:1,two:2,three:3} # 遍历1: # 先取出Key for key in dict:# 取出Key对应的valueprint(f"key:{key}---value:{dict[key]}")#遍历2,依次取出value for value in dict.values():print(value)# 遍历3:依次取出key,value …

springboot整合elasticsearch,并使用docker desktop运行elasticsearch镜像容器遇到的问题。

springboot和elasticsearch版本兼容性问题: 使用easy-es组件,简化es的操作, ​ Easy-Es​官网:https://www.easy-es.cn/ 参考easy-es组件官网的文档的内容,调整版本问题。 ​​​​ Java代码如下: packa…

校园二手交易网站毕业设计基于SpringBootSSM框架

目录 一、引言 二、需求分析 2.1用户需求分析 2.1.1学生用户 2.1.2管理员 2.2系统功能需求 2.3系统非功能需求 ‌2.4技术需求 ‌2.4.1 技术选择 ‌2.4.2系统架构‌ 三、详细设计 3.1系统架构设计‌ ‌3.2前端设计‌ ‌3.3后端设计‌ ‌3.4数据库设计‌ 本文介绍…