前言

IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。

浏览器兼容性

我们先看看can i use 里面兼容性的这张图吧

前言

本文很简单，就是介绍2个属性，增加点博客人气，好久没有更新博客了。中国疫情基本控制住了，世界疫情又来了，中国加油，世界加油！ 本文2个属性，一个是device-aspect-ratio 一个是aspect-ratio，都是宽高比率。

device-aspect-ratio

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-aspect-ratio还有两位两个兄弟属性，max-device-aspect-ratio和min-device-aspect-ratio，他们的兼容性在移动端，是可以不用去考虑的，绝大部分的移动端设备，都是支持的，在我看来，是可以直接放心使用的。

前言

reactHooks在使用useState中遇到了一些问题，今天这篇文章主要介绍useState的一些使用，具体useState的一些简单的用法，本文就不举例详细说明了，就说一下useState使用过程中的坑吧。

一、只能处理简单的状态

随便举个例子，如下：

 const [items, setItems] = useState([]);

我一开始以为setItems的功能就类似原来react中setState,但是当我用setItems处理复杂数组对象的时候，会报错。处理复杂状态要改用useReducer()

前言

前面文章有写过vscode保存代码，自动按照eslint规范格式化代码设置，但是这篇文章主要是针对vue项目来写的，那么react项目，假如运用typeScript如何做到呢？

使用 AlloyTeam 的 ESLint 配置

ESLint 原生的规则和 @typescript-eslint/eslint-plugin 的规则太多了，而且原生的规则有一些在 TypeScript 中支持的不好，需要禁用掉。 这里我推荐使用 AlloyTeam ESLint 规则中的 TypeScript 版本，它已经为我们提供了一套完善的配置规则，并且与 Prettier 是完全兼容的（eslint-config-alloy 不包含任何代码格式的规则，代码格式的问题交给更专业的 Prettier 去处理）。