React Hooks 常用 Hook 详解及使用场景-JavaScript中文网-JavaScript教程资源分享门户

1. 引言

React Hooks 是 React 16.8 版本引入的新特性，它可以让函数组件具有类组件的功能。ReactHooks 的出现是为了解决 React 的繁琐问题，帮助我们书写更简洁、易读、可维护和高效的组件。

这篇文章将介绍 React Hooks 的常用 Hook 及其使用场景，让我们深入了解这一优秀的技术。

2. useState

useState 是 React Hooks 中最基础、最常用的 Hook 之一，它可以让我们在函数组件中使用状态。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <span>Count: {count}</span>
    </div>
  );
}

在代码中，useState 定义了一个状态 count，并通过 setCount 方法修改状态。我们可以通过 useState 返回的数组分别获取当前状态和更改状态的方法。

3. useEffect

useEffect 是另一个常用的 Hook，它可以让我们在函数组件中使用生命周期方法。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <span>Count: {count}</span>
    </div>
  );
}

在代码中，useEffect 接受一个回调函数，每次组件渲染完成后都会执行回调函数。在这个例子中，我们使用 useEffect 实现了更改网页标题的功能。

当然，useEffect 还能做更多的事情，例如请求数据、订阅事件等等。不过，需要注意的是，使用 useEffect 时需要指定依赖项，否则会导致无限循环的渲染。

4. useContext

useContext 可以用来在子组件中使用父组件传递进来的 context 值。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useState, useContext } from 'react';

const ThemeContext = React.createContext('light');

function Counter() {
  const [count, setCount] = useState(0);
  const theme = useContext(ThemeContext);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div className={theme}>
      <button onClick={handleClick}>Click me</button>
      <span>Count: {count}</span>
    </div>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Counter />
    </ThemeContext.Provider>
  );
}

在代码中，我们创建了一个 ThemeContext，并传递给了 Count 组件。在 Count 组件中，我们使用 useContext 获取了父组件传递进来的 theme 值，并将其作为 className。

5. useRef

useRef 可以用来获取组件中的 DOM 元素或保存变量。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useRef } from 'react';

function Counter() {
  const countRef = useRef(0);

  function handleClick() {
    countRef.current++;
    console.log(`Count: ${countRef.current}`);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在代码中，我们使用 useRef 创建了一个 countRef，并将它的初始值设为 0。在 handleClick 方法中，我们通过修改 countRef.current 来更新计数器的值。

另外，useRef 还可以保存上一次的值，例如：

// javascriptcn.com 代码示例
import React, { useEffect, useRef } from 'react';

function Counter() {
  const prevCountRef = useRef(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    prevCountRef.current = count;
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count up</button>
      <span>Current count: {count}</span>
      <span>Previous count: {prevCountRef.current}</span>
    </div>
  );
}

在代码中，通过 useRef 进行了上一次的保存，为了方便，我们在计数器中又使用了 useState 来维护 count 的值。

6. useCallback

useCallback 可以用来缓存函数，避免每次渲染都创建新的函数引用。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useCallback, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log(`Count: ${count}`);
    setCount(count => count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在代码中，我们使用 useCallback 缓存了 handleClick 函数。通过传入依赖项 [count]，我们可以控制缓存的更新。因为 handleClick 中引用了 count，所以当 count 改变时，回调函数会被重新缓存。

7. useMemo

useMemo 可以用来缓存计算结果，避免每次重新计算。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useMemo, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const expensiveCount = useMemo(() => {
    let num = 0;
    for (let i = 0; i <= count * 10000; i++) {
      num += i;
    }
    return num;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count up</button>
      <span>Current count: {count}</span>
      <span>Expensive count: {expensiveCount}</span>
    </div>
  );
}

在代码中，我们使用 useMemo 缓存了计算结果 expensiveCount。每次 count 改变时，useMemo 回调函数会被触发，这里我们简单地计算了一个数值，来模拟一些复杂的计算。如果没有使用 useMemo，每次渲染都会重新计算 expensiveCount，会造成无谓的性能浪费。

8. 自定义 Hook

除了 React 提供的一些 Hooks，我们还可以自己定义 Hook。

看下面这个例子：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return {
    count,
    increment,
    decrement,
  };
}

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

在代码中，我们创建了一个自定义 Hook useCounter，返回一个包含 count、increment 和 decrement 函数的对象。在组件中，通过解构的方式获取到对象并使用。

9. 总结

React Hooks 是 React 的一个重要特性，它使得函数组件的功能更加完善。在本文中，我们介绍了 useState、useEffect、useContext、useRef、useCallback、useMemo 等一系列常用的 Hooks，并且还带给大家了些例子，让我们更加深入的了解和理解这些 Hooks。

最后，我们需要注意，使用 Hooks 时需要遵循一些规则，例如：在总是在函数的最外层调用 Hook、不要在循环、条件语句中调用 Hook 等。我们希望这篇文章能为大家提供帮助，并指导读者更好地选择合适的 Hook 并正确使用它们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651bf7cb95b1f8cacd38ecba