React 内置 Hooks：强大的工具助力函数式组件开发

Leo的前端之路

于 2024-08-29 13:14:33 发布

阅读量480

点赞数 6

分类专栏：前端学习 React 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/ljx11606/article/details/141675701

版权

前端学习同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

React

2 篇文章 0 订阅

订阅专栏

在 React 的世界里，函数式组件结合内置 Hooks 为开发者提供了简洁、高效的开发方式。让我们深入了解这些强大的工具。

一、`useState`

useState是函数组件中用于管理状态的重要 Hook。它允许我们在函数组件中添加局部状态，就像在类组件中一样，通过useState，我们可以轻松地跟踪和更新组件的状态，从而实现动态的用户界面。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

二、`useEffect`

useEffect用于处理副作用操作，如数据获取、订阅事件、手动修改 DOM 等。它可以在组件挂载、更新和卸载时执行特定的副作用操作，useEffect帮助我们在函数组件中管理副作用，确保组件的行为更加可靠和可预测。

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

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const newData = await response.json();
      setData(newData);
    }
    fetchData();
  }, []);

  return <div>{data? <p>Data: {data}</p> : <p>Loading...</p>}</div>;
}

三、`useContext`

useContext允许我们在函数组件中访问 React 的上下文（Context）。通过上下文，我们可以在组件树中共享数据，而无需通过层层传递 props，useContext简化了数据在组件树中的传递，提高了代码的可维护性。

// 首先，创建一个上下文
import React from 'react';

const MyContext = React.createContext();

function Provider({ children }) {
  const value = 'Some shared value';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

export { MyContext, Provider };

// 在函数组件中使用，可创建多个
import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const value = useContext(MyContext);
  return <div>Value from context: {value}</div>;
}

四、`useReducer`

useReducer用于处理复杂的状态管理逻辑，类似于 Redux 的 reducer 函数。它接受一个 reducer 函数和初始状态作为参数，返回当前状态和一个 dispatch 函数，用于触发状态更新，useReducer为处理复杂状态逻辑提供了一种结构化的方式。

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

五、`useCallback`

useCallback用于缓存函数，避免在每次渲染时都重新创建函数。当函数作为 props 传递给子组件时，如果子组件使用了React.memo进行优化，useCallback可以避免不必要的子组件重新渲染，useCallback有助于提高性能，特别是在处理大量子组件时。

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

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onIncrement={increment} />
    </div>
  );
}

const ChildComponent = React.memo(({ onIncrement }) => {
  return <button onClick={onIncrement}>Increment in child</button>;
});

六、`useMemo`

useMemo用于缓存计算结果，避免在每次渲染时都进行重复计算。当计算结果作为 props 传递给子组件时，如果子组件使用了React.memo进行优化，useMemo可以避免不必要的子组件重新渲染，useMemo可以提高性能，特别是在处理复杂计算时。

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

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  const result = useMemo(() => count * multiplier, [count, multiplier]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <p>Result: {result}</p>
      <ChildComponent value={result} />
    </div>
  );
}

const ChildComponent = React.memo(({ value }) => {
  return <div>Value in child: {value}</div>;
});

七、`useRef`

useRef返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（初始值）。主要用途包括访问 DOM 元素、保存可变值而不触发组件重新渲染、在函数组件中保存上一次的值等，useRef提供了一种灵活的方式来处理与 DOM 元素和可变值相关的操作。

示例1：访问DOM元素

import React, { useRef } from 'react';

function MyComponent() {
  // 访问 DOM 元素
  const inputRef = useRef(null);

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

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

示例2：保存上一次的值

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

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

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCountRef.current}</p>
    </div>
  );
}

八、`useLayoutEffect`

useLayoutEffect与 useEffect类似，但它会在 DOM 更新后同步触发。主要用于在 DOM 更新后立即执行一些操作，这些操作可能需要读取最新的 DOM 布局信息，并且不希望在屏幕更新后再执行，useLayoutEffect在需要精确控制 DOM 布局时非常有用。

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

