冴羽的JavaScript博客-CSDN博客

原创 React 之 Context 的变迁与背后实现

为了管理我们的 theme ，我们建立了一个依赖注入系统（DI），并通过 Context 向下传递 store，需要用到 store 数据的组件进行订阅，传入一个 forceUpdate 函数，当 store 进行发布的时候，依赖 theme 的各个组件执行 forceUpdate，由此实现了在 Context 不更新的情况下实现了各个依赖组件的更新。你会发现，如同之前的文章中涉及的源码一样，React 的 createContext 就只是返回了一个数据对象，但没有关系，以后的文章中会慢慢解析实现过程。

2022-12-12 20:53:26 348 1

原创 React 之 Refs 的使用和 forwardRef 的源码解读

React 提供了 Refs，帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。React 提供了三种使用 Ref 的方式：2. 回调 Refs3. createRef这是最被推荐使用的方式。Refs 除了用于获取具体的 DOM 节点外，也可以获取 Class 组件的实例，当获取到实例后，可以调用其中的方法，从而强制执行，比如动画之类的效果。我们举一个获取组件实例的例子：在这个例子中，我们通过获取到 Input 组件的实例，并调用了实例的 handleFocus

2022-12-05 11:51:00 449

原创 React 之元素与组件的区别

有的时候我们需要给组件传入一个自定义内容。举个例子，我们实现了一个 Modal 组件，有确定按钮，有取消按钮，但 Modal 展示的内容为了更加灵活，我们提供了一个 props 属性，用户可以自定义一个组件传入其中，用户提供什么，Modal 就展示什么，Modal 相当于一个容器，那么，我们该怎么实现这个功能呢？

2022-12-02 12:38:18 505

原创 React 之 createElement 源码解读

也就是说，当只有一个子元素时，children 是一个对象（React 元素），当有多个子元素时，children 是一个包含对象（React 元素）的数组。React 系列的预热系列，带大家从源码的角度深入理解 React 的各个 API 和执行过程，全目录不知道多少篇，预计写个 50 篇吧，欢迎关注。就是指向处于构建过程中的组件的 owner，具体作用在以后的文章中还有介绍，现在可以简单的理解为，它就是用于记录临时变量。的第一个参数是元素类型，第二个参数是元素属性，第三个参数是子元素。

2022-12-01 12:47:51 405

原创聊聊 npm 的语义化版本（Semver）

现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？如果一个版本号为 X.Y.Z，什么时候是 X 应该加 1，什么时候 Y 应该加 1 ，什么时候 Z 应该加 1，加 1 遵循十进制吗？比如 1.0.9 的下一个版本应该是 1.1.0 吗？我们经常看到一些项目的版本还带着后缀，比如 React 的、 Vue 的，这些又是什么意思呢？这些后缀是固定字段还是可以自定义的呢？...

2022-08-18 20:14:26 580

原创 VuePress 博客搭建系列 33 篇正式完结

前言VuePress 博客搭建系列是我写的第 6 个系列文章，前 5 个系列分别是 JavaScript 深入系列，JavaScript 专题系列、underscore 系列、ES6 系列、TypeScript 系列。VuePress 博客搭建系列共计 33 篇，讲解使用 VuePress 搭建博客，进行各种优化，为博客增添各种功能，并部署到 GitHub、Gitee、个人服务器平台的全过程。这个系列从 2021年12月13日开始发布第一篇，到 2022 年 3 月 10 日发布最后一篇，感谢各位朋友

2022-03-29 18:35:50 2054

原创搭建 VuePress 站点必做的 10 个优化

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。在搭建这样一个博客后，其实还有很多的优化工作需要做，本篇我们来盘点一下那些完成基础搭建后必做的 10 个优化。1. 开启 HTTPS开启 HTTPS 有很多好处，比如可以实现数据加密传输等，SEO 也会更容易收录：Google 会优先选择 HTTPS 网页（而非等效的 HTTP 网页）作为规范网页开启 HTTPS，我们

2022-03-23 11:21:22 1756

原创 VuePress 博客之 SEO 优化（六）站长工具

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇接着讲讲 SEO 优化会用到的站长平台和工具等。1. 百度统计地址：https://tongji.baidu.com/web/welcome/login网站流量分析工具，能够告诉用户访客是如何找到并浏览用户的网站，在网站上做了些什么2. 百度搜索资源平台地址：https://ziyuan.baidu.com/s

