【React】react函数式编程常用hooks讲解

React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。 React 中常用的 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect等。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具。

1. useState

1.1 基本用法

useState 是React中最基础的Hook之一，它允许你在函数组件中添加React状态。使用useState时，你需要传入一个初始状态值，然后它将返回一个数组，包含当前的状态值和一个更新该状态的函数。

用法：useMemo(callback, dependencies)

import React, { useState } from 'react';

function Example() {
  // 声明一个状态变量count，初始值为0
  const [count, setCount] = useState(0);
  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

1.2 状态更新

状态更新可以通过setCount函数来实现，该函数接收新的状态值作为参数。当调用setCount时，React将重新渲染组件并使用传递的新值更新状态。

setCount(10); // 直接设置状态为10
setCount(count + 1); // 基于当前状态进行更新

状态更新是异步的，如果需要基于当前状态进行多次更新，建议使用函数式更新，以确保状态更新的准确性。

1.3 函数式更新

函数式更新是useState的一个重要特性，它允许你基于当前状态来更新状态。这在并发模式下尤为重要，因为它确保了状态更新的一致性。

setCount(prevCount => prevCount + 1);

当新状态依赖于前一个状态时，使用函数式更新可以避免潜在的bug。例如，在快速连续点击按钮时，直接更新状态可能会导致状态更新丢失或错误。函数式更新确保了每次更新都是基于最新的状态值进行的。

2. useEffect

2.1 副作用处理

useEffect 是React提供的一个Hook，用于处理函数组件中的副作用操作，比如数据获取、订阅或手动更改DOM。它与类组件中的componentDidMount、componentDidUpdate和componentWillUnmount具有相似的功能。

用法：useEffect(effect, dependencies)

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 执行副作用操作，比如发起API请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));

    // 可选的返回一个清理函数
    return () => {
      console.log('执行清理操作');
    };
  }, []); // 空依赖数组意味着这个effect只在组件挂载和卸载时运行
}

2.2 依赖项管理

useEffect 的第二个参数是一个依赖项数组，当数组中的变量发生变化时，effect将重新执行。这使得开发者可以精确控制effect的执行时机。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 当count变化时，effect重新执行

依赖项数组为空数组[]时，表示这个effect只在组件挂载时执行一次，类似于componentDidMount。

2.3 清理机制

useEffect 允许返回一个函数，这个返回的函数会在组件卸载和effect重新执行之前执行，用于执行清理工作，防止内存泄漏或其他副作用。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Interval');
  }, 1000);

  // 返回一个清理函数
  return () => {
    clearInterval(timer);
  };
}, []); // 这个effect只在组件挂载时执行，并在组件卸载时清理

通过这种方式，useEffect 提供了一种灵活的方法来处理组件的生命周期事件，使得函数组件能够实现类似于类组件的功能。

3. useContext

3.1 上下文创建与使用

useContext 是React提供的一个Hook，它允许你在函数组件中访问上下文（Context）。上下文是一种全局数据共享的方式，可以避免在多层嵌套的组件树中通过层层传递props。

用法：useContext(Context)

import React, { useContext } from 'react';

// 创建上下文
const MyContext = React.createContext(defaultValue);

// 在组件中使用上下文
function MyComponent() {
  const value = useContext(MyContext);
  // 根据获取的上下文值进行操作
}

上下文的创建

创建上下文时，你需要使用React.createContext()函数，并提供一个默认值。这个默认值会在组件树中没有对应的Provider时作为回退值。

上下文的使用

在组件中，你可以通过useContext(MyContext)来获取上下文的当前值。这使得任何层级的组件都可以轻松访问到上下文，而不需要通过层层传递props。

3.2 跨组件状态共享

useContext 特别适用于实现跨组件的状态共享，尤其是在大型应用中，可以减少不必要的props传递，提高组件的复用性和可维护性。

// 在顶层组件中包裹上下文

  


// 在任何子组件中使用上下文
function ChildComponent() {
  const contextValue = useContext(MyContext);
  // 使用contextValue进行渲染或其他操作
}

跨组件共享状态的优势

• 减少Props传递：无需在每个层级手动传递props，上下文可以自动向下流动。
• 响应式更新：当上下文的值发生变化时，所有消费该上下文的组件都会响应式地重新渲染。
• 代码组织：使得状态逻辑更加集中，便于管理和维护。

注意事项

• 避免过度使用：过度使用上下文可能会导致难以追踪的数据流和性能问题，建议仅在需要跨多层组件共享数据时使用。
• 使用合适的默认值：为createContext提供合适的默认值，以便在没有Provider的情况下，组件能够正常渲染。
• 与useMemo和useCallback结合使用：当上下文值作为函数或memoized值的依赖时，可以避免不必要的重新计算或渲染。

4. useReducer

4.1 状态逻辑管理

useReducer 是React提供的一个Hook，用于管理更复杂的组件状态逻辑。与 useState 不同，useReducer 将状态更新逻辑放在了组件外部，这使得状态逻辑更加集中和可预测。

基本用法

