梳理一下react Hooks

本文引用React官网资料,地址:https://zh-hans.react.dev/reference/react/hooks(一是作者可以书写文章增加印象,二是好好学习学习官网的写法)

React 内置 Hook

Hook 可以帮助在组件中使用不同的 React 功能。你可以使用内置的 Hook 或使用自定义 Hook。本页列出了 React 中所有内置 Hook。

1、Effect Hook

Effect 允许组件 连接到外部系统并与之同步。这包括处理网络、DOM、动画、使用不同 UI 库编写的小部件 以及其他非 React 代码。

使用 useEffect 将组件连接到外部系统。

java 复制代码
function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effect 是从 React 范式中的"脱围机制"。避免使用 Effect 协调应用程序的数据流。如果不需要与外部系统交互,那么 可能不需要 Effect。

useEffect 有两个很少使用的变换形式,它们在执行时机有所不同:

useLayoutEffect 在浏览器重新绘制屏幕前执行,可以在此处测量布局。

useInsertionEffect 在 React 对 DOM 进行更改之前触发,库可以在此处插入动态 CSS。

2、Ref Hook

ref 允许组件 保存一些不用于渲染的信息,比如 DOM 节点或 timeout ID。与状态不同,更新 ref 不会重新渲染组件。ref 是从 React 范例中的"脱围机制"。当需要与非 React 系统如浏览器内置 API 一同工作时,ref 将会非常有用。

使用 useRef 声明 ref。你可以在其中保存任何值,但最常用于保存 DOM 节点。

使用 useImperativeHandle 自定义从组件中暴露的 ref,但是很少使用。

java 复制代码
function Form() {
  const inputRef = useRef(null);
  // ...

3、Context Hook

上下文帮助组件 从祖先组件接收信息,而无需将其作为 props 传递。例如,应用程序的顶层组件可以借助上下文将 UI 主题传递给所有下方的组件,无论这些组件层级有多深。

使用 useContext 读取订阅上下文。

java 复制代码
function Button() {
  const theme = useContext(ThemeContext);
  // ...

4、State Hook

状态帮助组件 "记住"用户输入的信息。例如,一个表单组件可以使用状态存储输入值,而一个图像库组件可以使用状态存储所选的图像索引。

使用以下 Hook 以向组件添加状态:

使用 useState 声明可以直接更新的状态变量。

使用 useReducer 在 reducer 函数 中声明带有更新逻辑的 state 变量。

java 复制代码
function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

性能 Hook

优化重新渲染性能的一种常见方法是跳过不必要的工作。例如,可以告诉 React 重用缓存的计算结果,或者如果数据自上次渲染以来没有更改,则跳过重新渲染。

可以使用以下 Hook 跳过计算和不必要的重新渲染:

使用 useMemo 缓存计算代价昂贵的计算结果。

使用 useCallback 将函数传递给优化组件之前缓存函数定义。

java 复制代码
function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

有时由于屏幕确实需要更新,无法跳过重新渲染。在这种情况下,可以通过将必须同步的阻塞更新(比如使用输入法输入内容)与不需要阻塞用户界面的非阻塞更新(比如更新图表)分离以提高性能。

使用以下 Hook 处理渲染优先级:

  • useTransition 允许将状态转换标记为非阻塞,并允许其他更新中断它。
  • useDeferredValue 允许延迟更新 UI 的非关键部分,以让其他部分先更新。
相关推荐
yinke小琪1 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿5 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux6 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵8 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆10 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
Thomas游戏开发11 分钟前
Unity3D Boehm GC原理解析
前端框架·unity3d·游戏开发
豆苗学前端14 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_14 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪16 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany17 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc