MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 性能优化中的Hooks实践案例

2024-09-257.5k 阅读

1. React 性能优化基础认知

在深入探讨 React 性能优化中的 Hooks 实践案例之前，我们先来回顾一下 React 性能优化的一些基础知识。React 应用的性能问题主要源于不必要的重新渲染，这可能会导致应用在处理大量数据或复杂交互时变得缓慢，用户体验不佳。

1.1 重新渲染机制

React 采用虚拟 DOM（Virtual DOM）来高效地更新实际 DOM。当组件的状态（state）或属性（props）发生变化时，React 会创建一个新的虚拟 DOM 树，并与之前的虚拟 DOM 树进行比较，这个比较过程称为“diffing”。通过找出差异，React 只更新实际 DOM 中真正需要改变的部分，从而减少了直接操作 DOM 的开销。

然而，如果组件频繁地进行不必要的重新渲染，即使虚拟 DOM 的“diffing”算法效率很高，也会消耗大量的计算资源。例如，一个父组件的状态变化，可能会导致其所有子组件都进行重新渲染，即使这些子组件的 props 并没有实际改变。

1.2 常见性能优化点

  • 减少不必要的渲染：使用 React.memo 来包裹纯函数组件，它会对组件的 props 进行浅比较，如果 props 没有变化，则阻止组件重新渲染。对于类组件，可以通过在 shouldComponentUpdate 方法中进行自定义的条件判断来控制组件是否重新渲染。
  • 优化数据获取：避免在组件的渲染函数中进行数据获取操作，因为这会导致每次渲染都重新获取数据。可以使用 useEffect Hook 在组件挂载和更新时进行数据获取，并且通过依赖数组来控制数据获取的时机。
  • 合理使用状态：尽量将状态提升到合适的组件层级，避免在不必要的子组件中维护状态。同时，减少状态的冗余，确保状态的更新是必要且最小化的。

2. Hooks 基础回顾

Hooks 是 React 16.8 引入的新特性，它允许在不编写类组件的情况下使用 state 以及其他 React 特性。

2.1 useState

useState 是最基本的 Hook 之一，用于在函数组件中添加状态。它接受一个初始状态值作为参数，并返回一个数组，数组的第一个元素是当前状态值，第二个元素是用于更新状态的函数。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在这个例子中，count 是状态值，setCount 是用于更新 count 的函数。每次点击按钮时，setCount 会被调用，导致组件重新渲染并显示新的 count 值。

2.2 useEffect

useEffect 用于在函数组件中执行副作用操作，例如数据获取、订阅事件、手动更改 DOM 等。它接受两个参数：一个是副作用函数，另一个是依赖数组（可选）。

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

function DataFetcher() {
  const [data, setData] = useState(null);
  useEffect(() => {
    // 模拟数据获取
    fetch('https://example.com/api/data')
     .then(response => response.json())
     .then(result => setData(result));
  }, []);
  return (
    <div>
      {data? <p>{JSON.stringify(data)}</p> : <p>Loading...</p>}
    </div>
  );
}

在这个例子中，useEffect 的副作用函数会在组件挂载后执行一次，因为依赖数组为空。如果依赖数组中包含某些变量，副作用函数会在这些变量发生变化时执行。

2.3 useMemo

useMemo 用于对函数的返回值进行记忆化。它接受两个参数：一个是需要记忆化的函数，另一个是依赖数组。只有当依赖数组中的值发生变化时，才会重新计算函数的返回值。

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

function ExpensiveCalculation() {
  const [number, setNumber] = useState(1);
  const result = useMemo(() => {
    // 模拟一个昂贵的计算
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return sum * number;
  }, [number]);
  return (
    <div>
      <p>Result: {result}</p>
      <input type="number" value={number} onChange={(e) => setNumber(parseInt(e.target.value, 10))} />
    </div>
  );
}

在这个例子中，result 的计算结果会被记忆化。只有当 number 发生变化时，才会重新计算 result。如果没有 useMemo，每次 number 变化或组件重新渲染时，都会执行昂贵的计算。