useReducer 接收两个参数：一个形如 (state, action) => newState 的 reducer 函数，以及一个初始状态值。它返回一个数组，包含当前的状态和一个分发 action 的 dispatch 函数。

用法：useReducer(reducer, initialState)

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:
      throw new Error();
  }
}

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

  return (
    

      Count: {state.count}
       dispatch({ type: 'decrement' })}>-
       dispatch({ type: 'increment' })}>+
    
  );
}

状态逻辑集中管理

使用 useReducer 可以使得状态逻辑更加集中，特别是在状态逻辑较为复杂或者有多个子值的情况下。通过将状态逻辑移出组件，我们可以更容易地进行测试和调试。

性能优化

useReducer 还有助于性能优化。由于 reducer 函数完全决定了状态如何根据 action 进行转换，我们可以避免不必要的渲染。此外，useReducer 可以与 React.memo 或 useMemo 结合使用，进一步优化性能。

4.2 action设计

Action 是 useReducer 中的一个关键概念，它是一个描述状态如何变化的对象，通常包含一个 type 字段和一个可选的 payload 字段。

Action设计原则

• 唯一性：每个 action type 应该是唯一的，以避免混淆。
• 简洁性：action 应该是自描述的，通过 type 名称即可清晰表达其意图。
• 标准化：在大型应用中，可以定义一个 action 类型的标准，以保持代码的一致性。

使用Payload

Action 的 payload 字段可以用来传递额外的数据，这些数据可以是新的状态值、更新状态所需的参数等。

dispatch({
  type: 'updateText',
  payload: newText,
});

Action Creators

为了提高代码的可读性和可维护性，通常会将 action 创建逻辑抽象成 action creators 函数。

function incrementCount() {
  return { type: 'increment' };
}

function decrementCount() {
  return { type: 'decrement' };
}

// 在组件中使用
dispatch(incrementCount());

通过这种方式，我们可以更容易地管理和维护状态更新逻辑，同时也使得组件的逻辑更加清晰。

5. useCallback

5.1 函数缓存

useCallback 是React提供的一个Hook，它能够缓存传入的函数，避免在每次渲染时都创建新的函数实例，从而提高性能。

基本用法

useCallback 接收两个参数：一个是要缓存的函数和一个依赖项数组。只有当依赖项数组中的变量发生变化时，useCallback 才会返回一个新的函数。

用法：useCallback(callback, [dependencies])

import React, { useCallback } from 'react';

function ComponentA() {
  // 缓存的函数，只有当inputValue变化时才会重新创建
  const handleClick = useCallback(() => {
    console.log('Button clicked: ', inputValue);
  }, [inputValue]);

  return Click me;
}

避免不必要的重新渲染

在某些情况下，如果父组件将回调函数作为prop传递给子组件，子组件可能会因为新的函数引用而重新渲染，即使回调函数的逻辑没有变化。使用 useCallback 可以避免这种情况，因为它确保只有在依赖项变化时才创建新的函数实例。

5.2 依赖项与性能优化

useCallback 的依赖项数组允许开发者明确指定哪些变量的变化会导致回调函数的更新。这不仅可以避免不必要的渲染，还可以与 React.memo 或 useMemo 结合使用，进一步提升性能。

依赖项的选择

依赖项的选择应该基于函数需要引用的变量。如果函数不依赖于任何外部变量，可以省略依赖项数组，或者使用 [] 来表示。

与 React.memo 结合使用

当组件使用 React.memo 进行记忆化时，结合 useCallback 可以进一步减少不必要的渲染。

const ComponentB = React.memo(function ComponentB(props) {
  // 回调函数仅在props变化时更新
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, [props]);

  return Click;
});

与 useMemo 结合使用

useCallback 也可以与 useMemo 结合使用，创建记忆化的值或计算结果，以避免重复计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  console.log(memoizedValue);
}, [memoizedValue]);

通过这种方式，useCallback 可以帮助开发者编写更高效、更易于维护的代码，特别是在处理复杂的组件树和优化性能时。

6. useMemo

6.1 计算结果缓存

useMemo 是React提供的一个Hook，它用于缓存复杂的计算结果，避免在每次渲染时都进行昂贵的计算，从而提高组件的性能。

基本用法

useMemo 接收两个参数：一个是要记忆化的计算函数和一个依赖项数组。只有当依赖项数组中的变量发生变化时，计算函数才会被执行。

用法：useMemo(callback, dependencies)

import React, { useMemo } from 'react';

function Component() {
  // 缓存计算结果，只有当inputValue变化时才会重新计算
  const memoizedValue = useMemo(() => computeExpensiveValue(inputValue), [inputValue]);

  return 
{memoizedValue}
;
}

避免不必要的计算

在组件渲染过程中，如果某些计算结果不会频繁变化，使用 useMemo 可以避免不必要的重复计算，减少性能损耗。

6.2 依赖项控制

useMemo 的依赖项数组允许开发者明确指定哪些变量的变化会导致重新计算。这不仅可以避免不必要的计算，还可以与 React.memo 或 useCallback 结合使用，进一步提升性能。

