React Hooks 你知道哪些 ?

最新推荐文章于 2025-12-06 17:59:54 发布

原创最新推荐文章于 2025-12-06 17:59:54 发布 · 939 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

基础 Hooks

useState：状态管理

作用：在函数组件中声明和更新局部状态。

实战场景：表单输入、计数器、开关状态。

import React, { useState } from 'react';

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

return (
  <div>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>+1</button>
  </div>
);
}

useEffect：副作用处理

作用：处理副作用（如数据请求、DOM 操作、订阅）。
实战场景：API 请求、事件监听、定时器。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    return () => {
      // 清理逻辑（如取消请求、移除监听）
    };
  }, []); // 空依赖数组表示只在挂载时执行

  return <div>{data ? data.title : 'Loading...'}</div>;
}

useContext：共享全局数据

作用：跨组件树传递数据，避免逐层传递 props。
实战场景：主题切换、用户登录状态。

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

const ThemeContext = createContext('light');

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Theme</div>;
}

进阶 Hooks

useReducer：复杂状态逻辑

作用：类似 Redux，通过 reducer 函数管理复杂状态。

实战场景：表单多字段管理、购物车状态。

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

useCallback：缓存函数

作用：缓存函数引用，避免子组件不必要的渲染。
实战场景：性能优化，防止函数重复创建。

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

function Parent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // 依赖数组为空表示函数不变化

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

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
});

useMemo：缓存计算结果

作用：缓存复杂计算结果，避免重复计算。
实战场景：计算密集型操作、过滤列表。

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

function List({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]); // 依赖变化时重新计算

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>{filteredItems.map(item => <li key={item}>{item}</li>}</ul>
    </div>
  );
}

useRef：引用 DOM 或保存可变值

作用：访问 DOM 元素或保存不触发渲染的变量。

实战场景：输入框聚焦、保存定时器 ID。

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

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

useEffect(() => {
  inputRef.current.focus(); // 组件挂载后自动聚焦
}, []);

return <input ref={inputRef} type="text" />;
}

其他实用 Hooks

useLayoutEffect：同步副作用

作用：类似 useEffect，但会在 DOM 更新后同步执行。

实战场景：测量 DOM 元素尺寸、同步渲染前操作。

import React, { useLayoutEffect, useRef } from 'react';

function MeasureElement() {
const ref = useRef(null);

useLayoutEffect(() => {
  const { width } = ref.current.getBoundingClientRect();
  console.log('Width:', width);
}, []);

return <div ref={ref}>Measure me</div>;
}

useImperativeHandle：暴露子组件方法

作用：自定义通过 ref 暴露给父组件的方法。

实战场景：表单验证、控制子组件行为。

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const Child = forwardRef((props, ref) => {
const inputRef = useRef();

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current.focus(),
}));

return <input ref={inputRef} />;
});

function Parent() {
const childRef = useRef();

return (
  <div>
    <Child ref={childRef} />
    <button onClick={() => childRef.current.focus()}>Focus Child</button>
  </div>
);
}

useDebugValue：调试自定义 Hook

作用：在 React 开发者工具中显示自定义 Hook 的标签。
实战场景：调试复杂自定义 Hook。

function useCustomHook() {
  const [value] = useState('Initial');
  useDebugValue(value); // 在开发者工具中显示值
  return value;
}

Hooks 组合实战

场景：全局状态管理（useContext + useReducer）

// 创建全局状态上下文
const AppContext = createContext();

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

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      <ChildComponent />
    </AppContext.Provider>
  );
}

function ChildComponent() {
  const { state, dispatch } = useContext(AppContext);
  return <div>{state.count}</div>;
}

场景：防抖搜索（useState + useEffect + useCallback）

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const debouncedSearch = useCallback(
    _.debounce((searchText) => {
      fetchResults(searchText).then(setResults);
    }, 500),
    []
  );

  useEffect(() => {
    if (query) debouncedSearch(query);
  }, [query]);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>{results.map(result => <li key={result.id}>{result.name}</li>}</ul>
    </div>
  );
}