当前位置：首页 > article >正文

React中九大常用Hooks总结

article 2024/11/14 2:02:56

useState()

useState用于在函数组件中管理状态。

它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值，并更新状态。

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

useEffect()

useEffect用于在函数组件中处理副作用。例如数据获取、订阅、手动更改 DOM 等

它接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，副作用函数将被调用。

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [time]);

  return <div>Time: {time}</div>;
}

useEffect和useLayoutEffect的区别

useEffect()和useLayoutEffect()主要的区别是调用时机不同。

useLayoutEffect()和componentDidMount()及componentDidUpate()一致，再react完成DOM更新后马上同步调用代码，它会阻塞页面的渲染，而useEffect()则会在页面渲染完后才会异步调用。

在实际使用中如果项避免页面抖动，可以把需要操作DOM的代码放在useLayoutEffect()中，在该函数中做DOM操作，这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流重绘的代价。

useLayoutEffect

使用场景: 处理 DOM 操作,需要同步执行

import { useLayoutEffect, useRef } from 'react';

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

  useLayoutEffect(() => {
    const element = elementRef.current;
    console.log('Element width:', element.offsetWidth);
  }, []);

  return <div ref={elementRef}>This is the element to measure</div>;
}

useCallback()

useCallback()为记忆函数，缓存函数引用,优化性能。它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用。

它接受一个回调函数和一个依赖数组，并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时，缓存的回调函数将被更新。

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

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

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

  return (
    <>
      <Child onClick={handleClick} />
      <span>Count: {count}</span>
    </>
  );
}

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

useMemo()

useMemo用于在函数组件中缓存计算结果。

它接受一个计算函数和一个依赖数组，并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时，计算函数将被重新计算。

import React, { useMemo } from 'react';

function ExpensiveComponent({ value1, value2 }) {
  const result = useMemo(() => {
    console.log('calculating result');
       return value1 * value2;
  }, [value1, value2]);

  return <div>Result: {result}</div>;
}

useCallback()与useMemo()的区别

useCallback()不会执行第一个参数函数，而是将其返回，useMemo()会执行第一个函数并且将函数执行结果返回给你。

useCallback()常用记忆时间按函数，生成记忆后的时间函数传递给子组件使用，useMemo()更适合经过函数计算得到一个确定的值，比如记忆组件。

React.memo()

接收一个组件A作为参数并返回一个组件B，如果组件B的props没有改变，则组件B会阻止组件A重新渲染。A和B本质上是同一个组件，但A是否进行重新渲染，需要由Props是否发生改变来决定。

学习视频：

Day10-03.React.memo-基础使用_哔哩哔哩_bilibili

useRef()

useRef用于在函数组件中引用DOM元素或其他值。

获取 DOM 元素引用,保存可变状态。它返回一个包含可变引用的对象。当在函数组件中传递该对象时，它将保留其引用，即使组件重新渲染。

import React, { useRef } from 'react';

function Input() {
  const inputRef = useRef(null);
  /**
   *	使用useRef()创建了一个值后，就可以将其绑定到DOM节点上，
   *	给DOM节点增加一个ref属性，将loginRef传入，则可以通过其current属性获取到DOM节点的值
  */
  
  function handleClick() {
    inputRef.current.focus();
  }

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

useContext()

useContext用于在函数组件中使用上下文。
它接受一个上下文对象并返回上下文的当前值。当上下文的值发生变化时，函数组件将重新渲染。

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

const ThemeContext = createContext('light');

function Header() {
  const theme = useContext(ThemeContext);

  return (
    <header style={{ background: theme }}>
      <h1>My App</h1>
    </header>
  );
}

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

useReducer()

useReducer用于在函数组件中管理复杂的状态。
它接受一个reducer函数和一个初始状态，并返回一个包含当前状态和一个派发操作的数组。派发操作将一个操作对象发送到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);

  function handleIncrement() {
    dispatch({ type: 'increment' });
  }

  function handleDecrement() {
    dispatch({ type: 'decrement' });
  }

  return (
    <>
      <button onClick={handleIncrement}>+</button>
      <span>{state.count}</span>
      <button onClick={handleDecrement}>-</button>
    </>
  );
}

useImperativeHandle

使用场景: 暴露组件实例方法给父组件

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

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

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

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

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

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

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