371 - 《React 资料 2023》

内容基于 State of React 2023 调查问卷 https://survey.devographics.com/zh-Hans/survey/state-of-react/2023 整理，应该是目前最新的了。

主要 API

• createContext - 创建组件可以提供或读取的上下文。
• createPortal - 将 children 渲染到其他 DOM 里。
• forwardRef - 让组件通过 ref 向父组件公开 DOM 节点。
• <Fragment> - 通常用 <>…</> 语法，让你不用套一个节点即可把元素组织到一起。
• lazy - 推迟加载组件的代码，直到首次渲染为止。
• memo - 当组件 props 不变时，不会重新渲染组件。
• <Profiler> - 以编程方式测量 React 树的渲染性能。
• <StrictMode> - 在开发过程中尽早发现组件中的常见错误。

内置 Hooks

• useCallback - 在 re-renders 时缓存函数定义。
• useContext - 从组件中读取和订阅上下文。
• useDeferredValue - 推迟更新用户界面。
• useEffect - 将组件与外部系统同步。
• useId - 生成唯一 ID，可传递给可访问性属性等。
• useMemo - 在 re-renders 时缓存计算结果。
• useReducer - 为组件添加 reducer。
• useRef - 引用渲染时不需要用到的值。
• useState - 为组件添加状态变量。
• useSyncExternalStore - 订阅外部 Store。

新 API

• React cache - 缓存数据获取或计算的结果。
• React Server Components - 只在服务器上运行的组件。
• Server Actions - React 内置的服务器突变解决方案。
• startTransition - 在不阻止UI的情况下更新状态。
• <Suspense> - 在子模块完成加载前显示 fallback 组件。
• Taint API - 防止特定对象或值传递给客户端组件。
• use() Hook - 读取 Promise 或上下文等资源的值。
• useFormState - 根据 form action 的结果更新状态。
• useFormStatus - 提供上次提交表单的状态信息。
• useTransition - 在不阻止UI的情况下更新状态。

组件库

• 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
• Zusta