React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React常用Hooks

React中的常用Hooks分享

作者：demo123567

React 提供了许多常用的 Hooks，用于在函数组件中添加状态管理、副作用处理和其他功能，本文主要介绍了其中几个常用的，需要的可以收藏一下

useState

useSate用于在函数组件中添加状态管理。它返回一个状态值和更新该状态值的函数。 使用时一些特点和注意事项

import { Button } from 'antd';
import React, { useState } from 'react';
const Test = (props: any) => {
    const [count, setCount] = useState(0);
    const onChange = () => {
        setCount(count + 1);
        // 异步更新有时候会不生效,需要这样写
        setCount(pre => pre + 1);
    }
    return (
        <div>
            {count}
            <Button onClick={onChange}>点击</Button>
        </div>
    )
}
export default Test;

useEffect

用于处理副作用，例如数据获取、订阅、事件处理等。它在组件渲染完成后执行，并可以在组件更新时重新执行。 useEffect 是 React 中常用的 Hook 之一，用于处理副作用操作，例如数据获取、订阅、事件监听等。useEffect 在组件渲染后执行，并可以在组件更新时重新执行。

useEffect 接受两个参数：一个副作用函数和一个依赖项数组。

副作用函数是在组件渲染后执行的函数。它可以包含任何副作用操作，例如订阅事件、发送网络请求、操作 DOM 等。该函数可以返回一个清理函数，用于在组件卸载或重新渲染之前执行清理操作。

依赖项数组是一个可选的参数，用于指定副作用函数依赖的值。当依赖项数组发生变化时，useEffect 将重新执行副作用函数。如果不提供依赖项数组，副作用函数将在每次组件更新时都执行。如果传入一个空数组 []，副作用函数将只在组件首次渲染后执行，不会重新执行。

以下是 useEffect 的基本用法：

import { useEffect } from 'react';
function MyComponent() {
// 无依赖项，会一值执行
 useEffect(() => {
  // 操作
  });
// 依赖项为空,组件初始化会执行一次
useEffect(() => {
  // 操作
  },[]);
  // 依赖于某个变量或函数，在依赖项发生变化后触发
  useEffect(() => {
    // 在组件渲染后执行副作用操作
    // 返回一个清理函数（可选）
    return () => {
     // 在组件卸载或重新渲染之前执行清理操作
    //该清理函数将在组件卸载或重新渲染之前执行
    };
  }, [/* 依赖项数组 */]);
  return (
   <div></div>
  );
}

下面是一些关于 useEffect 的常见用法和注意事项：

useContext

当使用 useContext Hook 时，可以方便地在 React 组件中访问全局的上下文数据。下面是一个使用 useContext 的简单例子：

首先，创建一个上下文对象：

import React, { createContext } from 'react';
// 创建上下文对象
const MyContext = createContext();
// 上下文提供器
function MyContextProvider({ children }) {
  const sharedData = 'Shared Data';
  return (
    <MyContext.Provider value={sharedData}>
      {children}
    </MyContext.Provider>
  );
}

在上面的例子中，创建了一个名为 MyContext 的上下文对象，并通过 MyContext.Provider 提供器将共享数据 sharedData 传递给子组件。

然后，在需要访问上下文数据的组件中使用 useContext：

import React, { useContext } from 'react';
function MyComponent() {
  const sharedData = useContext(MyContext);
  return (
    <div>
      Shared Data: {sharedData}
    </div>
  );
}

在上面的例子中，创建了一个名为 MyContext 的上下文对象，并通过 MyContext.Provider 提供器将共享数据 sharedData 传递给子组件。

然后，在需要访问上下文数据的组件中使用 useContext：

import React, { useContext } from 'react';
function MyComponent() {
  const sharedData = useContext(MyContext);
  return (
    <div>
      Shared Data: {sharedData}
    </div>
  );
}

使用 useContext Hook 来获取 MyContext 上下文的值，并将其赋值给 sharedData 变量。然后，可以在组件中使用该值进行渲染或其他操作。

注意事项：

使用 useContext 可以方便地访问和共享上下文数据，但请确保在使用前提供了上下文，并注意上述的注意事项，以确保正确使用上下文功能。

useReducer

useReducer 是 React 中的一个常用 Hook，用于管理具有复杂状态逻辑的组件。它类似于 Redux 中的 reducer，接收一个状态和操作函数，并返回新的状态和派发操作的函数。

使用 useReducer 时，需要定义一个 reducer 函数和初始状态。

