react常见hook及作用？

React 中的 Hook 是 React 16.8 版本中引入的一个新特性。Hook 可以让你在不编写 class 组件的情况下使用 state 和其他 React 特性。

以下是 React 中常见的 Hook 及其作用：

1. useState：用于在函数组件中使用 state。它返回一个数组，第一个值是当前 state 的值，第二个值是更新 state 的函数。例如：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect：用于在函数组件中执行副作用操作，例如访问 DOM、网络请求等。它在组件每次渲染时都会执行。例如：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. useContext：用于在函数组件中访问 React 上下文（Context）中的值。例如：

import React, { useContext } from 'react';
import { ThemeContext } from './theme-context';

function Example() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.foreground }}>
      <p>This is a themed paragraph.</p>
    </div>
  );
}

4. useRef：用于在函数组件中保存可变值，类似于 class 组件中的实例属性。例如：

import React, { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

除了上述 Hook，React 还提供了其他一些 Hook，例如 useReducer、useCallback、useMemo 等，它们都有不同的作用。了解并掌握这些 Hook 可以使你更加高效地编写 React 应用程序。