文章同步在公众号：萌萌哒草头将军，欢迎关注！

相信很多开发者在开发中经常遇到的一个报错：

Uncaught TypeError: Cannot read properties of undefined

文章同步更新在公众号：萌萌哒草头将军，欢迎关注

好久不见，该系列已经更新了三篇了，上文介绍了 React 是如何通过 Lane 模型判断更新任务的优先级的，视野聚焦于 Lane 模型的原理，今天我们详细看看 Lane 模型工作前发生了啥。

💡 相关阅读

• 🎉 干货满满，React 设计原理(一)：藏在源码里的紧箍咒 🎉
• 🎉 干货满满，React 设计原理(二)：藏在源码里的两个圈 🎉
• 🎉 干货满满，React 设计原理(三)：藏在源码里的排位赛，Lane 模型 🎉

文章同步在公众号：萌萌哒草头将军，欢迎关注！

需求背景

前几天我们的客户对我们组的客户经理提了个需求，每次上线前端页面需要在HTML里给定版本信息，因为我们客户单位会定期爬取版本信息进行汇总展示在大屏。

版本信息要求如下：

• 上线日期
• 上线内容描述
• 对应git提交ID
• 对应项目的版本号

调研

我立马想到使用插件，前几天我已经将项目脚手架换成vite了，我找了一圈，发现了几个相似的需求，不过都是直接生成 meta 标签，跟我的需求不符

文章同步在公众号：萌萌哒草头将军，欢迎关注

插件已经开源了，可以看文章末尾

console狂魔能有多狂

事情是这样的，前段时间我加入了公司某个小项目组

入组第一天，我要来了项目权限，下载完代码和依赖

然后npm start，打开浏览器控制台，

我尼玛，一个登陆页面就这么多log？

此刻我怀着忐忑的心情打开了自己的即将负责的模块入口页面：

这让我怎么调试啊？

文章同步在公众号：萌萌哒草头将军，欢迎关注

今天继续上次的内容，使用hook封装几种的异步请求函数场景。

🚀 立即请求函数

我们期望的场景是，

• 初始化一个请求函数，然后根据初始参数，立即发送请求
• 返回请求结果，并且返回请求回调函数，方便我们根据新的参数再次调用
• 要求返回值包含加载中状态，错误信息以及正常的数据类型。

theme: channing-cyan
highlight: atom-one-dark

文章同步在公众号：萌萌哒草头将军，欢迎关注。

今天分享几个上千⭐的库，助你玩转React学习和开发。

🚀 React学习库

💎 reactjs-interview-questions

git地址：https://github.com/sudheerj/reactjs-interview-questions

文章首发公众号：萌萌哒草头将军，欢迎关注

🚀 关键接口介绍

最近想体验下自定义指令功能，看了看文档和 vue2 差异不大，语法如下：

const myDirective = {
// 在绑定元素的 attribute 前 
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) 
{ // 下面会介绍各个参数的细节 }, 
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {} }

文章同步在公众号：萌萌哒草头将军，欢迎关注

js中媒体查询的主要方法是使用window对象下的matchMedia对象，查询语句和CSS媒体查询一样。

封装媒体查询

首先我们先看监听系统主题色的例子

• 首先创建媒体查询对象
• 根据查询结果设置对应的值
• 然后建立监听事件，并且在退出时取消监听

export const useTheme = () => {

  // 首先创建媒体查询对象
  const themeMedia = matchMedia("(prefers-color-scheme: light)")
  // 根据查询结果设置对应的值
  const theme = ref(themeMedia.matches ? 'light' : 'dark')

  const onChange = (e: MediaQueryListEvent) => theme.value = e.matches ? 'light' : 'dark'
  
  watchEffect((onCleanup) => {
    //  然后建立监听事件
    themeMedia.addEventListener('change', onChange)
    // 并且在退出时取消监听
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })

  return theme;
}

文章同步更新在公众号：萌萌哒草头将军，欢迎关注

💡 相关阅读

• 🎉 干货满满，React 设计原理(一)：藏在源码里的紧箍咒 🎉
• 🎉 干货满满，React 设计原理(二)：藏在源码里的两个圈 🎉

文章首发公众号：萌萌哒草头将军，最近群里有抽奖，送出五本书，群里目前已经快20位小伙伴了，概率很大，感兴趣的小伙伴关注后联系我即可入群。个人联系方式：SunBoy_mmdctjj