reactHooks到底钩到了什么？

理解React Hooks的工作原理，需要理解它们"钩住"的是什么?

Hooks的核心目标是将函数组件与React的状态和生命周期管理系统连接起来。

钩子钩了什么？

Hooks "钩"住了以下几方面：

1. 状态管理 ( useState ) ：

• • 不使用类组件的情况下在函数组件中管理状态。

2. 副作用管理 ( useEffect ) ：

• • 在特定的生命周期阶段执行副作用操作，比如数据获取、订阅、手动更改DOM等。

3. 上下文 ( useContext ) ：

• • 允许您在组件树中传递数据而无需逐层手动传递props。

4. Reducer模式 ( useReducer ) ：

• • 管理更复杂的状态逻辑，类似于Redux的风格。

5. 引用 ( useRef ) ：

• • 访问DOM节点或存储变量，而不触发重新渲染。

举例

看看具体看几个例子，来展示这些Hooks是如何"钩住"状态、生命周期和上下文的。

状态管理：useState

假设我们有一个计数器组件：

import React, { useState } from 'react';

function Counter() {
  // useState钩住了状态管理
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

export default Counter;

解释：

• 在这个例子里，useState 钩住了一个状态变量 count 和一个更新函数 setCount。
• useState(0) 初始化了 count 为 0。
• 每次点击按钮时，通过 setCount 更新 count，React 重新渲染组件并显示更新后的 count。

副作用管理：useEffect

假设我们需要在组件挂载时从API获取数据，并在组件卸载时清理一些订阅：

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

function ApiDataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // useEffect钩住了副作用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Effect清理函数
    return () => {
      console.log('清理订阅');
    };
  }, []);

  return (
    <div>
      {data ? <p>数据: {data}</p> : <p>加载中...</p>}
    </div>
  );
}

export default ApiDataFetcher;

解释：

• useEffect 在组件挂载时执行 fetch 操作，只需在依赖项数组（第二个参数）传递一个空数组 [] 让它只在组件挂载和卸载时运行。
• 当组件卸载时，useEffect 清理函数被调用，用于执行一些清理操作。

上下文：useContext

假设我们有一个全局的主题上下文来控制组件的主题颜色：

import React, { createContext, useContext } from 'react';

// 创建一个 ThemeContext，默认值为 'light'
const ThemeContext = createContext('light');

function ThemedButton() {
  // useContext 钩住了上下文
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>
      主题按钮
    </button>
  );
}

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

export default App;

解释：

• ThemeContext 使用 createContext 创建。
• ThemeContext.Provider 包裹 ThemedButton 组件，并传递 value = "dark" 。
• ThemedButton 使用 useContext(ThemeContext) 获取当前主题值，并根据主题值设置按钮的背景颜色。

Reducer模式：useReducer

假设我们用 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() {
  // useReducer 钩住了复杂的状态逻辑
  const [state, dispatch] = useReducer(reducer, initialState);

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

export default Counter;

解释：

• useReducer 接受 reducer 函数和初始状态 initialState 。
• 返回当前状态 state 和一个 dispatch 函数，用于分发 action 。
• reducer 函数定义了如何根据不同的 action 更新 state 。

总结

在这些例子中，Hooks将组件"钩"入了React的核心功能：

• useState 钩住状态管理，使函数组件中可以拥有状态。
• useEffect 钩住组件的生命周期，补足了函数组件本来没有的生命周期管理。
• useContext 钩住全局数据共享，使跨组件树的数据传递更加方便。
• useReducer 钩住复杂状态逻辑管理，使状态管理更清晰和可预测。

通过这几个核心Hooks，React提供了强大而灵活的方式，使得函数组件在实现状态管理和副作用处理时，不再需要依赖类组件的生命周期方法，代码更简洁、更具可读性。