2024.1.12

1. 9.48 到达公司
2. 《如何在 2024 年编写 CSS 》https://sorrycc.com/css-2024/
   CSS变量 (CSS Variables)

.header {
  --main-bg-color: lightblue;
}
.header {
  background-color: var(--main-bg-color);
}
.header .nav {
  background-color: var(--main-bg-color);
}
document.documentElement.style.setProperty('--main-bg-color', 'lightblue');

:has 选择器
看使用场景主要是用于处理父元素中有特定的子元素，然后对父做处理。
容器查询（Container Queries）
根据元素的容器尺寸而不是视口尺寸来应用样式。也就是根据包含该元素的宽高来做媒体查询。
css 压缩，css 树摇晃（CSS Tree Shaking），hash 缓存，css modules，postcss和autoprefixer。

3. 《React 服务器组件：好的、坏的和丑的》https://sorrycc.com/rsc-good-bad-ugly/
4. 看 react.dev 发现了一个优化项 useDeferredValue，可以用来优化输入框+搜索列表的场景
5. useMemo 在什么时候优化有意义
   console.time('filter array');
   const visibleTodos = filterTodos(todos, tab);
   console.timeEnd('filter array');
   通过这种方式计算函数消耗时间，超过 1ms 再使用 useMemo 才有意义。也可以使用Chrome CPU 限速选项。测试函数消耗时间
6. 《react.dev 进度》https://react.dev/reference/react/forwardRef#my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null