2.4 useCallback

useCallback 用于对函数进行记忆化。它接受两个参数：一个是需要记忆化的函数，另一个是依赖数组。只有当依赖数组中的值发生变化时，才会重新创建函数。

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

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

function ParentComponent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

在这个例子中，handleClick 函数会被记忆化。如果没有 useCallback，每次 ParentComponent 重新渲染时，handleClick 都会是一个新的函数实例，这可能会导致 ChildComponent 不必要的重新渲染（如果 ChildComponent 依赖于 props.onClick 的引用相等性）。

3. 使用 Hooks 进行性能优化的实践案例

3.1 优化列表渲染

假设我们有一个展示大量用户数据的列表，每个用户项包含用户名、年龄等信息。当用户数据发生变化时，我们希望只更新有变化的用户项，而不是整个列表重新渲染。

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

// 模拟用户数据获取
const fetchUsers = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'User1', age: 25 },
        { id: 2, name: 'User2', age: 30 },
        { id: 3, name: 'User3', age: 35 }
      ]);
    }, 1000);
  });
};

function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {user.age}
        </li>
      ))}
    </ul>
  );
}

目前这个列表渲染在性能上存在一些问题。如果 users 数组发生变化，即使只有一个用户的信息改变，整个列表也会重新渲染。我们可以通过 React.memo 和 useMemo 来优化。

首先，创建一个单独的 UserListItem 组件，并使用 React.memo 包裹：

import React from'react';

const UserListItem = React.memo(({ user }) => {
  return (
    <li>
      {user.name} - {user.age}
    </li>
  );
});

export default UserListItem;

然后，在 UserList 组件中使用 UserListItem 并结合 useMemo：

import React, { useState, useEffect, useMemo } from'react';
import UserListItem from './UserListItem';

// 模拟用户数据获取
const fetchUsers = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'User1', age: 25 },
        { id: 2, name: 'User2', age: 30 },
        { id: 3, name: 'User3', age: 35 }
      ]);
    }, 1000);
  });
};

function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  const memoizedUsers = useMemo(() => users, [users]);

  return (
    <ul>
      {memoizedUsers.map(user => (
        <UserListItem key={user.id} user={user} />
      ))}
    </ul>
  );
}

export default UserList;

通过这种方式，UserListItem 组件只有在其 props.user 发生变化时才会重新渲染。useMemo 确保 memoizedUsers 只有在 users 实际发生变化时才会重新计算，进一步优化了性能。

3.2 优化数据获取

考虑一个需要根据用户输入动态获取数据的场景。例如，用户在搜索框中输入关键字，应用根据关键字获取相关的搜索结果。

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

const searchAPI = (keyword) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { title: `Result 1 for ${keyword}`, content: 'Some content' },
        { title: `Result 2 for ${keyword}`, content: 'Some other content' }
      ]);
    }, 1000);
  });
};

function Search() {
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (keyword) {
      searchAPI(keyword).then(setResults);
    } else {
      setResults([]);
    }
  }, [keyword]);

  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map(result => (
          <li key={result.title}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，每次 keyword 变化都会触发数据获取。如果用户快速输入多个字符，会导致频繁的 API 请求，这不仅浪费资源，还可能导致用户体验不佳。我们可以使用 useDebounce Hook 来优化。

首先，创建一个 useDebounce Hook：

import { useState, useEffect } from'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

然后，在 Search 组件中使用 useDebounce：

import React, { useState, useEffect } from'react';
import useDebounce from './useDebounce';

const searchAPI = (keyword) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { title: `Result 1 for ${keyword}`, content: 'Some content' },
        { title: `Result 2 for ${keyword}`, content: 'Some other content' }
      ]);
    }, 1000);
  });
};

