react hooks 的常用 hook

React Hooks 是 React 16.8 的新增特性，它使得我们可以在函数组件中使用状态（state）、生命周期钩子（lifecycle hook）等之前只能在 Class 组件中使用的特性。常用的 React Hooks 包括：

1. useState: useState 是最基础的 Hook 之一，它可以用来在函数组件中添加状态。useState 返回一个数组，其中第一个元素是当前状态的值，第二个元素是改变状态的函数。

2. useEffect: useEffect 是另一个常用的 Hook，它可以让我们在函数组件中使用类似 componentDidMount、componentDidUpdate 和 componentWillUnmount 这些生命周期钩子。useEffect 接收一个函数作为参数，该函数会在组件挂载、更新或卸载时执行。

3. useContext: useContext 可以用来在函数组件中使用 Context 上下文。它接收一个 Context 对象作为参数，并返回该 Context 的当前值。

4. useMemo: useMemo 可以用来缓存计算结果，避免重复计算。它接收一个计算函数和依赖项数组作为参数，只有当依赖项数组发生变化时才会重新计算。

5. useCallback: useCallback 用来缓存函数，避免重复创建。它接收一个函数和依赖项数组作为参数，并返回一个缓存后的函数。

相关问题

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

这个错误的意思是你在函数组件之外的地方使用了 `useState` 钩子。React 钩子只能在函数组件或自定义钩子函数中使用，不能在顶层代码或类组件中使用。

例如，以下代码会导致这个错误：

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return <div>{count}</div>;
};

const count = useState(0); // 这里会出现错误

class Counter extends React.Component {
  render() {
    const [count, setCount] = useState(0); // 这里也会出现错误
    return <div>{count}</div>;
  }
}

在上面的代码中，`App` 组件中使用了 `useState` 钩子，这是正确的。但是，在顶层代码中定义 `count` 变量并调用 `useState` 函数是错误的。另外，在类组件 `Counter` 中使用 `useState` 钩子也是错误的。

要解决这个错误，你需要将 `useState` 钩子调用移到函数组件中或自定义钩子函数中。例如，以下是一个正确的计数器组件：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
};

export default Counter;

在上面的代码中，`useState` 钩子被正确地使用在了函数组件中。

React Hook "useTranslation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

这是一个关于React Hook "useTranslation"的错误提示，提示你不能在函数组件外部调用该 Hook，必须在函数组件内部或自定义 Hook 函数中调用。在函数组件外部调用该 Hook 会导致 React 抛出错误。为了解决这个问题，你需要将该 Hook 调用放到函数组件内部，或者定义一个自定义 Hook 函数来使用该 Hook。