网站首页 > 技术文章 正文
道理很简单,一个东西之所以火,很多人追捧,一定是它哪一方面特别牛逼。要么能提高生产效率,一天多码几百行代码。要么写出来的代码特别优雅,让人看了就好像春风吹在脸上一样。你可以表示不屑,但是在深入了解它之前,不要鄙视它。当然也不要随波逐流,今天出来一个新框架,去它官网一看简介,哇塞好牛逼,就它了,然后开始把项目往上迁移。不是这样的,除非你有大把时间,而且隔壁产品经理还不好意思催你做需求。
话说回来,React到底解决了什么痛点呢?我们先说是什么,然后再来看为什么。
React是Facebook推出的一个前端框架,准确的说,它是一个前端的UI组件库。你对html里的Button标签不满意?用React的Button吧,人家封装好了,各种牛逼的功能都有,拿来就可以用哦。为了方便在js里直接写html,React用了一个叫JSX的语法,写出来是这个样子:
render(){
return <div><p>this is react</p></div>;
}
一个js的函数里面,竟然在直接写html代码,好大的胆子。当然,你直接这么写,浏览器是不认的,你需要写完代码之后用专门的工具把它转换成普通的js和html,幸好这些都可以自动搞定。
世间代码千千万,为什么偏非要这样写呢?其实这里有一种组件化的思想在里面。我们都知道程序员写代码,都喜欢面向对象那一套,能封装的就封装起来。用js来包装html,那html是不是也有了面向对象的能力了呢?
把一个UI界面封装起来,做成一个组件,就可以交给隔壁老王去用。如果他用的爽,他会推荐给对面小李去用,一传十十传百,组件就传播出去了。别人因为直接用了你的组件而少些了很多代码,他们会在github上给你一颗星作为奖励的。
另一方面,React做了一个虚拟DOM,可以很好的解决原生js操作DOM太频繁的问题。
想像一下,你在某宝上搜了一个关键词,然后出来一堆商品。这个可以用html+js很快实现。然而,当你把按价格排序、按品牌筛选之类的各种功能加上去之后,你会发现要做的事情还有很多。一般来说,js可以很快的对数据进行排序,但是排序之后要依赖大量的操作DOM,才能让用户看到结果的变化。我们说过,这样的一个页面,DOM节点可能有上千个,性能还有编码复杂度都会遇到挑战。
有了React,它自带了一个虚拟的DOM树。你想刷新某个文字?直接来操作它就行了。你想插入一个广告?直接来操作它就行了。你不要操作DOM树了,来伤害这棵虚拟的DOM树吧,它很厉害的,它有一个牛逼的比对算法,保证你无论怎么摆弄,都能把受影响的范围降到最小。
一句话,代码写的爽,性能还有提升,它就是最好的。认为对的,可以关注下。
猜你喜欢
- 2024-10-01 React状态管理专题:什么是Redux(react+redux)
- 2024-10-01 Next.js 14 正式发布(next.itellyou.cn)
- 2024-10-01 React:组件的生命周期(react组件的生命周期函数)
- 2024-10-01 react native 封装一个公用的数据请带上拉分页下拉刷新的组件
- 2024-10-01 React是一个前端开发项目的JavaScript库
- 2024-10-01 「最简教程」每天一篇,轻松搞定 React——状态提升
- 2024-10-01 千万级项目后台菜单导航设计及react antd实现
- 2024-10-01 这就是你日思夜想的 React 原生动态加载
- 2024-10-01 React 渲染的未来(react 渲染流程)
- 2024-10-01 React 最简单的入门应用项目(react简单吗)
- 08-01Linux Systemd入门
- 08-01使用 Checkmk 监控 Oracle 服务器
- 08-01核心库CPU飙到99%了!我发现很多DBA都不会看日志……
- 08-01China's CETC Kingbase Unveils AI-Powered Database Appliances Amid Rising Demand for Intelligent Data Infrastructure
- 08-01Docker安装部署Oracle/Sql Server
- 08-01Oracle数据库安装 | 步骤详细
- 08-01基于Springboot + vue实现的社团管理系统
- 08-01前端开发如何用Mock.js进行数据接口模拟
- 1520℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 623℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 526℃MySQL service启动脚本浅析(r12笔记第59天)
- 492℃启用MySQL查询缓存(mysql8.0查询缓存)
- 491℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 479℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 460℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 458℃MySQL server PID file could not be found!失败
- 最近发表
-
- Linux Systemd入门
- 使用 Checkmk 监控 Oracle 服务器
- 核心库CPU飙到99%了!我发现很多DBA都不会看日志……
- China's CETC Kingbase Unveils AI-Powered Database Appliances Amid Rising Demand for Intelligent Data Infrastructure
- Docker安装部署Oracle/Sql Server
- Oracle数据库安装 | 步骤详细
- 基于Springboot + vue实现的社团管理系统
- 前端开发如何用Mock.js进行数据接口模拟
- 使用vite为vue项目配置@别名
- 基于Springboot + vue3实现的教务管理系统
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- windowsscripthost (69)
- apt-getinstall-y (100)
- js~~ (67)
- node_modules怎么生成 (87)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- c语言min函数头文件 (68)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)