本文是关于Context源码的笔记，关于Context的使用，查看官方[文档](https:react.dev/reference/react/createContext)。 下面的创建了一个countContext，点击按钮时count值 + 1； jsx const CountContext = createContext(); function App()

最近想给自己的文章添加阅读量功能，在网站查找各种设计方案，有设计得非常好的，考虑了各种并发、ip、数据统计、分析，以及redis缓存；也有直接简单暴力的直接修改数据库，完全不考虑缓存、并发。 由于我的文章访问量比较少，所以选择了后者，直接更改数据库，因为不存在用户量大的可能，这点自知自明还是有点。 不过怎样才算一次有效的阅读还是需要继续优化的，要是刷新一次页面就算一次有效阅读，那也没有意义

收集高质量博客站点，欢迎留言补充！

React context 大纲： 1. Context 的作用，context是一个对象 2. Context.Provider的执行过程：pushProvider，propagateContextChange，（mount、update阶段的不同），（通过多个不同context来举例，画图说明） 3. Context.Consumer的执行过程： prepareToReadContex

use是React的一个hook，可以用来读取Promise或context的值。 具体的用法和例子可以查看[官方文档](https:react.dev/reference/react/use)。 use源码 use没有状态 ，所以不用将像useState那样创建hook对象，根据useable来判断是Promise还是context

useDeferredValue是一个React hook，用于延迟更新UI。 可以使用在数据更新但UI可以延迟渲染的地方，如果状态变化会触发大量渲染时，useDeferredValue可以减少UI的渲染，避免卡顿。 mountDeferredValue useDeferredValue会中会进行新旧value的比较，所以需要创建一个hook对象。 <ifr

useTransition 是React18提供的新Hook，可让您在不阻塞 UI 的情况下更新状态。 js const [isPending, startTransition] = useTransition(); + isPending: 告诉组件更新是否在pending中; 调用startTransition就设置为true，直到回调函数执行前才设置为fal

今天介绍css @scope，从这个名字中就能看出来是跟作用域有关，没有现在css也支持这个写法了。 一直以来都是sass、less等手段来解决项目中css的作用域问题，现在可以试试css的原生支持效果。 看看下面的html、css代码： html <div> <a>链接1</a> <p> <a>链接2</a> </p> </div> <a>

icon icon用于设置网站的图标. html <link rel="icon" href="favicon.ico" /> 还可以设置不同的sizes。 apple-touch-icon 用于设置移动平台上的图标，该属性是苹果的私有属性，iPhone,iPad,iTouch的Safari浏览器可以通过添加到主屏幕按钮将网站添加到主屏幕上。 html

useSyncExternalStore是React 18提供的Hook，作用是将外部store的状态强制同步到react组件。 例子 jsx import React, {useSyncExternalStore} from 'react'; import ReactDOM from 'react-dom/client'; store let states =