React-Study

React 官网相关

• React 官网
• React Team核心成员
• React Video

React 学习资料

• Visual testing for React components using open source tools
• Gleb Bahmutov VP of Engineering

2024年 React 发展趋势

• 原文链接：React Trends in 2024
• 参考链接：译：2024 年 React 趋势

文章相关总结点：

• 1、astro + astro starlight 用于文档
• 2、supabase、clerk、lucia 用于身份验证
• 3、tRPC + Prisma 用于全栈应用
• 4、RSC 只有 Next.js 和 Waku，性能上有优势但不多
• 5、TanStack Router 是类型安全的路由库
• 6、打包工具看 TurboPack 和 Vite
• 7、React Compiler 让我们告别 memo、useCallback 和 useMemo
• 8、Biome 和 oxc 值得期待
• 9、shadcn/UI 流行
• 10、StyleX 编译时 CSS-in-JS 方案，解 SSR 性能问题

React 生态系统

• 2023 React生态系统
• 2022 React生态系统
• 2021 React生态系统
• 2020 React生态系统
• 2019 React生态系统
• 2018 React生态系统
• 2017 React生态系统
• 2016 React生态系统

React 资料（2023）

Main APIs(主要API)

• createContext
• createPortal
• forwardRef
• <Fragment>
• lazy
• memo
• <Profiler>
• <StrictMode>

Hooks:(React 内置的 hooks)

• useCallback
• useContext
• useDeferredValue
• useEffect
• useId
• useMemo
• useReducer
• useRef
• useState
• useSyncExternalStore

New APIs(新 APIs)

• React cache
• React Server Components
• Server Actions
• startTransition
• <Suspense>
• Taint API
• use() Hook
• useFormState
• useFormStatus
• useTransition

Component Libraries(组件库)

• Ant Design

• Chakra UI

• Headless UI

• MUI

• Radix

• React Bootstrap

• shadcn/ui

• React Aria

• Animation (动画库)

  • Framer Motion
  • React-Spring
  • React Motion
  • AutoAnimate
  • React Native Reanimated

• Data Visualization (数据可视化库)

  • D3
  • Nivo
  • React-Vis
  • Recharts
  • Tremor
  • Victory
  • Visx

• Form Libraries

  • React Hook Form
  • react-jsonschema-form
  • Formik
  • @formily/core

• CSS 工具库

  • CSS Modules
  • Emotion
  • Sass/SCSS
  • Stitches
  • Styled Components
  • Styled JSX
  • Tailwind CSS
  • UnoCSS
  • vanilla-extract

状态管理(用于管理应用程序状态的工具库)

• Jotai
• MobX
• Recoil
• Redux
• Redux Toolkit
• useState
• XState
• Zustand

数据加载(用于加载和管理数据的实用工具)

• Apollo Client
• Relay
• RTK Query
• SWR
• TanStack Query (React Query)
• tRPC
• Fetch

Meta-Frameworks Back-End & Infrastructure (元框架 后端和基础设施)

• Astro
• Create React App
• Gatsby
• Next.js
• Remix
• Redwood
• Build Tools(构建工具)
  • webpack
  • Vite
  • tsup
  • esbuild
  • Rollup
  • tsc CLI
  • Parcel
  • Turbopack
• 托管服务(用于托管 React 应用程序的服务)
  • AWS
  • Azure
  • Cloudflare
  • Digital Ocean
  • Fastly
  • Fly.io
  • GitHub Pages
  • Google Cloud
  • Heroku
  • Netlify
  • Render
  • Vercel
• 其他服务(在 React 应用中使用的其他服务)
  • Firebase
  • PlanetScale
  • Prisma
  • Redis
  • Sentry
  • Supabase
  • Upstash

其他工具（其他 React 实用工具和库）

• Testing Libraries()
  • Cypress
  • Jest
  • Playwright
  • Storybook
  • Testing Library
  • Vitest
