react，使用hook，导航栏如何自动获取当前定位城市名称？

来源：蜘蛛抓取(WebSpider) 时间：2022-10-08 01:32 标签： reacthooksredux
  • 在React框架下, 如果不做任何优化, 父组件渲染会触发子组件的重新render.
  • 但由于的优化, 触发render不一定触发真实dom的更新.
  • 但如果出现大量子组件重复render, 那么我们依旧可以考虑优化子组件渲染过程, 以获得可观的性能提升.
  • 这是一个由多个小方格组成的棋盘, 点击小方格变为绿色, 再次点击变为灰色.
  • 每次点击, 理论上只有当前点击的小方格需要更新, 但实际上, 其他的小方格也会重新render.
  • 其他小方格重新render的原因是, 我们为了方便状态管理, 进行了状态提升, 将所有小方格的状态提升到了共有的父组件, 导致某些传入小方格的props的引用值发生了改变.
  • 引用发生改变但引用的实际值可能并没有发生改变, 所以我们可以针对这一部分引用进行优化以达到优化组件重复渲染的目的.
  • 但由于内部所依赖的闭包变量state也不再发生更新, 会导致每一次点击都是在初始化的state上进行更改, 所以点击多次后界面只会保留最后点击的绿色方块.
  • 但Block组件内部需要以onClick.current()的形式调用外部传入的函数. 所以这里我们可以实现一个闭包函数以实现Block组件可以以onClick()的方式直接调用传入的函数, 去掉current后缀:
抽离逻辑为新的hooks
  • 最后, 我们可以对之前优化handleBlockClick的逻辑进行抽离, 组装为一个新的hooks, 方便其他传入子组件的function复用:
  • 使用memo使Block组件具备浅比较后优化渲染的特性
  • 使用闭包函数优化useRef产生的current后缀问题
  • 使用useCallback优化闭包函数使其保持不变

该课程详细讲解了使用 TypeScript + React Hooks 开发一个复杂的 DatePicker 组件，共分为 8 个章节。其中，1、2 章节主要讲解课程用到的一些技术和完整的前端项目环境搭建； 3、4 章节介绍 TypeScript 的基础语法并介绍了怎样在 React 中使用 TypeScript。第 5 章节详细介绍 React Hooks 的一些使用和原理。第 6 章节详细讲解一个复杂的日期选择器组件 如何拆分、组合、然后实现。最后两章介绍前端开发往往忽略的一些点，比如通过单元测试保证代码质量。并且介绍了一些常用的模块规范，package.json 的一些细节以及如何发布到 npm 提供给大家使用。

在如今的前端项目中，越来越多技术选型采用了 TypeScript 进行开发。JavaScript 作为一个流行的开发语言虽然被广泛使用，但由于自身的一些设计缺陷和作为弱类型本身过于灵活的问题，导致了在大型前端工程或多人开发的项目中，缺少类型检测，容易失控，而且维护、重构也比较困难。使用 JavaScript 的超集 TypeScript 帮助我们静态类型检查，再配合现代化的编辑器，提高开发体验，减少运行时的错误。更可控，重构也更可行可靠。

React Hook 是今后 React 团队主推的编程方式，组件开发更加函数式，逻辑复用更加的简单。

DatePicker 作为一个前端常用的组件，开发时往往直接采用第三方开源组件库的实现。本课程就使用 TypeScript + React Hooks ，从 0 开始一步一步地开发一个 DatePicker 组件。 通过这个课程，你可以学习到复杂的组件是如何开发的，也可以了解清楚 DatePicker 的实现原理。相信通过这样一个结合学习, 你的前端技术可以得到一个系统提升。

从 0 开始由浅到深，从项目搭建到最终的 DatePicker 开发完成，事无巨细的进行教学。本课不只是教你怎么用, 更要教你为什么要用，用知其然并知其所以然的方式，让你对前端开发有一个系统的学习。

  • 有一定 React 技术栈相关基础，喜欢前端和新技术的用户。

  • 学习周期：课程有效期 2 个月，2 个月后无法进行在线实验，但可查看文档内容。高级会员有效期内可一直学习，到期后课程失效，且无法查看文档。部分云主机实验环境因成本较高，存在开启次数限制。关于课程退款等相关注意事项说明，请阅读 。
  • 版权说明：课程内容为蓝桥云课原创或蓝桥云课在原作者授权下制作。未经书面同意，擅自爬取、转载和再分发课程内容，均将受到严肃追责。
  • 企业团报：企业购买，请点击 。

我要回帖

更多关于 reacthooksredux 的文章

 

随机推荐