function Search() {
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 500);
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (debouncedKeyword) {
      searchAPI(debouncedKeyword).then(setResults);
    } else {
      setResults([]);
    }
  }, [debouncedKeyword]);

  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map(result => (
          <li key={result.title}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

通过 useDebounce，只有当用户停止输入 500 毫秒后，才会触发数据获取，减少了不必要的 API 请求，提高了性能。

3.3 优化复杂组件交互

假设我们有一个包含多个子组件的复杂表单组件，每个子组件都有自己的状态和交互逻辑。当用户在表单中进行操作时，可能会导致整个表单组件频繁重新渲染，影响性能。

import React, { useState } from'react';

function InputComponent({ value, onChange }) {
  return <input type="text" value={value} onChange={onChange} />;
}

function CheckboxComponent({ checked, onChange }) {
  return <input type="checkbox" checked={checked} onChange={onChange} />;
}

function ComplexForm() {
  const [inputValue, setInputValue] = useState('');
  const [isChecked, setIsChecked] = useState(false);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <form>
      <InputComponent value={inputValue} onChange={handleInputChange} />
      <CheckboxComponent checked={isChecked} onChange={handleCheckboxChange} />
    </form>
  );
}

在这个例子中，ComplexForm 组件会因为 inputValue 或 isChecked 的变化而重新渲染整个组件，包括 InputComponent 和 CheckboxComponent。我们可以通过 useReducer 和 useContext 来优化。

首先，创建一个 FormContext：

import React from'react';

const FormContext = React.createContext();

export default FormContext;

然后，创建一个 formReducer：

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_INPUT':
      return {
      ...state,
        inputValue: action.payload
      };
    case 'TOGGLE_CHECKBOX':
      return {
      ...state,
        isChecked:!state.isChecked
      };
    default:
      return state;
  }
};

接下来，在 ComplexForm 组件中使用 useReducer 和 useContext：

import React, { useReducer, useContext } from'react';
import FormContext from './FormContext';
import formReducer from './formReducer';

function InputComponent() {
  const { state, dispatch } = useContext(FormContext);
  const handleInputChange = (e) => {
    dispatch({ type: 'UPDATE_INPUT', payload: e.target.value });
  };
  return <input type="text" value={state.inputValue} onChange={handleInputChange} />;
}

function CheckboxComponent() {
  const { state, dispatch } = useContext(FormContext);
  const handleCheckboxChange = () => {
    dispatch({ type: 'TOGGLE_CHECKBOX' });
  };
  return <input type="checkbox" checked={state.isChecked} onChange={handleCheckboxChange} />;
}

function ComplexForm() {
  const initialState = {
    inputValue: '',
    isChecked: false
  };
  const [state, dispatch] = useReducer(formReducer, initialState);

  return (
    <FormContext.Provider value={{ state, dispatch }}>
      <form>
        <InputComponent />
        <CheckboxComponent />
      </form>
    </FormContext.Provider>
  );
}

export default ComplexForm;

通过这种方式，InputComponent 和 CheckboxComponent 只会在与它们相关的状态部分发生变化时才会重新渲染，而不是整个 ComplexForm 组件重新渲染，提高了组件交互的性能。

4. 性能监测与优化效果评估

在进行性能优化后，我们需要对优化效果进行监测和评估，以确保达到了预期的性能提升。

4.1 使用 React DevTools

React DevTools 是一个强大的浏览器扩展，它可以帮助我们分析组件的渲染情况。在 React DevTools 的 Profiler 标签中，我们可以录制一段组件渲染的性能数据。通过分析这些数据，我们可以看到哪些组件渲染时间较长，以及组件重新渲染的频率。

例如，在优化列表渲染的案例中，使用 React DevTools 录制性能数据。优化前，我们可能会看到整个 UserList 组件在每次 users 数组变化时都重新渲染，包括所有的 UserListItem。而优化后，UserListItem 只有在其 props.user 真正发生变化时才会重新渲染，这在 React DevTools 的性能数据中会有明显体现。

4.2 使用 Lighthouse

Lighthouse 是 Google Chrome 浏览器提供的一个开源工具，用于评估网页的性能、可访问性等方面。我们可以在 Chrome 开发者工具中打开 Lighthouse，对 React 应用进行性能测试。

