如何对 React 函数式组件进行优化

前端

2023-11-23 07:49:35

函数式组件的优势

React 函数式组件相对于类组件有许多优势，例如：

更容易理解和维护
更容易测试
性能更好

函数式组件的性能优化

函数式组件的性能优化主要集中在以下几个方面：

减少不必要的渲染
使用备忘录 Hook
使用回调 Hook

减少不必要的渲染

函数式组件的渲染是由其 props 和 state 决定的。如果 props 或 state 发生变化，组件就会重新渲染。然而，并不是所有的 props 或 state 的变化都会导致组件重新渲染。例如，如果 props 或 state 的变化不影响组件的输出，那么组件就不需要重新渲染。

为了减少不必要的渲染，我们可以使用以下技巧：

使用 shouldComponentUpdate 生命周期方法来控制组件是否重新渲染。
使用 PureComponent 来创建纯组件。纯组件只会在 props 或 state 发生变化时重新渲染。
使用备忘录 Hook来缓存组件的输出。

使用备忘录 Hook

备忘录 Hook 可以缓存组件的输出，从而减少不必要的渲染。备忘录 Hook 有两种：useMemo 和 useCallback。

useMemo 可以缓存一个函数的返回值。
useCallback 可以缓存一个函数的引用。

使用回调 Hook

回调 Hook 可以将函数作为参数传递给组件。回调 Hook 有两种：useEffect 和 useRef。

useEffect 可以执行副作用操作，例如发送网络请求或更新 DOM。
useRef 可以创建一个可变引用，该引用可以在组件的生命周期中保持不变。

备忘录 Hook 和回调 Hook 的比较

备忘录 Hook 和回调 Hook都是用于提高组件性能的 Hook。然而，它们之间存在一些差异。

备忘录 Hook可以缓存组件的输出，从而减少不必要的渲染。回调 Hook不能缓存组件的输出。
备忘录 Hook只能缓存函数的返回值和函数的引用。回调 Hook可以执行副作用操作和创建可变引用。

函数式组件的性能优化示例

下面是一个使用备忘录 Hook和回调 Hook来优化函数式组件的示例：

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

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

  const fetchTodos = useCallback(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const data = await response.json();
    setTodos(data);
  }, []);

  useEffect(() => {
    fetchTodos();
  }, []);

  const todoItems = useMemo(() => {
    return todos.map((todo) => {
      return <li key={todo.id}>{todo.title}</li>;
    });
  }, [todos]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment Count</button>
      <ul>
        {todoItems}
      </ul>
    </div>
  );
};

export default MyComponent;