Javascript少用的API集合Page Visibility API等；写一个自己的react 状态管理；React re-renders guide: everything, all at once;REST APIs - How To Connect Your React App Like The Pros;The future of rendering in React;

type

status

date

slug

summary

👟 Articles

📖 Title: The future of rendering in React

🔗 Link:https://prateeksurana.me/blog/future-of-rendering-in-react/?ck_subscriber_id=1866534082&utm_source=convertkit&utm_medium=email&utm_campaign=⚛️+This+Week+In+React+#119:+React+OG+Images,+Tremor,+Storybook,+Decoupling,+Rendering,+Data-Fetching,+Remix,+Qwik,+TypeScript,+Playwright... - 9162945

👍 Some Contents

CSR SSR各自的好处和弊端

Streaming SSR 和 Suspense（选择性水合）

Server Component: 运行不需要水合/交互的服务端组件，同时可以和Client Components(需要水合)一起使用

💡

CSR:可以利用CDN，也不刷新，但是LCP等比较慢，而且SEO比较差 SSR: SEO好，FCP LCP等比较快；但是TTFB比较慢，还是需要水合； SSR Streaming + Suspense: HTTP streaming的帮助，可以使用SSR Streaming来分段渲染页面，同时配合React Suspense(实验)来做选择性的水合，加快速度 Server Component: 对于不需要水合的纯服务端组件使用Server Component，配合 Client Component+水合一起使用；对比于传统的SSR(纯Server Component)+水合更灵活

📖 Title: REST APIs - How To Connect Your React App Like The Pros

🔗 Link: https://profy.dev/article/react-rest-api#the-project

👍 Some Contents

react-query的一些特性

💡

纯useEffect+useState作为DataFetching的弊端：需要自己处理loaidng,error,cancel,缓存，重试等逻辑使用reacy-query的好处：封装好的缓存，laoding,error,重试cancel等逻辑

📖 Title: React re-renders guide: everything, all at once

🔗 Link:https://www.developerway.com/posts/react-re-renders-guide#part3.3

👍 Some Contents

子组件作为children传递

💡

React Re render的原因：setState, context变化，父组件导致的子组件Render, (props无关，因为父组件render的时候自组件就已经render了，除非使用了memo, 才和props改变有关系)

优化re-render的方式： state逻辑下移；子组件作为props/children传递；memo/useMemo等….

📖 Title: 一文读懂字符编码

🔗 Link: https://mp.weixin.qq.com/s/5pAgcjk_lFGrPhSUp2Na3Q

👍 Some Contents

ASCII，Unicode, UTF-8, UTF-16扫盲

💡

📖 Title: How to write your own state management library

🔗 Link:https://judehunter.dev/blog/how-to-write-your-own-state-management-library

👍 Some Contents

一旦状态被修改，只有相关的组件才会被重新呈现。这与上下文API相反，在上下文API中，任何更新都会导致所有上下文消费者及其后代被重新呈现。如果没有适当的优化或记忆，在某些情况下，从上下文提供程序开始的整个子树也将被重新呈现。

💡

状态管理最重要的是改变某一部分全局状态的时候，只有订阅了的原子组件才会受影响，而不是像context API一样，没有memo等的情况下，消费组件和生产者组件直接全部re-render 甚至整个树

📖 Title: JavaScript APIs You Don’t Know About

🔗 Link: https://www.smashingmagazine.com/2022/09/javascript-api-guide/

👍 Some Contents

Page Visibility API

💡

Page Visibility API 用来做页面隐藏/其他Tab的时候的用户分析数据上传，轮训停止、视频停止播放等；Share API 用来触发操作系统层面的分享；Broadcast Channel API 用来同源下不同页面的通信广播同步状态； Internationalization API 用来不同时区的日期等的翻译和国际化

❣️ Quote

拳击手的教训：不懂得思考，只会一股脑努力蛮干是没有用的！尖嗓说什么拳击手就做什么，说什么他就信什么，单纯地以为仅仅靠努力地搬石头就可以在退休的时候过上舒适的日子. 日复一日地搬石头，每天比其他动物早起半个小时一个小时，同人类打战也冲在最前面。但是最终在无法劳作年迈的时候，却被资本猪卖去了屠宰场. 所以说，不要做只会埋头干的拳击手，而是要有自己的思考，思考什么是对的什么是错的，什么才可以真正的改善自己的生活. 提高自己的知识，自己的核心竞争力，单靠努力或者体力，最后在体力或者努力透支的情况下，还可能被插上一刀，榨干最后的一滴血！

From: 《动物农场》