依赖项的选择

依赖项的选择应该基于计算结果依赖的变量。如果计算结果不依赖于任何外部变量，可以省略依赖项数组，或者使用 [] 来表示。

与 React.memo 结合使用

当组件使用 React.memo 进行记忆化时，结合 useMemo 可以进一步减少不必要的渲染和计算。

const MemoizedComponent = React.memo(function MemoizedComponent(props) {
  // 计算结果仅在props变化时重新计算
  const memoizedValue = useMemo(() => computeExpensiveValue(props.value), [props.value]);

  return 
{memoizedValue}
;
});

与 useCallback 结合使用

useMemo 也可以与 useCallback 结合使用，创建记忆化的回调函数，以避免重复创建函数实例。

const memoizedCallback = useMemo(
  () => () => {
    console.log('Callback called with value:', memoizedValue);
  },
  [memoizedValue]
);

通过这种方式，useMemo 可以帮助开发者编写更高效、更易于维护的代码，特别是在处理复杂的计算和优化性能时。

7. useRef

7.1 DOM元素引用

useRef 提供了一种方式，允许函数组件访问DOM元素或保存任何可变值。与传统的类组件中通过this.refName访问DOM不同，useRef创建的引用与组件的生命周期无关，它不会随着组件的重新渲染而重新创建。

创建引用

创建引用非常简单，只需要传递一个初始值给useRef。

用法：useRef(initialValue)

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null); // 创建一个引用，初始值为null

  function focusInput() {
    inputRef.current.focus(); // 使用引用来聚焦输入框
  }

  return (
    

      
      Focus Input
    
  );
}

访问DOM元素

useRef最常见的用途是访问DOM元素，例如获取输入框的焦点或测量元素尺寸。

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

引用的持久性

useRef创建的引用在组件的整个生命周期内保持不变，这使得它成为保存任何可变值的理想选择。

7.2 可变数据存储

除了DOM元素，useRef还可以用于存储可变数据，这在函数组件中非常有用，因为它们没有实例对象来保存状态。

存储可变数据

你可以使用useRef来存储任何可变的数据，如计时器ID或动态添加的元素集合。

const intervalRef = useRef(); // 用于存储计时器ID

useEffect(() => {
  intervalRef.current = setInterval(() => {
    console.log('Interval triggered');
  }, 1000);

  return () => {
    clearInterval(intervalRef.current); // 清理计时器
  };
}, []);

与状态的区别

与useState不同，useRef中的数据不会触发组件的重新渲染。因此，它适用于保存那些不应该引起界面更新的数据。

引用的更新

useRef的current属性可以在渲染之间被更新，这使得它成为处理可变数据的理想选择。

inputRef.current = document.getElementById('my-input'); // 动态更新引用

通过useRef，React函数组件能够处理DOM操作和可变数据，提供了与类组件相似的能力，同时保持了函数组件的简洁和高效。

8. useLayoutEffect

8.1 DOM更新后同步执行

useLayoutEffect Hook 与 useEffect 类似，但它的副作用会在所有的DOM更新同步完成后立即执行。这意味着它适合执行那些需要在浏览器绘制之前运行的副作用操作。

用法：useLayoutEffect(effect, [dependencies])

基本用法

import React, { useLayoutEffect } from 'react';

function Component() {
  useLayoutEffect(() => {
    // 执行DOM操作，例如获取元素尺寸
    const element = document.getElementById('some-id');
    console.log(element.offsetWidth);
  }, []); // 空依赖数组，表示只在挂载时执行
}

同步与异步的区别

useLayoutEffect 与 useEffect 的主要区别在于执行时机。useEffect 的副作用是异步执行的，而 useLayoutEffect 是同步执行的。这使得 useLayoutEffect 更适合执行那些需要立即响应DOM变化的操作。

8.2 与useEffect的区别

虽然 useLayoutEffect 和 useEffect 都可以处理副作用，但它们在执行时机和适用场景上有所不同。

执行时机

• useEffect: 在DOM更新完成后，异步执行副作用。
• useLayoutEffect: 在DOM更新完成后，立即同步执行副作用。

适用场景

• useEffect: 适用于执行数据获取、状态更新等不需要立即响应DOM变化的操作。
• useLayoutEffect: 适用于执行DOM尺寸计算、浏览器渲染优化等需要立即响应DOM变化的操作。

性能考虑

由于 useLayoutEffect 是同步执行的，如果副作用操作非常耗时，可能会阻塞浏览器渲染，影响性能。因此，开发者需要根据具体场景谨慎选择使用 useEffect 还是 useLayoutEffect。

结合使用

在某些情况下，useEffect 和 useLayoutEffect 可以结合使用，以实现更复杂的副作用逻辑。

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

function Component() {
  useLayoutEffect(() => {
    // 执行需要立即响应DOM变化的操作
  }, []);
  
  useEffect(() => {
    // 执行不需要立即响应DOM变化的操作
  }, []);
}

通过这种方式，开发者可以根据不同的副作用需求，选择合适的Hook进行处理，以达到最佳性能和效果。