reducer 函数接收当前状态和一个操作（action），并根据操作的类型来更新状态。它返回更新后的状态。reducer 函数的定义类似于 Redux 中的 reducer：

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

初始状态是状态的初始值：

const initialState = { count: 0 };

然后，使用 useReducer Hook 在组件中应用 reducer：

import React, { useReducer } from 'react';
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

在上述例子中，我们使用 useReducer 定义了状态 state 和派发操作的函数 dispatch。我们可以根据操作的类型通过调用 dispatch 函数来派发操作，并由 reducer 函数来更新状态。

useReducer 在处理具有复杂状态逻辑的组件时非常有用。以下是一些使用场景：

总的来说，useReducer 适用于需要管理复杂状态逻辑的组件，并且可以帮助组织和更新状态，以及处理相关的操作。它可以代替使用 useState 的方式，特别适合管理具有多个操作类型和相关状态的组件。

useMemo

useMemo 是 React 中的一个常用 Hook，用于在组件渲染过程中进行性能优化，避免不必要的计算和重复渲染。

useMemo 接受两个参数：一个计算函数和依赖项数组。它会在组件渲染过程中执行计算函数，并将计算结果缓存起来。只有当依赖项数组中的值发生变化时，才会重新执行计算函数。

使用 useMemo 可以避免在每次渲染时重复计算耗时的操作，并且可以根据依赖项的变化来更新计算结果。以下是一些 useMemo 的常见使用场景：

import React, { useMemo, useState } from 'react';
function ExpensiveComponent() {
  // 假设这里有一个计算耗时的函数
  function calculateExpensiveValue() {
    // ... 复杂的计算逻辑 ...
    console.log('Calculating expensive value...');
    return Math.random();
  }
  // 使用 useMemo 缓存计算结果
  const expensiveValue = useMemo(() => calculateExpensiveValue(), []);
  return (
    <div>
      Expensive Value: {expensiveValue}
    </div>
  );
}
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveComponent />
    </div>
  );
}

在上述代码中，有一个 ExpensiveComponent 组件，其中包含一个计算耗时的函数 calculateExpensiveValue。为了避免在每次渲染时都重新计算 expensiveValue，使用 useMemo 缓存计算结果。

通过将 calculateExpensiveValue 函数作为 useMemo 的第一个参数，并将空数组作为依赖项传递给 useMemo，确保只在组件首次渲染时执行一次计算，并将结果缓存起来。当 count 发生变化时，ExpensiveComponent 重新渲染，但不会触发计算函数的重新执行。

useLayoutEffect

useLayoutEffect 是 React 中的一个 Hook，与 useEffect 类似，但它在 DOM 变更之后同步执行，而不是在浏览器绘制之后执行。它会在浏览器布局和绘制之前同步执行回调函数。

使用 useLayoutEffect 可以在浏览器布局完成后立即执行一些操作，以确保获取到最新的 DOM 布局信息，并在下一次渲染之前同步地更新 UI。这在需要准确地测量 DOM 元素的尺寸、位置或进行 DOM 操作时非常有用。

下面是一个使用 useLayoutEffect 的简单例子：

import React, { useRef, useLayoutEffect } from 'react';
function MeasureElement() {
  const ref = useRef();
  useLayoutEffect(() => {
    // 在浏览器布局完成后立即执行操作
    const element = ref.current;
    const { width, height } = element.getBoundingClientRect();
    // 使用测量结果进行操作
    console.log('Element size:', width, height);
  }, []);
  return <div ref={ref}>Measure me!</div>;
}
function App() {
  return (
    <div>
      <MeasureElement />
    </div>
  );
}

在上述例子中，创建了一个名为 MeasureElement 的组件，在组件内部使用了 useLayoutEffect。在 useLayoutEffect 的回调函数中，我们可以获取到被测量元素的最新布局信息，并进行相应的操作。

在这个例子中，我们使用 getBoundingClientRect 方法获取被测量元素的宽度和高度，并将结果打印到控制台。这个操作在浏览器布局完成后同步执行，确保我们获取到的尺寸是最新的。

需要注意的是，由于 useLayoutEffect 在浏览器布局之后同步执行，因此它的执行会阻塞浏览器的渲染过程。因此，只有在需要同步更新 UI 或测量 DOM 元素时才使用 useLayoutEffect，避免造成性能问题。

到此这篇关于React中的常用Hooks分享的文章就介绍到这了,更多相关React常用Hooks内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文