React17 系统精讲 结合TS打造旅游电商平台
发布于 1 个月前 作者 tuolajikasiji 585 次浏览 来自 分享

download: React17 系统精讲 结合TS打造旅游电商平台

React—大厂前端必备的技能点。本课程将带你系统学习 React17 的完整技术体系,并结合 TypeScript 开发热门业务应用,实现对于框架的深度掌握,助你提升硬实力,快人一步进大厂。

技术要求 1.熟悉 HTML、JavaScript、CSS 等前端基础 2.了解 Typescript 基础语法 环境参数 Node : v14(向下兼容至v10) React : 17.0.1 Typescript : 4.1.2 Redux : 4.0.5 Antd : 4.9.2

就在今天,React 团队正式发布了 React 17,这次发布带来了哪些内容?

没有新特性 React 17版本不同寻常,因为它没有添加任何面向开发人员的新功能。取而代之的是,该发行版主要致力于简化React本身的升级。

逐步升级 之前 React 15升级到 React 16,你需要将整个应用一次性升级。但无疑如果存在多年前的老代码,升级是个不小的挑战。尽管可以在页面上同时使用两个版本的React,但是直到React 17仍然很脆弱,并导致事件问题。

我们正在解决React 17的许多问题。这意味着当React 18和下一个未来版本问世时,您现在将有更多选择。第一种选择是像以前可能那样一次升级整个应用程序。但是您也可以选择逐个升级您的应用程序。例如,您可能决定将大部分应用程序迁移到React 18,但在React 17上保留一些延迟加载的对话框或子路由。

这并不意味着您必须逐步升级。对于大多数应用程序,一次全部升级仍然是最好的解决方案。加载两个版本的React(即使其中一个是按需延迟加载)仍然不理想。但是,对于没有积极维护的大型应用程序,可以考虑使用此选项,React 17可以使这些应用程序不落伍。

我们将其他更改推迟到React 17之后,就是为了本次发布能渐进升级。如果升级React 17过于困难,这将违背原本意图。 事件代理更改 在React 17中,React将不再在后台的文档级别附加事件处理程序。取而代之的是,它将它们附加到渲染您的React树的根DOM容器:

const rootNode = document.getElementById(‘root’); ReactDOM.render(<App />, rootNode); 在React 16和更早的版本中,React将对大多数事件执行document.addEventListener()。 React 17将在后调用rootNode.addEventListener()。

其它重大变化 在React v17 RC博客中已经描述了其余的重大更改。 官方已经在Facebook产品代码中的100,000多个组建中更改少于20个组件即可完成升级,所以大家在升级的时候应该可以轻松点。

新的JSX转换 React 17支持新的JSX转换。我们还将对它支持到React 16.14.0,React 15.7.0和0.14.10。需要注意的是,这是完全选择启用的,您也不必使用它。之前的JSX转换的方式将继续存在,并且没有计划停止对其支持。

安装 npm install react@17.0.0 react-dom@17.0.0 CDN

