React教程

原子化 css 什么是原子化 css 原子化 CSS 是一种现代 CSS 开发方法，它将 CSS 样式拆分成最小的、单一功能的类。比如一个类只负责设置颜色，另一个类只负责设置边距。这种方式让样式更容易

css-in-js css-in-js 是将 CSS 代码 跟 JS 代码 混合在一起，通过 JS 来动态的生成 CSS 样式，但是这样的话与我们的认知是背道而驰的，正常应该是 CSS JS HTML

css modules 什么是 css modules 因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件

Suspense Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。 应用场景 异步组

createPortal 注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。 用法 参数 入参 children：要渲染的组件 domNo

React 受控组件理解和应用 React 受控组件 受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。因为React没

自定义hooks 前几章我们已经介绍了React内置的hooks(useState, useEffect, useContext, useReducer, useRef, useMemo, useCa

useId useId 是 React 18 新增的一个 Hook，用于生成稳定的唯一标识符，主要用于解决 SSR 场景下的 ID 不一致问题，或者需要为组件生成唯一 ID 的场景。 使用场景 为组件

useDebugValue useDebugValue 是一个专为开发者调试自定义 Hook 而设计的 React Hook。它允许你在 React 开发者工具中为自定义 Hook 添加自定义的调试值

useCallback useCallback 用于优化性能，返回一个记忆化的回调函数，可以减少不必要的重新渲染，也就是说它是用于缓存组件内的函数，避免函数的重复创建。 为什么需要useCallbac

useMemo useMemo 是 React 提供的一个性能优化 Hook。它的主要功能是避免在每次渲染时执行复杂的计算和对象重建。通过记忆上一次的计算结果，仅当依赖项变化时才会重新计算，提高了性能

useContext useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。 用法 参数 入参 context

useImperativeHandle 可以在子组件内部暴露给父组件句柄，那么说人话就是，父组件可以调用子组件的方法，或者访问子组件的属性。 如果你学过Vue，就类似于Vue的defineExpose

useRef 当你在React中需要处理DOM元素或需要在组件渲染之间保持持久性数据时，便可以使用useRef。 通过Ref操作DOM元素 参数 initialValue：ref 对象的 curren

useLayoutEffect useLayoutEffect 是 React 中的一个 Hook，用于在浏览器完成布局和绘制之后立即执行副作用。与 useEffect 类似。 用法 参数 setup

useEffect useEffect 是 React 中用于处理副作用的钩子。并且useEffect 还在这里充当生命周期函数，在之前你可能会在类组件中使用 componentDidMount、co

useDeferredValue useDeferredValue 用于延迟某些状态的更新，直到主渲染任务完成。这对于高频更新的内容（如输入框、滚动等）非常有用，可以让 UI 更加流畅，避免由于频繁更

useTransition useTransition 是 React 18 中引入的一个 Hook，用于管理 UI 中的过渡状态，特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”

useSyncExternalStore useSyncExternalStore 是 React 18 引入的一个 Hook，用于从外部存储（例如状态管理库、浏览器 API 等）获取状态并在组件中同

useReducer useReducer是React提供的一个高级Hook,没有它我们也可以正常开发，但是useReducer可以使我们的代码具有更好的可读性，可维护性。 useReducer 跟