发表于 | 分类于
本文字数： 8.4k | 阅读时长 ≈ 8 分钟

Hooks为什么会出现

跨组件复用stateful logic(包含状态的逻辑)十分困难
在hooks出现之前，我们想要复用包含状态的逻辑，可能会用到render props 或者高阶组件，但是这些模式都要求你重新构造你的组件，这可能会非常麻烦。你可以在React DevTool里看到我们的组件被层层叠叠的providers, consumers, 高阶组件, render props, 和其他抽象层包裹。使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。

处理生命周期函数造成的问题
当我们的组件变得越来越大时，会发现各种逻辑在组件中散落的到处都是，很复杂很乱。每个生命周期钩子中都包含了一堆互不相关的逻辑。比如我们常常在componentDidMount 和 componentDidUpdate 中拉取数据，同时compnentDidMount 方法可能又包含一些不相干的逻辑，比如设置事件监听（之后需要在 componentWillUnmount 中清除）。最终的结果是强相关的代码被分离，反而是不相关的代码被组合在了一起。这显然会导致大量错误。为了解决这个问题，Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。

解决掉class中this难以被理解的问题
class中this的指向通常难以明确，即使是计算机本身。而hooks是基于函数的，连class都不存在，那就更不谈this了。

Hooks是如何解决问题的

阅读全文 »

发表于 | 更新于
本文字数： 1.2k | 阅读时长 ≈ 1 分钟

个人信息

教育经历

  • 本科，南京工程学院，通信工程专业，2015.9~2019.6

工作经历

  • 尚励信息技术有限公司，研发部，Web前端开发工程师(实习），2018.6~2018.9
  1. 根据设计稿实现UI以及页面自适应，UI框架为bootstrap。
  2. 完善页面的交互功能，主要做了搜索，以及搜索结果的假分页。封装了一个动态的条形图，多页面共用。项目前端使用Jquery，服务端为C#。
  3. 根据QA测试结果修改Bug。大致一天四五个bug。
  • 上海萌店信息科技有限公司(微盟)，研发部-业务支持中心，Web前端开发工程师(实习），2018.11~至今
  1. 参与公司OA系统移动端h5页面开发，主要负责人事录用流程的页面。(react+redux)
    • 此模块大约20个页面，采用react框架复用为一个页面，主要处理代码大规模复用的逻辑区分问题以及可维护性问题。后期测试阶段熟练使用抓包工具配合服务端进行bug修改。
  2. 参与公司OKR周报系统的开发，以及1.1版本，2.0版本的迭代
    • (周报1.0技术栈：Dva+Umi+Ant.Design):
      负责前端页面，使用dva进行数据管理，处理Ant.design使用过程中出现的问题，主要在于表单数据校验以及获取方面。
      并且写有一些算法处理时间问题，比如根据年月日获取当季度所有week的信息。
    • (周报1.1技术栈:eggjs+sequelize+mysql+docker):
      从1.1版本开始负责服务端，提供共6个接口。后端框架为eggjs，使用sequelize连接mysql数据库(docker容器)。主要处理了权限控制，事务存取数据，参数检验以及excel表单的导入与导出等问题。
    • (周报2.0技术栈:nestjs+typeorm+graphql):
      2.0版本重构，服务端采用nestjs，用tyoeorm连接数据库，以及使用graphql查询。项目过程中对prisma，apollo均有了解，因数据库迁移问题而未采用。

技能

  1. 掌握Html，Css, Javascript(ES6)。
  2. 熟悉React，Vue等前端框架。
  3. 熟悉Nodejs，了解eggjs，nestjs等基于node的服务端框架。
  4. 熟悉mysql以及类似于sequelize和typeorm的ORM框架。
  5. 熟悉graphql，prisma。
  6. 熟悉docker，熟练使用其构建所需容器。
  7. 熟悉webpack。对前端开发模块化有一定了解。
  8. 了解基本的Linux操作，有建站经验，个人网站地址http://www.wwwien.top。