<script crossorigin class=“lazy” data-src=“https://unpkg.com/react@17.0.0/umd/react.production.min.js”></script>; <script crossorigin src=“https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js”></script>; Changelog React 为全新的 JSX 转换器添加 react/jsx-runtime 和 react/jsx-dev-runtime。(@lunaruan 提交于 #18299) 根据原生框架构建组件调用栈。(@sebmarkbage 提交于 #18561) 可以在 context 中设置 displayName 以改善调用栈信息。(@eps1lon 提交于 #18224) 防止 ‘use strict’ 从 UMD 的 bundles 中泄露。(@koba04 提交于 #19614) 停止使用 fb.me 进行重定向。(@cylim 提交于 #19598) React DOM 将事件委托从 document 切换为 root。(@trueadm 提交于 #18195 及其他) 在运行下一个副作用前,请清理所有副作用。(@bvaughn 提交于 #17947) 异步运行 useEffect 清理函数。(@bvaughn 提交于 #17925) 使用浏览器的 focusin 和 focusout 替换 onFocus 和 onBlur 的底层实现。(@trueadm 提交于 #19186) 将所有 Capture 事件都使用浏览器的捕获阶段实现。(@trueadm 提交于 #19221) 禁止在 onScroll 事件时冒泡。(@gaearon 提交于 #19464) 如果 forwardRef 或 memo 组件的返回值为 undefined,则抛出异常。(@gaearon 提交于 #19550) 移除事件池。(@trueadm 提交于 #18969) 移除 React Native Web 不需要的内部组件。(@necolas 提交于 #18483) 当挂载 root 时,附加所有已知的事件监听器。(@gaearon 提交于 #19659) 在 Dev 模式下,禁用第二次渲染过程中的 console。(@sebmarkbage 提交于 #18547) 弃用为记录且具有误导性的 ReactTestUtils.SimulateNative API。(@gaearon 提交于 #13407) 重命名内部使用的私有字段(@gaearon 提交于 #18377) 不在开发环境调用 User Timing API。(@gaearon 提交于 #18417) 在严格模式下重复渲染期间禁用 console。(@sebmarkbage 提交于 #18547) 在严格模式下,二次渲染组件也不使用 Hook。(@eps1lon 提交于 #18430) 允许在生命周期函数中调用 ReactDOM.flushSync(但会发出警告)。(@sebmarkbage 提交于 #18759) 将 code 属性添加到键盘事件对象中。(@bl00mber 提交于 #18287) 为 video 元素添加 disableRemotePlayback 属性。(@tombrowndev 提交于 #18619) 为 input 元素添加 enterKeyHint 属性。(@eps1lon 提交于 #18634) 当没有给 <Context.Provider> 提供任何值时,会发出警告。(@charlie1404 提交于 #19054) 如果 forwardRef 或 memo 组件的返回值为 undefined,则抛出警告。(@bvaughn 提交于 #19550) 为无效更新改进错误信息。(@JoviDeCroock 提交于 #18316) 从调用栈信息中忽略 forwardRef 和 memo。(@sebmarkbage 提交于 #18559) 在受控输入与非受控输入间切换时,改善错误消息。(@vcarl 提交于 #17070) 保持 onTouchStart、onTouchMove 和 onWheel 默认为 passive。(@gaearon 提交于 #19654) 修复在 development 模式下 iframe 关闭时,setState 挂起的问题。(@gaearon 提交于 #19220) 使用 defaultProps 修复拉架子组件在渲染时的问题。(@jddxf 提交于 #18539) 修复当 dangerouslySetInnerHTML 为 undefined 时,误报警告的问题。(@eps1lon 提交于 #18676) 使用费标准的 require 实现来修复 Test Utils。(@just-boris 提交于 #18632) 修复 onBeforeInput 报告错误的 event.type。(@eps1lon 提交于 #19561) 修复 Firefox 中 event.relatedTarget 输出为 undefined 的问题。(@claytercek 提交于 #19607) 修复 IE11 中 “unspecified error” 的问题。(@hemakshis 提交于 #19664) 修复 shadow root 中的渲染问题。(@Jack-Works 提交于 #15894) 使用事件捕获修复 movementX/Y polyfill 的问题。(@gaearon 提交于 #19672) 使用委托处理 onSubmit 和 onReset 事件。(@gaearon 提交于 #19333) 提高内存使用率。(@trueadm 提交于 #18970) React DOM Server 使用服务端渲染的 useCallback 与 useMemo 一致。(@alexmckenley提交于 #18783) 修复函数组件抛出异常时状态泄露的问题。(@pmaccart 提交于 #19212) React Test Renderer 改善 findByType 错误信息。(@henryqdineen 提交于 #17439) Concurrent Mode (实验阶段) 改进启发式更新算法。(@acdlite 提交于 #18796) 在实现性 API 前添加 unstable_ 前缀。 (@acdlite 提交于 #18825) 移除 unstable_discreteUpdates 和 unstable_flushDiscreteUpdates。(@trueadm 提交于 #18825) 移除了 timeoutMs 参数。(@acdlite 提交于 #19703) 禁用 <div hidden /> 预渲染,以支持未来的 API。(@acdlite 提交于 #18917) 为 Suspense 添加了 unstable_expectedLoadTime,用于 CPU-bound 树。(@acdlite 提交于 #19936) 添加了一个实现性的 unstable_useOpaqueIdentifier Hook。(@lunaruan 提交于 #17322) 添加了一个实验性的 unstable_startTransition API. (@rickhanlonii 提交于 #19696) 在测试渲染器中使用 act 后,不在刷新 Suspense 的 fallback。(@acdlite 提交于 #18596) 将全局渲染的 timeout 用于 CPU Suspense。(@sebmarkbage 提交于 #19643) 挂载前,清除现有根目录的内容。(@bvaughn 提交于 #18730) 修复带有错误边界的 bug。(@acdlite 提交于 #18265) 修复了导致挂起树更新丢失的 bug。(@acdlite 提交于 #18384 以及 #18457) 修复导致渲染阶段更新丢失的 bug。(@acdlite 提交于 #18537) 修复 SuspenseList 的 bug。(@sebmarkbage 提交于 #18412) 修复导致 Suspense fallback 过早显示的 bug。(@acdlite 提交于 #18411) 修复 SuspenseList 中使用 class 组件异常的 bug。(@sebmarkbage 提交于 #18448) 修复输入内容可能被更新被丢弃的 bug。(@jddxf 提交于 #18515 以及 @acdlite 提交于 #18535) 修复暂挂 Suspense fallback 后卡住的错误。(@acdlite 提交于 #18663) 如果 hydrate 中,不要切断 SuspenseList 的尾部。(@sebmarkbage 提交于 #18854) 修复 useMutableSource 中的 bug,此 bug 可能在 getSnapshot 更改时出现。(@bvaughn 提交于 #18297) 修复 useMutableSource 令人恶心的 bug。(@bvaughn 提交于 #18912) 如果外部渲染且提交之前调用 setState,会发出警告。(@sebmarkbage 提交于 #18838)

回到顶部