React 17 的这个重磅功能一定值得你升级

最新推荐文章于 2024-07-22 00:51:14 发布

yck 恺哥

最新推荐文章于 2024-07-22 00:51:14 发布

阅读量870

点赞数

文章标签： html react native less js nmap

本文链接：https://blog.csdn.net/yck199/article/details/108191638

版权

点击上方蓝字关注前端真好玩，从此前端进阶不再难

React17 虽说是一个无新特性的一个版本，但是这个版本却有一个重量级功能是值得我们去使用它的：渐进式升级。

这个重量级功能从此无需我们整个项目都一次性升级版本，而是允许我们同一个项目下可以共存多版本，这个功能对于中大型项目来说绝对是福音了。从此我们无需眼馋新版本的功能却因为升级的成本过大而放弃。

这里是官方的一个渐进式升级 Demo^[1]，大家可以发现该项目的 React 版本存在新旧两者。

另外 React17 的一些优化，比如说渐进式升级、事件机制的重写，都感觉有点利好微前端。无需再处理之前版本中事件委托全部挂到 document 上，同时也解决了同一项目多 React 版本并存的问题。

字不多，周末随便说两句，大家也可以聊聊 React 的这次更新。

参考资料

[1]

渐进式升级 Demo: https://github.com/reactjs/react-gradual-upgrade-demo

如果觉得不错，素质三连、或者点个「赞」、「在看」都是对笔者莫大的支持，谢谢各位大佬啦~

- END -

欢迎同仁投稿，扫描下方二维码联系即可

转载同样可以联系下方二维码获取授权

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yck 恺哥

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

11月最值得关注的26个热点

karamos的专栏

11-30

1175

近年来，实时音视频快速发展，WebRTC作为实时音视频的标准也快速发展，从直播到通讯，其应用场景也在不断丰富。如果您关注实时音视频方向的技术产品应用与创新，本系列文章就将会为您分享音视频方向的技术产品动态，助您第一时间获取业界信息。本文将为你快速解析近期值得关注的技术、产品与行业热点。 1.腾讯会议发布3.0版本 11月4日，2021腾讯数字生态大会上发布了腾讯会议3.0版本，下面就分享几个小点。 •腾讯会议的定位是降低人们达成共识的成本，所以产品设计的时候都是围绕这个点这个点深有感触，人们往

2022届秋招，从被拒到SP+ 谈谈YK菌在2021年的经历与收获

m0_54850825的博客

02-21

504

嗨！~ 大家好，我是 ?? ，一个微系前端，爱思考，爱总结，爱记录，爱分享 ??，欢迎关注我呀 ?? ~ [微信公众号：ykyk2012] 的秋招之路走的不是特别顺利，从简历挂、笔试挂、一面挂、二面挂，我经历了很多很多次的失败；但好在我坚持下来了，最后终于收获了一些企业的 offer。从被拒到白菜到 SP 再到 SP+ ，一路辛酸，如果你对我的故事感兴趣，就听我慢慢说吧~ 为什么今年秋招我参加了 40 场笔试 47 场面试，为什么这么多呢，因为作为一个没有实习、没有比赛、没有大型.

参与评论您还未登录，请先登录后发表或查看评论

react-ravel:react17 + ts旅游网demo项目

03-27

Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。打开在浏览器中查看它。如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！如果您对构建工具和配置选择不满意，则可以随时eject 。此命令将从您的项目中删除单个生成依赖项。相反，它将所有配置文件和传递依赖项（webpac

ant-design-pro的react由版本16升级到版本17

sg_knight的专栏

12-23

2014

1、升级react版本 npm install --save react@17.0.2 2、升级react-dom版本 npm install --save react-dom@17.0.2 3、升级types/react版本 npm install --save-dev @types/react@17.0.37 4、升级types/react-dom版本 npm install --save-dev @types/react-dom@17.0.11 新时代农民工 ...

React17 设计模式最佳实践（三）

最新发布

龙哥盟

07-22

914

自版本 16.3.0 以来，React 上下文 API 已正式添加；在此之前，它只是实验性的。新的上下文 API 是一个改变游戏规则的东西。许多人正在摆脱 Redux，以使用新的上下文 API。上下文提供了一种在组件之间共享数据的方法，而无需将 prop 传递给所有子组件。让我们看一个基本示例，我们可以在其中使用新的上下文 API。我们将在第三章 React Hooks中做相同的示例，我们在那里获取了一些 GitHub 问题，但现在使用上下文 API。

记录react15版本升至16及以上步骤及遇到的问题

qq_37057426的博客

07-05

2282

查看项目package.json中，"react"及"react-dom"两个包版本号然后在命令行中依次输入：npm install --save react@17.0.2npm install --save react-dom@17.0.2现在都有react18了，为什么只升到17，问就是为了稳定，毕竟公司项目，领导能同意升级包已经不错了，还是要求稳定的。之后在命令行中依次删除 node_modules 包，重新npm安装：rm -rf node_modules npm install到这里就已经完成了升

React 17 正式发布！更新一览

前端开发博客

10-22

6255

就在今天，React 团队正式发布了 React 17，这次发布带来了哪些内容？没有新特性React 17版本不同寻常，因为它没有添加任何面向开发人员的新功能。取而代之的是，该发行版主要...

React state 更新时机以及强制更新

woyaoshengzhang的博客

06-12

674

之前的 state 的值是 0，所以这就是 React 作为参数 n 传递给第一个更新函数的值。React 会保存 3 为最终结果并从 useState 中返回。通过传入一个更新函数。来更新state的值。

