这个问题再hooks刚出现时就有了，最近翻阅官方文档时，发现新版的React官方文档给出了详细的答案，并给出了伪代码实现，这里也做一个复习总结。

将React项目CRA从3.x升级到5.0

前置知识cra各版本日志：https://github.com/facebook/create-react-app/releases

webpack5升级注意事项： https://webpack.docschina.org/migrate/5/#preparations

文章为去年所写，最近翻到笔记，为了熟悉一下，也为了方便看，将其放在博客中

Context

什么是Context

想象一下，我们有一个 React 应用，其中包含一个父组件，其中包含许多级别的子组件，以及子组件的子组件。 现在，我们要将数据从最上面的组件一直传递到最后一个子组件。在 React 中，数据通常通过props从一个组件自上而下传递到另一个组件。此时我们通过每个组件，通过它们的 props 传递该数据，直到到达最后一个子组件。如果这样的嵌套树形结构有5层或10层，那么将是灾难式的开发维护体验，并且容易出错。如果能不经过中间的节点直接到达需要的地方就可以避免这种问题，这时 Context api 就是来解决这个问题的。 Context API 允许我们轻松访问组件树中不同层级的数据，而不必通过 props 向下传递数据。

前言

在前端中处理文件时会经常遇到File、Blob、ArrayBuffer以及相关的处理方法或方式如FileReader、FormData等等这些名词，对于这些常见而又不常见的名词，我相信大多数人对它们都有一种熟悉的陌生人的感觉。究其原因，相关的东西接触的不够多，且每次都网上随手拈来，不求甚解。今天，我们就稍微仔细一点，去做一个探究，弄清他们是谁，能做什么，又有什么区别，

使用 Import 动态导入

我们在使用 import 导入时，绝大部分都是使用的静态的 import 语句，静态的 import 导入会使所有被导入的模块，在加载时就被编译。但是，在有些使用场景中，我们可能希望根据某个条件来进行动态的导入模块。此时就可以使用 import 动态导入代替静态导入。

vue3相对于vue2是一个较大版本的升级，不仅从API上有较大变化，从底层设计上也有很多变化，这里仅对比其API方面的变化，底层原理的改变，暂不比较。

基础API用法改变

背景

最近在做前端监控项目时，遇到了关于前端数据上报方式的相关问题。故在此做一个分析和探讨，来比较和分析一下哪种上报方式时最优的，或者说，哪一种上报方式更适合自身，适合当前的业务。我认为，抛开实际使用场景谈孰优孰劣就是耍流氓。凡是都要实事求是，一切从实际出发，才能找出最优解。

背景

通常在进行客户端数据分析和诊断时，我们需要将用户在客户端的浏览等记录，在一个合适的时机发送到服务端进行分析。这个时机显然是非常重要的，如果过早发送数据，那必然会导致某些数据无法收集到，比如用户的停留时长、页面关闭时间等等。所以，在当前页面卸载unload之前，将收集到的数据发送出去，就显得很必要了。

前言

最新项目需要用到MongoDB作为数据库进行开发，再次重新学习总结下MongoDB安装、配置以及服务启动状态监控相关得操作，做一个记录和分享。

MongoDB 是一个基于分布式文件存储的数据库，是一个开源的文档数据库，它基于 C++ 语言编写，性能高，可用性强，能够自动扩展。 MongoDB 是最流行的 NoSQL 数据库之一。

前言

自动化是devOps中重要的一个环节，借助于自动化构建、测试和发布等一些列动作，可以解放开发人员的双手，提高工作效率。这也是我们常说的持续集成（CI)，持续部署(CD)中比较重要的部分。自动化可以帮助我们减少人为的错误，而自动化一旦正确配置，就能永远正确的执行下去。自动化减少我们重复性的劳动从而使开发人员的双手解放出来，去做更多有意义的事情，提高人员能效。开发中自动生成一些代码？自动去区分环境启动？自动打包？自动部署？自动发布？自动报警... 等等，以上这些都可以归到自动化的范畴。