dongyc1013

dongyc1013

Member Since 2 years ago

Experience Points
0
follower
Lessons Completed
1
follow
Lessons Completed
13
stars
Best Reply Awards
2
repos

2 contributions in the last year

Pinned
⚡ React Hooks — 👍
⚡ 中文文档@react-use
Activity
Nov
25
3 days ago
started
started time in 2 days ago
started
started time in 2 days ago
Oct
26
1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
started
started time in 1 month ago
Activity icon
issue

dongyc1013 issue comment lasoplanet/technical-seminar

dongyc1013
dongyc1013

Vitejs 下一代前端工具

  1. 为什么选 Vite?
  2. Vite 使用示例?
  3. Webpack vs Vite?
  4. 迁移 1 个现有项目至 Vite?
dongyc1013
dongyc1013

vite的初衷是解决启动devServer缓慢、热更新效率低下的问题:

使用vite在network中,可以看到dev环境下浏览器运行的是一些独立的模块,而webpack运行的是chunk。 原因是webpack、rollup等传统打包工具都是将整个依赖图中所有模块都合并为一个或多个chunk才开始在浏览器中运行,而vite利用了浏览器的ESM规范,省去了打包步骤,如果是jsx等无法运行在浏览器中的模块会先使用esbuild对这个模块单独编译,由于esbuild基于go实现,所以编译速度更快。

webpack or vite webpack生态丰富、长久以来在production环境表现稳定,用起来比较放心,但插件机制相比rollup、vite更复杂,开发插件比较麻烦。 vite在dev环境构建速度非常快。production环境下由于内部使用rollup进行打包所以bundle的体积会比webpack小一些。插件机制使用和rollup规则,比较简洁,在production环境下二者的差距其实就是rollup和webpack的差距。

started
started time in 1 month ago
started
started time in 1 month ago
Oct
16
1 month ago
Activity icon
issue

dongyc1013 issue comment lasoplanet/technical-seminar

dongyc1013
dongyc1013

Taro 插件功能

Taro 引入了插件化机制,目的是为了让开发者能够通过编写插件的方式来为 Taro 拓展更多功能或为自身业务定制个性化功能。

  • 插件的使用方法;
  • 如何编写一个插件;
  • 分析现有插件的实现;
  • 现有业务有哪些可以通过插件提升效率。
dongyc1013
dongyc1013

使用插件式架构的主要优势有:

  • 插件与核心代码相互独立,无需修改核心代码就可以扩展功能、改写现有功能、移除功能
  • 插件遵循单一职责原则
  • 易于定制化与社区贡献 在taro、webpack、rollup等编译工具中,插件的行为都差不多:
  • 遵循官方统一规范
  • 可在各阶段事件比如buildStart、emitAssets等挂载hooks,各阶段的hooks接收参数不同,可以通过改写参数,改写返回值等定制原有行为。

比如@tarojs/plugin-mini-ci就是在plugin中写入一些配置,监听build结束将配置传给miniprogram-ci来实现自动上传小程序。

Sep
30
1 month ago
Activity icon
issue

dongyc1013 issue comment lasoplanet/technical-seminar

dongyc1013
dongyc1013

React Hooks

  1. React 推出 hooks 的动机?
  2. useState,useCallback,useEffect,useRef 原理解析?
  3. 如何自定义 hooks ?
  4. 优秀好用 hooks 推荐?
dongyc1013
dongyc1013
  1. 想让函数式组件想得到记忆功能,每次调用都可以获取到上次作用域的变量。由于函数式组件没有实例,想实现这个功能需要修改函数上的属性,但是这样组件一旦被一处以上使用就会导致混乱。所以需要在fiber(代表视图上的一个ReactElement)做记录,hook就是一些闭包函数,可以在函数组件重新渲染时获取到上次渲染作用域的变量,实现记忆功能。
  2. 接上条,所有hooks都是闭包函数,从useCallback函数体内可以获取到上次渲染的值就可以验证这一点。以useCallback举例:每次函数渲染顺便执行hooks,遍历依赖列表做对比,如果不一致就会重新将hook对象的state属性赋值为hook函数的参数,否则使用利用闭包特性缓存的值。
  3. 灵活利用官方提供的基础hooks。
  4. react-query、recoil、SWR、formik。
Sep
3
2 months ago
Activity icon
fork

dongyc1013 forked zenghongtu/react-use-chinese

⚡ 中文文档@react-use
dongyc1013 Updated
fork time in 2 months ago
Activity icon
fork

dongyc1013 forked streamich/react-use

⚡ React Hooks — 👍
dongyc1013 Updated
fork time in 2 months ago