我记得前几年就已经知道了 stateofreact.com/ 这个网站，会发布一些过年一年开发者对于 React 的实际使用的一些客观情况和感受，但由于篇幅过长和没有中文版本的原因，从来没有好好精读过。这次看到了 2024 发了出来并且支持了中文，于是下定决心一定要精读。
当然也要辩证的看待这个统计，虽然是做的比较好，但实际使用中可能价值有限，原因如下：
- 国内外行情不一样：虽然是国外发布的，和国内的行情不太一样，比如（个人感受）Tauri 由于中文友好，感觉会比 Expo 在国内更受欢迎（从掘金搜索结果来看）
- 国内技术和外国技术有点脱钩，比如外国流行 Material-UI，而国内流行 ant design。背后的因素可能跟语言，使用习惯，普及度，包括国内外技术发展程度相关（美国科技，互联网领先中国10-20年左右，近几年有所缩短，5-10年前差距更大，相当于30年左右）
以下内容，不仅仅是这个网站本身提供的内容，还有一些我通过这个网站点进去（比如优秀的博主），不断探索发现的一些有趣的，触动我的文章，知识等，都将记录一下。毕竟这些获得源头都来自于 state of react 这个网站。
Tips: 这篇文章比较杂，主要是针对我自己比较触动的点。也就是刻意练习里讲的"拉伸区"。由于每个人的能力水平，反馈敏感度不同，因此对于同一个知识，文章，内容有自己不同的收获和理解，因此我的理解和一定不适合于所有人。如果想了解国外实际 React 开发相关行业内容资讯的话，请直接阅读原文效果会更好。
组件库
- ui.shadcn.com/ 一个UI基础组件库，直接将代码放到代码库里，而不是打包构建的结果，这样的好处是如果有样式修改，不需要繁琐的样式覆盖，而是直接修改源代码。但缺点是比较基础，比如一些 antd 封装的好用的功能没有，如果需要用的话，就需要手动实现。
- Material-UI 改名为 MUI。MUI 现在是一个更大的 UI 生态系统，不仅仅包含 Material-UI，还包括其他组件库和工具。
- react-scan.com/ 这个工具有点厉害，可以直观的看到哪些组件需要 优化
- React Native 仍然是第一，可能体量比较大。虽然 Expo 和 tauri.app/ 增速挺快。得益于中文友好，Tauri 国内很受欢迎。
- motion.dev/ 动画库第一名。日常使用中这种大型动画库用的比较少，基本上都是纯 CSS3 就能实现。
可访问性
使用语音和眼动技术来编程
www.joshwcomeau.com/blog/hands-...
看了下京东价格，在2000+ 就可以买到一个眼动仪，可以使用眼动仪沉浸式玩游戏
从这个文章也了解到网络可访问性，a11y.coffee/ 。通过这个网站 a11y.coffee/intro/#what...，可以得知这个a11y 的名字来源，其实就是一种数字缩写（numeronym）。这种方式很常见，比如i18n就是internationalization。还有 k8s 就是 Kubernetes。
通过我的中文名字拼音，可以得知我的英文缩写应该是 w10i。
这个文章里面提到的一个在线教育网站也很不错，www.khanacademy.org/
富文本编辑器
富文本编辑器
代码编辑器和富文本编辑器不同，富文本是包含代码的。代码编辑器仅仅是代码的功能，比如高亮，搜索之类的。代码编辑器 CodeMirror codemirror.net/。
协同编辑
mastergo 实现的实时鼠标状态
liveblock 实现的功能就是这个产品的名字，将 block 变成共享实时的。可以为任何产品添加实时协作功能。比如右上角当前多少个用户，当前鼠标的位置，当前 input 被谁点击了，当前文档被谁在编辑并且鼠标的位置在哪。飞书的文档实时编辑我估计就是接入的这个框架。
看起来 MasterGo 用了这个工具实现的「实时鼠标状态」功能。
优质博主
Wes Bos：wesbos.com/
joshwcomeau：www.joshwcomeau.com/
关注了很多优质博主，独立开发教育者的 YouTube（喂给推荐算法，让他以后给我推荐更优质，相关的视频），包括有 RSS 订阅的博主也会顺手加上。
USES
Uses uses.tech/ 是世界上科技工作者的工作站配置列表，即使用的设备，软件和配置
我们经常会看到一些大佬分享如何学习，积累知识，使用好的工具或软件。其实本质上都是 uses。比如
- sorrycc 的 awesome-tools github.com/sorrycc/awe...。
- wesbos.com/uses
- kentcdodds.com/uses
有意思的是选择一个主题，比如 JavaScript，uses.tech/like/JavaSc...，每次访问这个页面都会随机刷新不同的人的 uses，很有意思。
没事，可以逛逛，随便刷一刷，说不定会看到对自己大有裨益的工具，硬件或软件。
我也参考 uses 里面的一些大佬，写了一篇自己的 uses：What I use
Vanilla
隐藏 Mac 上的菜单栏图标
AI 声音转文字
目前我发现的，世界上最好用的声音转文字： wisprflow.ai/
但实际体验下来（我使用的是Mac版本），效果确实不错，虽然可能需要 1-2s 的反应时间，字数少的话，比打字慢一点，如果字数多的话，估计语音会快一点。
但更重要的是，转的中文不是简体，而是繁体。这个就很伤，我网上搜了解决方案，但比较 hack，还是期望官方能适配中文简体吧。
Brave
特点是：屏蔽广告和超快加载网页
我用下来，确实比正常的 chrome 会多屏蔽一些广告。最重要是他原生支持将 tab 标签栏显示在左侧，但是chrome 不支持，需要用 chrome extension 才行。
最推荐的板块
如果你时间紧迫或不想精读这个网站，只想阅读一个最好的模块的话。也就是说，如果让我推荐一个最好的板块的话，那就是资源板块，我在这个板块花费的时间最多，并且收获最大。很多优秀博主和好的网站资源都通过这个板块。
2024.stateofreact.com/zh-Hans/res...
总结
有两个好处
增加见识
这真是一个宝藏网站，不仅通过它了解到诸如 dev.to/，thisweekinreact.com/，javascriptweekly.com/，技术网站，还有很多技术大佬。开拓了自己的眼界，了解到国外的先进技术和行业发展，能收获很多。
詹青云在《奇葩说》中的辩论里提到过： "努力可以获得很多东西，但是见识不能凭努力得到。"
整理精读这个网站，真的感觉很舒服，像是心灵洗了个澡，得到了很多见识。
所以建议大家，偶尔还是要精读（有思考，有输出）一些国外的优质网站，文章。
资源站
当平时开发的时候，不知道用什么状态管理库了，发现某个动画库不好用了， 都可以回过头来参考这个网站给出的情况统计，选择适合自己和项目的库和框架