获得徽章 12
- #青训营笔记创作活动#
2023/02/03 Day21
学习内容：React Hooks 最佳实践
在 React 16.8 以前，像状态和生命周期函数这样的 React 特性只适用于类组件，函数组件由于无法访问状态和生命周期函数，只能用来作为 UI 组件。React Hooks 的出现使函数组件能够以新的方式编写、重用和共享 React 代码。
1.使用 ESLint 的 React Hooks 插件
2. 以正确的顺序创建函数组件
3.掌握useEffect中的异步用法
4.尽量避免使用 useLayoutEffect
5.使用 useContext 避免 prop-drilling
6.善用 useMemo / useCallback
7.善用惰性初始化函数提升性能
8.善用自定义 Hooks 捆绑封装逻辑与相关 state
9.对自定义 Hooks 增加单元测试
10.使用 Redux Hooks 替代 connect展开评论1 - #青训营笔记创作活动#
2023/02/01 Day19
学习内容：WebRTC 技术
WebRTC 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建Peer-to-Peer的数据分享和电话会议成为可能。
WebRTC 的应用场景：直播、游戏、视频会议/在线教育、屏幕共享/远程控制 等等展开11 - #青训营笔记创作活动#
2023/01/31 Day18
学习内容：20个常用的 Git 指令用法
Git 分为 4 个工作区：
1.工作区：指在本地仓库中的全部代码区域；
2.暂存区：指在本地仓库中通过 git add 后的代码区域；
3.本地仓库：指在本地仓库中的 git commit 后的代码区域；
4.远程仓库：远程仓库指的托管代码的服务器。
常用指令：
·git clone 用于将存储库克隆到本地。
·git init 用于在目录中创建新的 Git 仓库。
·git remote 用于管理跟踪远程仓库。
·git checkout 用于切换分支。
·git branch 用于查看、创建、删除分支。
·git tag 用于创建、删除、查看标签。
·git add 用于将本地文件添加到暂存区。
·git commit 用于将暂存区内容添加到本地仓库中。
·git push 用于将本地分支推送到远程仓库。
·git pull 用于从远程仓库拉取代码并合并到本地当前分支。
·git fetch 命令用于从远程获取代码库。
·git cherry-pick 用于获取指定的 commit，可以将分支 a 上的 commit 1，复制到分支 b上。
·git merge 用于分支合并，将其他分支的内容合并到当前分支中。
·git rebase 用于分支变基。
·git rebase -i 交互模式：
·git reset 用于回退版本，可以指定退回某一次提交的版本。
·git revert 用于回滚提交，可以回滚某一次提交记录。
·git stash 用于暂存文件。
·git reflog 记录了所有的 commit 操作记录，便于错误操作后找回。
·git rm 用于从 git 仓库删除指定文件或目录。
·git log 用于查看 git commit 记录。展开评论1 - #青训营笔记创作活动#
2023/01/29 Day16
学习内容：探索前端工程化、从零到一打造一个前端组件库！
前端工程化就是通过各种工具和技术，提升前端开发效率的过程。我们通过这句话可以更好理解，突出了两点
前端工程化的内容：各种工具和技术
前端工程化的作用：通过使用工具，提升开发效率
如何系统化学习前端工程化?
想要系统化的学习前端工程化并非易事，很多错学在初入前端不久的时间中会因为某个技术栈日常使用频率较高就错误的认为，这一个技术栈就是工程化，会觉得webpack就是工程化，会觉得我会封装组件就是工程化，但是前端可不仅仅只是会封装个组建就算是工程化了。
1.首先，目前公司主流都是基于前后端分离而进行开发业务，那么你得非常清楚，什么当前任务属于前端还是属于后端，完好的任务分工可以让你在接入前端工程化的时候更加得心应手，这就是解决很多前端问题的基础，而不是在分不清任务的前提下对着某一个自己不擅长的领域死磕，这样的意义是不大且浪费时间的。
2.其次我们需要对项目的全链路方方面面的了解加实践，好记性不如烂笔头，在程序员的世界同样如此，多练习实践便是最快进步的道路。
总之，通过对一个组件库的开发来全面认识熟悉前端工程化的配置，系统的理解工程化中各个工具所起到的作用，并且将其最终可以应用到团队当中去，真正的实现工程化的价值，帮助团队提效，实现作为前端工程师的价值。展开评论1 - #青训营笔记创作活动#
2023/01/30 Day17
学习内容：纯 JS 实现语雀的划词高亮功能
主要思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
实现细节:
1. 让 canvas 与文本容器元素重叠
2. 获取划词区域文本节点的位置信息
3. 获取头尾中间的文本节点
4. 处理跨行文本节点的位置信息
5. 划词信息持久化与返显展开评论1 - #青训营笔记创作活动#
2023/01/28 Day15
学习内容：规范你的Typescript注释，一步一步教你生成API文档
规范的TS注释不仅能说明代码意图、直接生成API文档，还能为IDE工具提供更智能的提示.
1.JSDoc：JSDoc是Javascript注释规范标准，Typescript出现之后，虽然JSDoc也一直在兼容TS，但无奈这2种语言一种是弱类型，一种是强类型，注释对它们的意义大相径庭，所以JSDoc并不适合TS使用。
2.TSDoc
于是Typescript东家就联合了一些社区组织，推出了TS注释规范标准：TSDoc。
·TSDoc解析器：TSDoc只是一个格式标准，东家另外提供了一个开源的TS代码注释解析器：@microsoft/tsdoc
·API信息提取器：api-extractor
·文档生成器：api-documenter
·站点生成器：
Vuepress：v2.vuepress.vuejs.org/zh/
Hexo：hexo.io/zh-cn/
Hugo：gohugo.io/
·检查注释规范：eslint-plugin-tsdoc
·TypeDoc：
集成了API信息提取、文档生成、站点生成。TypeDoc也是TSDoc标准的参与者，TypeDoc可以完全兼容TSDoc标准，但比TSDoc更宽松，这意味着TypeDoc可以使用更多非标准的标签。展开评论1
![[害羞]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_7.eca1535.png)