• React 渲染器
  • React-DOM (React for the web)
  • React Email
  • Ink
  • React Native (Android)
  • React Native (iOS)
  • React Native (macOS)
  • React Native Skia
  • React Native for Web
  • React Native (Windows)
  • React-pdf
  • React Three Fiber
  • Remotion
• 模式和验证库
  • joi
  • Zod
  • Yup
  • io-ts
• 身份验证
  • Clerk
  • FusionAuth
  • Auth.js
  • Lucia
  • Passport
• Mobile Development
  • Capacitor
  • Expo
  • Ionic
  • React Native
• 前端框架
  • Alpine.js
  • Angular
  • Ember
  • Lit
  • Preact
  • Qwik
  • Solid
  • Svelte
  • Vue.js

架构和渲染模式

• 边缘渲染
  • (在发送给客户端之前在边缘服务器 (Edge) 修改渲染的 HTML))
• 增量静态生成
  • 即使在初始构建之后，也能动态增强或修改静态网站 (Next.js ISR, Gatsby DSG)
• 岛屿架构
  • 在一个静态网站中，通过多个入口点实现动态行为的孤岛 (Astro, Eleventy)
• 多页面应用 (MPA)
  • 完全在服务器上运行的应用程序，客户端动态行为极少
• 局部注水
  • 只在客户端上对某些组件进行注水 (比如 React Server Components)
• Progressive Enhancement
  • 确保应用程序在没有 JavaScript 的情况下也能正常运行
• 渐进式注水
  • 控制在客户端上的对组件注水的顺序
• Resumability
  • 在服务器上序列化框架状态，使客户端能够在没有重复代码执行的情况下恢复执行
• 服务端渲染 (SSR)
  • 在服务器上动态渲染 HTML 内容，然后再在客户端上重新“注水”
• 单页面应用 (SPA)
  • 完全在浏览器中运行的应用
• 静态站点生成 (SSG)
  • 预渲染静态内容，可能会携带客户端动态元素
• 流式服务端渲染
  • 将服务器渲染的内容分解为较小的流式块

即将推出的新功能

• Asset Loading
  • 将 Suspense 与样式表、字体和图像的加载生命周期完全整合在一起
• React cache
  • 协助缓存数据的 API
• React Forget
• Offscreen Rendering
• 过渡追踪
  • 检测 React 过渡何时变慢，并调查变慢的原因
• use() Hook
  • use 可以解除对 Promise 的封装，但也可以在普通组件和 Hooks（包括客户端）中使用

资料（学习 React 时使用了哪些资源）

• Blogs、Magazines、Newsletters(博客、杂志、 新闻)
  • Best of JS
  • React Digest
  • Smashing Magazine
  • LogRocket
  • CSS-Tricks
  • Reactiflux
  • JavaScript Weekly
  • Node Weekly
  • Next.js Weekly
  • r/ReactJS
  • React Status
  • Bytes
  • Dev.to
  • This Week In React
• Site、Courses(网站、课程)
  • Wes Bos
  • The Joy of React
  • Codecademy
  • O'Reilly
  • Egghead.io
  • react.gg
  • Coursera
  • Build UI
  • Epic React
  • Scrimba
  • Academind
  • Udemy
  • Pluralsight
  • Frontend Masters
  • Platzi
  • freeCodeCamp
  • Stack Overflow
  • Miguel Ángel Durán (midudev)
• Podcasts (播客)
  • JavaScript Jabber
  • JS Party
  • React Native Show- JavaScript Jam
  • Front End Happy Hour
  • HTTP 203
  • PodRocket
  • The Changelog
  • Ladybug Podcast
  • React Native Radio
  • Shop Talk Show
  • JAMStack Radio
  • Full Stack Radio
  • Syntax
  • React Podcast

参考链接：

• State of React 2023
• 

关于仓库

这个仓库是笔者用来记录自己学习React知识，自己整理的一些的学习资料。

• 

欢迎提交对本仓库的改进建议~