function MyComponent() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useLayoutEffect(() => {
    function updateSize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
    updateSize();
    window.addEventListener('resize', updateSize);
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return (
    <div>
      <p>Window size: {size.width} x {size.height}</p>
    </div>
  );
}

九、`useImperativeHandle`

useImperativeHandle可以自定义暴露给父组件的实例值。通常与 forwardRef一起使用，允许在函数组件中使用 ref来暴露特定的方法或属性给父组件，useImperativeHandle为组件之间的交互提供了更多的灵活性。

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

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

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

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

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

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

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

`十、useTransition`

useTransition用于标记某些状态更新为 “过渡更新”，使得这些更新的优先级低于其他紧急更新。可以在处理大量异步数据加载或复杂状态更新时，保持用户界面的响应性，避免卡顿，useTransition有助于提高用户体验，特别是在处理耗时的操作时。

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

function SearchResults() {
  const [searchQuery, setSearchQuery] = useState('');
  const [data, setData] = useState([]);

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
    startTransition(() => {
      // 低优先级的异步数据更新
      fetchData(event.target.value).then((newData) => {
        setData(newData);
      });
    });
  };

  return (
    <div>
      <input type="text" onChange={handleSearchChange} value={searchQuery} />
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

`十一、useDebugValue`

useDebugValue主要用于在 React DevTools 中显示自定义的调试信息。可以帮助开发者在开发过程中更好地理解和调试使用了特定 Hook 的组件，useDebugValue有助于提高开发过程中的调试效率。

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

function useTemperature() {
  const [temperature, setTemperature] = useState(20);
  // 在 DevTools 中显示自定义的调试信息
  useDebugValue(temperature + '°C');
  return { temperature, setTemperature };
}

function TemperatureDisplay() {
  const { temperature } = useTemperature();
  return <div>Temperature: {temperature}</div>;
}

十二、`useDeferredValue`

useDeferredValue 可以延迟一个值的更新，使得在某些情况下可以优先处理更紧急的更新，而将不太紧急的更新延迟到稍后处理。对于性能优化有一定的帮助，在处理复杂的用户输入和数据更新场景时非常有用，特别是在处理大量频繁更新的数据时。

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

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const deferredValue = useDeferredValue(inputValue);

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>Deferred value: {deferredValue}</p>
    </div>
  );
}

十三、`useSyncExternalStore`

useSyncExternalStore允许 React 组件订阅外部数据源，并在数据源发生变化时自动更新组件。可以用于与外部状态管理库或其他非 React 特定的数据源进行集成，useSyncExternalStore为与外部数据源的集成提供了一种标准化的方式。

// 假设我们有一个外部的状态存储库：
const externalStore = {
  subscribe: (callback) => {
    // 订阅逻辑，当外部状态变化时调用 callback
  },
  getSnapshot: () => {
    // 返回当前外部状态的快照
  }
};

// 在React组件中使用
import React from 'react';

function MyComponent() {
  const snapshot = React.useSyncExternalStore(
    externalStore.subscribe,
    externalStore.getSnapshot
  );
  return <div>External state: {snapshot}</div>;
}

十四、`useId`

useId是 React 18 引入的新 Hook，用于在服务器端渲染和客户端渲染中生成唯一的 ID，以确保在不同环境下生成的 ID 是一致的。这对于无障碍功能（如表单元素的id属性与label的for属性关联）以及生成唯一的 CSS 选择器等场景很有用。

import React from 'react';

function MyComponent() {
  const id = React.useId();
  return (
    <label htmlFor={id}>Input Label</label>
    <input id={id} />
  );
}

React 的内置 Hooks 为函数式组件开发带来了巨大的便利和灵活性。通过合理地使用这些 Hooks，我们可以构建出高效、可维护的 React 应用。