React Hooks知识讲解一

React Hooks 是 React 16.8 引入的一项新特性，它允许你在不编写类的情况下使用状态和其他 React 特性。Hooks 是一些可以让你“钩入”React 状态和生命周期特性的小函数。以下是对 React Hooks 的详细介绍。

1. 为什么使用 Hooks？

在 React 16.8 之前，函数组件是无状态的，只能作为纯粹的 UI 渲染工具。而类组件则具有更多的功能，例如状态管理和生命周期方法。这导致了一些问题：

• 代码复用困难：逻辑在组件之间的复用往往需要使用高阶组件（HOC）或 render props，这可能会导致嵌套地狱和难以理解的代码。
• 复杂组件的维护：类组件的生命周期方法往往会变得复杂且难以维护，尤其是当组件需要在 componentDidMount 和 componentDidUpdate 中处理大量逻辑时。
• 学习曲线陡峭：理解类组件的生命周期方法和 this 关键词的使用对新手来说较为困难。

Hooks 通过提供一种更简洁、更灵活的 API，解决了这些问题。

2. 常用的 Hooks

2.1 useState

useState 是最基础的 Hook，用于在函数组件中添加状态。它返回一个状态变量和一个更新该状态的函数。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

2.2 useEffect

useEffect Hook 允许你在函数组件中执行副作用操作。它可以看作是 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。

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

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

  useEffect(() => {
    // 使用浏览器 API 更新文档标题
    document.title = `You clicked ${count} times`;
  });

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

2.3 useContext

useContext Hook 用于在函数组件中使用上下文。它接受一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am styled by theme context!</button>;
}

3. 自定义 Hooks

自定义 Hooks 是一种提取组件逻辑的机制，可以让我们将组件逻辑提取到可重用的函数中。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // 假设有一个订阅好友状态的 API
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  return isOnline;
}

4. 其他常用 Hooks

4.1 useReducer

useReducer 是 useState 的替代方案，适用于状态逻辑较复杂且包含多个子值的情况。它接收一个 reducer 函数和一个初始状态，并返回当前状态及其配套的 dispatch 方法。

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 (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

4.2 useCallback

useCallback 返回一个 memoized 回调函数，只有在依赖项变化时才会更新该函数。它主要用于优化性能，防止不必要的重新渲染。

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

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

  return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>Increment</button>;
}

4.3 useMemo

useMemo 返回一个 memoized 值，只有在依赖项变化时才会重新计算该值。它主要用于优化性能，防止不必要的计算。

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

function ExpensiveCalculationComponent({ number }) {
  const [count, setCount] = useState(0);

  const expensiveCalculation = useMemo(() => {
    return number * 2; // 假设这是一个昂贵的计算
  }, [number]);

  return (
    <div>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

5. 使用 Hooks 的注意事项

• 只能在函数组件或自定义 Hook 中使用 Hooks：不要在普通的 JavaScript 函数中使用 Hooks。
• 只能在顶层调用 Hooks：不要在循环、条件或嵌套函数中调用 Hooks。

6. 总结

React Hooks 为函数组件带来了状态管理和生命周期管理的能力，使得代码更加简洁和易于理解。通过使用 useState、useEffect、useContext 等内置 Hooks 以及自定义 Hooks，可以大大提高代码的复用性和可维护性。掌握 Hooks 的使用对于现代 React 开发至关重要。