React Hook用法示例详解（6个常见hook）

首先需要明确的是React Hook是React16.8中加入的新特性，它可以让我们在不编写类的情况下使用state和其他React特性。

下面分别介绍React Hook中的6个常见hook及其用法示例：

1.useState

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>
  );
}

useState是React Hook中最基础的一个hook，它可以让我们在函数组件中添加state。useState方法接受一个初始值，返回一个数组，数组的第一个元素是state的值，第二个元素是更新state值的方法。在上面的示例中，我们使用useState来声明了一个count状态，并且通过setCount方法更新count的值。

2.useEffect

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

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

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

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

useEffect是React Hook中用来处理副作用的hook。我们可以利用useEffect在组件渲染后执行一些操作，比如更新页面title。useEffect接收一个函数作为参数，该函数会在每次渲染时都会执行。在上面的示例中，我们使用useEffect来更新页面的title，并且没有指定依赖关系，这意味着该useEffect方法会在每次渲染时都会执行。

3.useContext

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function HomePage() {
  const { firstName } = useContext(UserContext);

  return <h1>Welcome {firstName}!</h1>;
}

useContext可以让我们在组件中使用Context，避免了使用props穿透多个层级的问题。useContext接受Context对象作为参数，并返回Context的值。在上面的示例中，我们使用useContext来获取UserContext中的firstName值。

4.useRef

import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

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

useRef可以用来存储组件内部的变量，并在组件渲染间保持该变量的稳定。在上面的示例中，我们使用useRef来获取input节点，并在按钮点击事件中将输入框设置为焦点。

5.useReducer

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useReducer可以用来更新状态更复杂的场景，例如计数器示例中需要执行多个操作。useReducer接受一个reducer函数和一个初始值对象，并返回一个状态对象和更新状态的dispatch方法。在上面的示例中，我们使用useReducer来完成了一个简单的计数器功能。

6.useCallback

import React, { useState, useCallback } from 'react';
import Button from './Button';

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <Button onClick={increment}>Increment</Button>
    </div>
  );
}

useCallback可以用来缓存回调函数，防止因为父组件重新渲染导致子组件不必要的重新渲染。useCallback接受一个函数和依赖项数组，并返回一个缓存该函数的新函数。在上面的示例中，我们使用useCallback避免了因为父组件重新渲染导致Button子组件的重新渲染。