程序地带

React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目


download:React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目
React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词,更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目,带领大家掌握最佳实践,全方位提升开发效率、开发质量和技术能力。

 


技术要求有 React 基础环境参数React 17.0.1 / TypeScript 4.0.5 / react-router : 6.0.0 / create-react-app 4.0.1 react-query: 1.0.0 / emotion: 10.0.35 / cypress: 6.1.0 / jest: 26.6.3
 

  前言


  半个月前Vue  3.0刚发布了rc版本,React随后发布了rc版本。


  但是,Vue3大幅提高了Vue2.x的能力,而React17似乎对React16.x不太用力。


  GitHub上的reactjs/reactjs.org文档中也出现了这样的话。


  image


  没有新功能! 这次的React有点皮啊。


  那么更新了什么呢? 让我们翻译一下这个文件


  译文


  文件地址: https://github.com/react  JS/react  JS.org/BLOB/c  30 FF1 e  39B9FCA  747198 c  028 a  3300656 a  90 e  612 /内容/BLOG/2020-00


  标题创建者


  React  17.0 :没有新特性gaearon  rachelnabors


  今天发布了React  v17的第一个RC版本。 离上一个主要版本的React已经两年半了,但以我们的标准,时间跨度有点长。 这个博客将介绍这个主要版本对你的影响以及如何尝试它。


  无新功能


  React  17不太常见,因为它没有为开发人员添加新功能,重点是简化React本身。


  我积极开发React的新功能,但不属于这个版本。 React  17是我们进行深入推进战略的关键。


  这个版本是特殊的原因是因为React  17被认为是迁移版本,所以从一个React版本管理树嵌入到另一个React版本管理树中会更安全。


  逐步升级。


  过去七年来,React一直遵循all-or-nothing的升级战略。 您可以继续使用旧版本,也可以将整个应用程序升级到新版本。 但是,没有介于两者之间的情况。


  这个方法一直持续到现在,但遇到了all-or-nothing升级战略的极限。 许多API更改(如反对使用legacy  context  API  )无法以自动方式执行。 虽然可能大部分应用程序都没有使用过,但是我选择了React支持。 您必须选择无限期支持旧API,还是在某些应用程序中使用旧版本的React。 但是,这两个方案都不合适。因此,我们想提供别的方案。


  React  17开始支持React版本的逐步升级。 如果从React  15升级到16 (或从React  16升级到17 ),通常整个应用程序一次升级。 这适用于大多数应用程序。 但是,如果代码库是在几年前创建的,并且维护不顺利,升级将变得越来越困难。 页面可以使用两个版本的React,但在React  17之前会出现events问题。


  我们使用React  17解决了很多这样的问题。 这意味着当React  18或将来的版本出现时,有更多的选择。 我们建议您像以前一样一次升级整个应用程序。 但是,您也可以逐步升级应用程序。 例如,可以将大部分应用程序迁移到React  18,但React  17保留了一些延迟加载对话框或子路由。


  但这并不意味着你必须分阶段升级。不。 在大多数应用程序中,一次升级所有内容是最好的解决方案。 加载两个React版本。 即使其中一方按需延迟加载,也不太理想。 但是,对于没有积极维护的大应用程序,可以考虑此方案,React  17可以确保这些应用程序不会过时。


  为了实现增量升级,必须对React事件系统进行一些更改。 这些更改可能会影响代码,这也是React  17成为主要版本的原因。 实际上,10万个以上的组件中受影响的组件不超过20个,因此大部分应用程序希望能够在没有太大影响的情况下升级到React  17。 有问题的话请联系我。


  阶段性升级的示例。


  如果需要,我们提供了一个示例仓库,显示如何延迟加载早期版本的React。 这个例子是使用Create  React  App构建的,但同样的方法应该适用于其他工具。 欢迎其他工具的开发者制作demo并提交pr。


  :其他更新推迟到React  17之后。 这个版本的目标是实现逐步升级。 如果升级React  17太难,我们的目标就无法实现。


  更改事件委托


  从技术上讲,总是可以将不同版本的React嵌套在应用程序中。 但是,根据React事件系统的工作原理难以实现。


  React组件通常内嵌描述事件处理。


  与此代码等效的DOM操作包括:my  button.addevent  listener  (' click  ',handleClick  );


  但是,在大多数事件中,React不会将它们附加到DOM节点。 相反,React会为每个事件类型直接将处理器添加到document节点。 这被称为事件委托。 除了大型应用程序的性能优势外,还可以轻松地添加新功能,如replaying  events。


  自那个发行以来,React自动进行了活动委托。 在document中触发DOM事件时,React搜索调用的组件,React事件在组件中向上“冒泡”。 但是,实际上,本地事件已经冒泡了“document”级别,React是安装在document上的事件处理器。


  但这是逐步升级的困难。


  如果页面有多个React版本,则将事件处理器注册到顶层。 这将破坏e.stopPropagation  ()。 即使嵌套树结构阻止了事件的冒泡,外部树也可以接收它。 这使得嵌套不同版本的React非常困难。 这种担心不是毫无根据的——。 例如,四年前Atom编辑器遇到了同样的问题。


  这就是为什么要更改React的基本附加事件方式。


  在React  17中,React不再向document添加事件处理器。 事件处理器将添加到渲染React树的根DOM节点中。


  const  root  node=document.getelementbyid  (' root  ' );


  ReactDOM.render  (,rootNode  );


  在React  16之前的版本中,React对大多数事件运行document.addEventListener  ()。 React  17在最低级别调用rootNode.addEventListener  ()。


  image


  由于这一更改,可以更安全地嵌套新旧版本的React树。 请注意强烈建议升级到React  17的根本原因,因为两个版本都必须是17或更高版本才能正常工作。 从某种意义上说,React  17是迁移版本,允许逐步升级。


  这种更改使React可以方便地嵌入使用其他技术构建的应用程序。 例如,如果应用程序的“shell”是用jQuery编写的,但新代码是用React编写的,则React代码的e.stopPropagation  ()不会影响jQuery代码——。 也就是说,如果您不再喜欢React,而想重写jQuery等应用程序,则可以从外部将jQuery转换为JQUCT,而不会破坏事件的冒泡。多年来,issue  tracker报告的许多问题都被与React和非React代码集成相关的新特性解决了。


  你可能想知道是否要破坏:根容器以外的Portals。 这不是问题,因为React也会监听端口容器上的事件。


  解决隐藏的危险


  和其他重大更新一样,可能需要调整代码。 Facebook调整了成千上万个模块中约10个模块以支持此更新。


  例如,如果在模块中使用document.addEventListener  (. )手动添加DOM监听,则可以捕获所有React事件。 在React  16之前的版本中,即使在React事件处理器中调用e.stopPropagation  (),也会触发您创建的DOM监听,因为本机事件已经在document级别。 由于使用React  17的冒泡被阻止(如果需要),因此不会触发document级别的事件监听。


  document.addevent  listener  (' click  ',function  () )


  如果React组件调用了e.stopPropagation  ()


  /中,此自定义监听函数不接受click事件


  );


  可以将监听转换为使用事件捕获来修复这样的代码。 为此,可以将{ capture: true  }作为document.addEventListener的第三个参数传递。


  document.addevent  listener  (' click  ',function  () )


  示例:当前此事件处理程序使用事件捕获。


  /所以,你可以收到所有的点击事件!


  }、{ capture: true  } );


  请注意,这项政策适用于全球。 例如,可以在React事件处理器外部调用e.stopPropagation  ()来修复代码中的现有错误。 换句话说,React  17的事件鼓泡接近通常的DOM。


  其他重大变更


  最大限度地减少React  17中的重大更改。 例如,不会删除在早期版本中放弃的任务方法。 但这包括其他重大变更,经验上比较安全。 通常,由于这些因素的存在,10万个以上的组件中受影响的组件在20个以下。目标浏览器。


  活动系统更新了一点:


  onScroll事件为了防止混乱不再冒泡。


  React的onFocus和onBlur事件在基础上切换为本机focusin和focusout事件。 这些更接近React的现有操作,有时还提供附加信息。


  捕获事件(例如onClickCapture  )现在在实际浏览器中使用捕获侦听器。


  这些更改将使React和浏览器更接近,从而提高互操作性。


  :从React  17将focus事件切换到了focusin,但onFocus没有影响冒泡行为。 在React中,onFocus事件总是冒泡,通常是更有用的默认值,因此在React  17中继续冒泡。 查看此sandbox,了解可以添加到不同的特定用例中的不同检查。


  删除事件集区


  在React  17中删除了“事件池”。 并不是提高现代浏览器的性能,有时也会扰乱经验丰富的开发者。


  功能处理变更(e  ) )


  setData(data=)


  ()


  . data,


  /thiscrashesinreact  16 and  earlier  :


  text: e.target.value


  );


  }


  这是因为React在旧浏览器中重用不同事件的事件对象以提高性能,并将所有事件字段以前设置为空。 在React  16之前的版本中,用户必须调用e.persist  ()才能正确使用事件或正确读取所需的属性。


  在React  17中,该代码可以按预期执行。 旧的事件池优化操作已被删除,用户可以根据需要读取事件字段。


  这是由于更改了行为,标记为重大更新,但实际上不会影响Facebook  (错误也修复了)。 “是的”。 e.persist  ()仍可用于React事件对象,但没有任何效果。


  副作用的清洗时期


  我们使useEffect和清理函数的定时一致。


  useEffect  ()=


  {


  //This  is  the  effect  itself。return  ()=


  {


  //This  is  its  cleanup。


  };


  );


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hjkiklokl/article/details/112761031