Lighthouse 会给出一系列的性能指标，如首次内容绘制时间、最大内容绘制时间等。在优化数据获取的案例中，优化前频繁的 API 请求可能会导致页面加载时间较长，Lighthouse 的性能得分较低。优化后，由于减少了不必要的 API 请求，页面加载速度加快，Lighthouse 的性能得分会相应提高。

4.3 手动计时

在一些简单的场景下，我们也可以通过手动计时的方式来评估性能优化效果。例如，在优化复杂组件交互的案例中，我们可以在优化前后分别记录用户操作触发组件重新渲染的时间。通过对比这些时间，直观地了解优化是否有效。

import React, { useState } from'react';

function ManualTimingComponent() {
  const [startTime, setStartTime] = useState(null);
  const [elapsedTime, setElapsedTime] = useState(null);

  const handleClick = () => {
    setStartTime(new Date().getTime());
    // 模拟一些操作导致组件重新渲染
    setTimeout(() => {
      const endTime = new Date().getTime();
      setElapsedTime(endTime - startTime);
    }, 1000);
  };

  return (
    <div>
      <button onClick={handleClick}>Trigger re - render</button>
      {elapsedTime && <p>Elapsed time: {elapsedTime} ms</p>}
    </div>
  );
}

在优化前和优化后分别运行这个组件，记录每次操作的 elapsedTime，通过对比这些数据来评估性能优化的效果。

5. 常见性能优化误区及避免方法

在使用 Hooks 进行性能优化的过程中，有一些常见的误区需要注意。

5.1 过度使用 useMemo 和 useCallback

虽然 useMemo 和 useCallback 可以有效地减少不必要的重新计算和函数创建，但过度使用它们可能会导致代码可读性变差，并且在某些情况下反而会降低性能。

例如，在一个简单的无状态组件中，如果函数的计算成本很低，使用 useMemo 或 useCallback 可能会增加额外的开销。应该根据实际情况，只在真正需要记忆化的地方使用它们。

5.2 错误设置 useEffect 的依赖数组

useEffect 的依赖数组设置不当会导致副作用函数执行的时机不正确。如果依赖数组中遗漏了某些变量，可能会导致副作用函数没有在这些变量变化时执行，从而导致数据不一致。

例如：

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

function WrongDependencyComponent() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  useEffect(() => {
    setMessage(`Count is ${count}`);
  }, []);

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在这个例子中，message 不会随着 count 的变化而更新，因为 useEffect 的依赖数组为空。应该将 count 添加到依赖数组中：

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

function CorrectDependencyComponent() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  useEffect(() => {
    setMessage(`Count is ${count}`);
  }, [count]);

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

5.3 忽略 React.memo 的浅比较限制

React.memo 对 props 进行浅比较，这意味着如果 props 是一个对象或数组，即使对象或数组内部的内容发生了变化，但引用没有改变，React.memo 包裹的组件也不会重新渲染。

例如：

import React, { useState } from'react';

const MemoizedComponent = React.memo(({ data }) => {
  return <p>{JSON.stringify(data)}</p>;
});

function ParentComponent() {
  const [data, setData] = useState({ value: 'initial' });
  const handleClick = () => {
    data.value = 'updated';
    setData(data);
  };

  return (
    <div>
      <MemoizedComponent data={data} />
      <button onClick={handleClick}>Update data</button>
    </div>
  );
}

在这个例子中，点击按钮后，data 的内部值发生了变化，但由于引用没有改变，MemoizedComponent 不会重新渲染。正确的做法是创建一个新的对象：

import React, { useState } from'react';

const MemoizedComponent = React.memo(({ data }) => {
  return <p>{JSON.stringify(data)}</p>;
});

function ParentComponent() {
  const [data, setData] = useState({ value: 'initial' });
  const handleClick = () => {
    setData({...data, value: 'updated' });
  };

  return (
    <div>
      <MemoizedComponent data={data} />
      <button onClick={handleClick}>Update data</button>
    </div>
  );
}

通过避免这些常见误区，可以更加有效地使用 Hooks 进行 React 性能优化，打造高性能的 React 应用。