React开发者必知的七个顶级Hooks

React 钩子彻底改变了我们管理状态和副作用的方式。通过钩子，我们可以封装可重用的逻辑，并在组件之间共享，从而使代码更干净且更具模块化。
在本文中，我们将探讨每个 React 开发人员都应该了解的最常用的 7 个 React 钩子。无论你是 React 的初学者，还是希望提升技能的老手，理解这些钩子都将让你能够构建更高效、更易于维护的 React 应用程序。让我们开始吧，一起来深入了解！

useState()

在React中，useState() 是常用的钩子，用于在函数组件中添加状态。

useState 是一个允许你在组件中添加状态的 React Hook，它返回一个包含两个值的数组。

1.: 当前状态
2.: 设置功能

你可以传入初始值，就像示例中的-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';

/**

* 这是一个TodoList组件，它接收todos和tab作为属性，并使用useMemo来优化可见todos的计算。
 */
function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
}

全屏模式 退出全屏

useId() // 获取或设置ID的函数

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() 函数

useCallback 是一个 React Hook，它允许你在重新渲染之间缓存一个函数，以便缓存函数定义。
useCallback 用于缓存函数，而 useMemo 则用于缓存计算结果。

    import { useCallback } from 'react';

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

进入全屏 退出全屏

useEffect() // 用于处理副作用逻辑

useEffect 是一个 React 钩子，允许你在组件中执行一些操作。这些操作基本上是用来将组件与外部世界链接起来的。

    useEffect(() => {
      // useEffect: 相当于生命周期中的 componentDidMount 和 componentDidUpdate
      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 钩子，让你可以从组件中读取和订阅上下文，就像从数据存储（如 Redux）中读取一样
这个示例仅用于展示 useContext 钩子的用法，并不涉及创建上下文

    import { useContext } from 'react';

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

    // 此组件从React中使用主题上下文

切换到全屏 切换出全屏

React Hooks 对 React 开发者来说是一个游戏规则改变者，提供了一种在函数组件中处理状态和副作用的简单方式。通过掌握这里讨论的 7 个常用的 Hooks，你将能更好地构建高效且好维护的 React 应用。不断探索和利用 Hooks 的强大之处，从而提升你的 React 开发体验。
祝你编码愉快，加油！🚀

💡 让我们联系起来！
给我发邮件：[e-mail]
☕ 请我喝杯咖啡支持我：//buymeacoffee.com/vishnusatheesh