随机推荐

【已解决】video标签不会自动播放问题

今天在写一个视频组件的时候,写了autopaly但还是不会自动播放,于是我就去MDN上搜了一下,果真是找到了答案,MDN给出的解释如下图所示&#...

『业精于勤』 阅读(643)

一文掌握全部mysql面试题

一文掌握全部mysql面试题

1.mysql慢查询相关命令查看是否开启:showvariableslike'%slow_query%';查看慢查询判定时长:showvariablesli...

xiaohei_xiaobai 阅读(359)

iOS 多线程 NSOperation

 iOS开发当中,并发处理可能大家已经用惯了GCD的方式,今天我想聊一下NSOperation,因为相对来说,对于队列的操作相对灵活一些...

old__donkey 阅读(327)

LinkedHashSet

概述:​他是Set集合典型实现类HashSet的子类,继承了set集合的所有功能和特点,同时把其中的重要特点给修改,把无序变为有序。特点...

A丶Zeng 阅读(692)

【bug说】聊聊长沙的茶颜悦色跑去了武汉

最近长沙的茶颜悦色开到了武汉并且上了热搜,bug菌作为一个长沙人还是想在这里扯几句。话题描述#武汉茶颜悦色门外排起长队#,是这么回事,12月1日,...

最后一个bug 阅读(155)