本系列是在观看React Conf的随笔记录, 一共六篇。这几天整理了下来，内容全来自每个React Conf的Speaker（感谢🙏）. 这其中也包含一些自己的想法。若有错误请评论区指出。 当然还是建议亲自去看一下新鲜出炉的React Conf 2021 - Replay
在开始之前， 先来思考一个问题， 在fetch数据这个场景里为什么要使用框架？
我们可以使用fetching来获取一切请求，但是这样会导致一些问题：
- app中每个组件只关心自己的数据，这样会导致有些字段重复获取
- 每个组件都要处理自己的loading的中间状态（因为每个组件数据返回的时机不一）
- 整体的效率很慢
那么我们是否可以通过一个很大的query来获取所有的data, 然后一次性的给到前端？
答案是否定的。这样会导致强耦合， 隐式依赖。字段特别多的情况下导致后期根本不敢删除字段，只敢新增。
而relay相当于可以指定每个组件需要什么数据，让relay来负责组合查询。
这样完成了数据的解耦。
那么来看下一个问题，loading状态的冗余分布？ 当然是Suspense。我们可以使用Suspense来切分Loading的状态，只需专注于取数的逻辑。
Relay有个提升是可以针对字段设定优先级。例如， 一个页面，头像和用户名信息就是高优先级字段，因为头像名字这些对于后端来说不是很重计算，可以优先返回。后面比较耗时的信息， relay可以单独为其创建一个请求。
那么来看一下数据一致性。当数据实体改变的时，relay负责把改变后的数据与组件内的数据进行比较(diff)。如果有改动才会触发重渲染。这样relay能有更好的性能。例如一个新闻信息流滚动条，在不断的上滑下滑中，减少非必要的重渲染会得到更好的用户体验。
接下来是一些我觉得有意思或者有价值的信息，记录下来：
Realtime React Playground
Quick & Easy
Build optimized websites quickly, focus on your content | Docusaurus
Nextra: Next.js static site generator
CUSTOM
GitHub - hashicorp/next-mdx-remote: Load mdx content from anywhere through getStaticProps in next.js
React Native for Window + MacOS
React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React
React Native现在可以写Window和Mac OS了。
On Device ML For React Native
这个可以用React Native很快的创建一个ML native应用。我觉得很有意思。
Toolkit for building accessible web apps with React
平常写业务的时候很少去注意可访问性想过的东西。但是真是看过视障人士使用当前的web产品才知道自己做的东西真的不算对所有用户友好。
React components for creating SmartHR applications.
GitHub - kufu/smarthr-ui: React components for creating SmartHR applications.
一个日本小哥做的UI组件库，我认为是可访问性的标杆，之后如果自己的组件也会尝试去增加可访问下。
Framework for dynamic commerce
Hydrogen: Shopify's opinionated framework for building headless ecommerce
是shopify engineer团队构建的一套Server Side Render的框架。说实话，shopify的产品在跨境电商这一块真的有很多人在用， 速度快， SEO很棒，站点编辑器方便易用。当然最重要的是应用了React 18新的Server Side Render架构。是一个很好的研究对象。
当然， React Conf 2021肯定还有其他很有意思的地方，例如huangxuan提出的React forget概念就超级有意思，但是我觉得我需要更多的时间去消化。还是建议各位有时间可以自己去看一下回放。
最后， 感谢你看到这里。 Happy Coding~
