你必须知道的 7 个 React Hooks

React Hooks 彻底改变了我们在 React 函数式组件中管理状态和副作用的方式。借助 Hooks，我们可以封装可复用逻辑并在组件之间共享，从而获得更简洁、更模块化的代码。
本文将探讨每个 React 开发者都应该了解的 7 个 React Hooks。无论您是 React 新手，还是希望提升技能，理解这些 Hooks 都能帮助您构建更高效、更易于维护的 React 应用程序。让我们开始吧！

useState()

useState是一个 React Hook，可让你向组件添加状态变量，该变量返回一个包含两个值的数组。

当前状态
设置函数

您也可以传递初始值，如示例中所示：28 和“Taylor”

import { useState } from 'react';

function myComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
}

useMemo()

useMemo是一个 React Hook，可让您在重新渲染之间缓存计算结果，从而防止 React 应用程序中不必要的渲染。

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
   () => filterTodos(todos, tab),
   [todos, tab]
  );
}

useId()

useId是一个 React Hook，用于生成可以传递给可访问性属性的唯一 ID，
可访问性属性允许您指定两个标签彼此相关，您可以在其中使用useId()生成的 ID 而不是对它们进行硬编码。

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();

  return (
   <>
    <input type="password" aria-describedby={passwordHintId />
    <p id={passwordHintId}>
   </>
  )

使用回调()

useCallback是一个 React Hook，可让你在重新渲染之间缓存函数定义。
useCallback 缓存函数并useMemo缓存计算的值/结果

import { useCallback } fom 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
   post('/product/' + productId + '/buy' {
    referrer,
    orderDetails,
    });
   }, [productId, referrer]);

useEffect()

useEffect是一个 React Hook，允许你在组件中执行副作用。副作用本质上是一种将组件连接到外部世界的操作。

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
   connection.disconnect();
  };
 }, [serverUrl, roomId]);
}

useRef()

useRef是一个 React Hook，允许你引用渲染不需要的值。
它基本上类似useState，但唯一的区别是useRef当值发生变化时不会导致重新渲染。

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
}

useContext()

useContext是一个 React Hook，它允许您从组件读取和订阅上下文，就像数据存储（Redux）
useContext钩子一样，让您读取存储在上下文（即数据存储）中的数据。
这个例子只是为了演示 useContext 钩子不创建上下文

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
}

React Hooks 为 React 开发者带来了颠覆性的改变，它提供了一种简单易用的方式来管理函数式组件中的状态和副作用。掌握本文讨论的 7 个最佳 Hooks，您将能够更好地构建高效且可维护的 React 应用程序。继续探索并利用 Hooks 的强大功能，提升您的 React 开发之旅。
祝您编程愉快！🚀

💡 让我们联系吧！
📩 给我发邮件：getintouchwithvishnu@gmail.com
☕ 支持我的工作：请我喝杯咖啡

鏂囩珷鏉ユ簮锛�https://dev.to/vishnusatheesh/top-7-react-hooks-you-must-know-3k7g