2022-03-22 16:15:21 645

原创 VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲 SEO 中的 JSON-LD。JSON-LD如果我们打开掘金任意一篇文章，比如这篇《VuePress 博客优化之增加 Vssue 评论功能》，查看 DOM 元素，我们可以在 head 中找到这样一段 script 标签：在思否等其他平台也是可以看到的：那这个 type 为 application/ld+json

2022-03-21 16:34:49 1054

原创 VuePress 博客之 SEO 优化（四） Open Graph protocol

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲 SEO 优化中的 Open Graph protocol。meta 标签如果我们打开思否任意一篇文章，比如这篇《VuePress 博客优化之增加 Vssue 评论功能》，查看 DOM 元素，我们可以在 head 中找到这样一段 meta 标签：我们可以发现 name 都是以 og: 开头，这是什么意思呢，又是什么

2022-03-19 18:44:05 608

原创 VuePress 博客之 SEO 优化（三）标题、链接优化

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲 SEO 中的一些细节优化。1. 设置全局的 title、description、keywords// config.jsmodule.exports = { title: "title", description: 'description', head: [ ['meta'

2022-03-18 12:02:21 1486

原创 VuePress 博客之 SEO 优化（二）重定向

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲 SEO 与重定向。问题最一开始我使用 GitHub Pages 服务建立了站点，地址是：https://mqyqingfeng.github.io/learn-typescript，考虑到 GitHub 在国内访问速度的问题，我又在 Gitee 上同步了一份，地址是：http://mqyqingfeng.gitee

2022-03-17 11:59:12 1653

原创 VuePress 博客之 SEO 优化（一） sitemap 与搜索引擎收录

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲如何进行 SEO 优化。1. 生成 sitemap借助 vuepress-plugin-sitemap 生成站点地图：1.1 安装yarn add vuepress-plugin-sitemap -D1.2 修改 config.js// .vuepress/config.jsmodule.exports =

2022-03-11 16:18:27 1643

原创 VuePress 博客优化之增加 Vssue 评论功能

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲如何使用 Vssue 快速的实现评论功能。主题内置因为我用的是 vuepress-theme-reco 主题，主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，可以根据自己的喜好选择 Valine 或者 Vssue。本篇讲讲使用 Vssue 实现评论功能的全过程。Vs

2022-03-10 18:46:30 756

原创 VuePress 博客优化之增加 Valine 评论功能

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇讲讲如何使用 Valine 快速的实现评论功能。主题内置因为我用的是 vuepress-theme-reco 主题，主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，可以根据自己的喜好选择 Valine 或者 Vssue。本篇讲讲使用 Valine 实现评论功能的全过程。V

2022-03-09 18:46:33 770 1

原创 VuePress 博客优化之开启 Algolia 全文搜索

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。由于 VuePress 的内置搜索只会为页面的标题、h2 、 h3 以及 tags 构建搜索索引。如果你需要全文搜索，可则以使用 Algolia 搜索，本篇讲讲如何申请以及配置 Algolia 搜索。AlgoliaAlgolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地

2022-03-08 20:54:33 1671 2

原创 2022 年了，还不了解 PWA ？教你 VuePress 博客如何快速兼容 PWA

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。本篇我们讲讲如何兼容 PWA。PWAPWA，英文全称：Progressive Web Apps，中文翻译：渐进式 Web 应用。引用 MDN 的介绍：PWA 指的是使用指定技术和标准模式来开发的 Web 应用，这同时赋予它们 Web 应用和原生应用的特性。例如一方面，Web 应用更加易于发现：相比于安装应用，访问一个

2022-03-07 20:15:35 412

原创前端，校招，面淘宝，指南

前言写给即将参加以及未来参加校招的同学们。校招介绍校招，全称校园招聘，指企业招聘那些即将毕业的学生。每年一般有春招、秋招两次，春招的时间大概在 3 - 5 月，秋招的时间大概在 7 - 12 月。不过像淘宝，招聘的时间跨度往往并没有那么长，从往年的经验来看，淘宝的春招大概在 3 - 4 月，秋招大概在 7 - 9 月。这主要是因为淘宝是有相对严格的 HC (Head Count 招聘名额)限制，招满即止，所以投递简历还是要趁早，等后期 HC 即满，无论是简历评估、还是 offer 发放，要求都

2021-02-22 11:21:24 838

weixin_55475226的博客