栋的月结 | 第二回合（定期更新、动态、架构、云技术、算法、后端、前端、收听/收看、英文、书籍、影视、好歌、新奇）[含泪总结.. 憋泪分享！]

纽雪澳诺加海美德的博客

03-28

5590

开篇词大家好！以下是我在 2020 年 2 月 1 日至 29 日的所见、所闻、所学和所悟。现在，我把它们安利给你们。定期更新原创专栏：一文搞定 Linux 管理员手册：既简单又深刻官方授权： Baeldung Java 周评符合官方许可： Spring 官方指南动态在我的《一文搞定》系列专栏里新增了：《xxxx》从我的英...

极客手中的利器Electron

华章IT官方博客

05-29

814

寻找2022数智化小巨人系列报道：OA引领者蓝凌的进阶之路

中国软件网

05-18

915

《中智观察》第1662篇推送作者：雨涵编审：杨小天头图来源：蓝凌官网如今，互联网、大数据、云计算、人工智能、区块链等技术加速创新，日益融入经济社会发展中的各个领域，数智化正在成为催生新动能和创新优势的关键力量。在数智化的浪潮席卷各行业之下，大量企业开始积极拥抱数智化转型，进行技术基础设施的优化迭代，进一步探索和开拓“数智化”发展之路。在此背景下，企业的数智化怎样实现有效地...

react17-webpack5-demo

04-13

react17-webpack5-demo

【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」

超逸の学习技术博客

08-24

1156

入门实战系列，小白也能增加编程经验，我的开源之作。

react16和react17区别

柒君的博客

11-12

3418

17改进： 1.不再在document上绑定事件，改为绑定于rootNode节点，这样可以使多个版本的react同时存在于页面中，不会因为事件绑定系统起冲突 2.去除了事件池，不在用e.persist(),现在可以直接在异步事件中（回掉或timeout等）拿到事件对象 3.副作用清理函数(如果存在)改为异步执行，即在浏览器渲染完毕后执行？？？副作用清理函数会异步执行 —— 如果要卸载组件，则清理会在视图更新后运行 4.forwardRef和memo组件的行为会与常规函数组件和class组件保持一致

React 16 升级到 17 的一个坑：组件销毁时 ref 可能会被重置为 null

fe_watermelon的博客

06-15

1436

大家好，我是前端西瓜哥。最近公司的项目用的 React 从 16 升到了 17 版本，选择升级的原因是想以后将项目迁移到 Nextjs 上。结果发现因为 React 的行为不一致导致了一些看得见的和看不见的 bug，真的是一场灾难。React 17 是一个比较特别的版本，它没有任何新特性，但它改造了 React 的底层，让 React 17 可以渐进式地升级部分的模块，为 18 版本做准备。这些改造，有一部分是破坏性的。我这里有个弹窗，弹窗里面是一些表单项。当用户在表单项做了一些修改，然后点击弹窗的遮罩层时

react如何设置代理

weixin_40790248的博客

02-08

1173

react-17版本可用 react代理设置：以需要代理的服务器地址http://localhost:5000为例方法一：在package.json文件中添加一个参数 "proxy":"http://localhost:5000", 方法二：1.先下载代理包，npm ihttp-proxy-middleware -d 2.在src中新建文件夹，命名为setupProxy.js 3.导入包：const{createProxyMiddleware}=require('...

React17 入门

猫老板的豆

09-01

867

文章目录ref生命周期(针对于组件而言)Mounting 挂载Updation 更新Unmounting 卸载注意CSSTransition 动画库安装使用Ant Design UI库安装使用Redux安装原则核心API具体用法store/list.jsstore/actionCreator.jsstore/index.jsstore/reducer.jsRedux-thunk中间件安装使用store/index.jsTodoList.jsstore/actionCreator.jsstore/reduc

全球最全的React16版本升级手册

weixin_34378969的博客

04-22

980

升级 react , react-dom 网上有一些的讲react15升级到react16升级的教程。但是很少从整体讲，都是从单个知识点讲。很多都是只讲react本身的升级，如：PropTypes 引用从react模块改成单独的prop-types模块。但是一般项目的架构都是：react+react-router+redux+react-...

react17.x+MDUI实现todo小案例，react动态添加与删除元素属性

超小少的博客

12-01

867

很长一段时间没有使用react做项目了，一看官网已经更新到17.x版本了，记得今年上班的时候才v13.x，由于平时项目开发用vue的时候居多，对于react长时间不用怕忘了，赶紧写个小案例练练手，使用版本说明： react：v17.0.1 MDUI：v1.0.1 官方描述：MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用。官网地址https://www.mdui.org/ 先上效果图：至于为啥使用MDUI，我也是在头条上刷资讯的时候偶然看见的，因为平时在上面

你这个title 如果是REACTNODE呢

06-09

如果你的title是一个ReactNode类型的对象，你可以像这样在组件中渲染它： ``` import React from 'react'; function MyComponent(props) { return ( <div> <h2>{props.title}</h2> {props.children} </div> ); } function App() { return ( <div> <MyComponent title={<span>My Title</span>}> <p>Paragraph 1</p> <p>Paragraph 2</p> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </MyComponent> </div> ); } export default App; ``` 在这个示例中，我们将title属性设置为一个包含<span>元素的ReactNode对象。在MyComponent组件中，我们可以直接将title属性作为ReactNode类型的对象进行渲染。因为title属性是一个ReactNode对象，所以它可以包含任何类型的React元素，包括文本、元素和其他组件。