React Hooks 下 render 次数的优化方法解析

见解分享

2023-09-23 13:50:48

React Hooks 简介

Hooks 是 React 16.8 版本引入的新特性，它允许你在函数组件中使用状态和生命周期方法。Hooks 使 React 代码更加简洁和易于维护，因此受到了广大开发者的欢迎。

为什么要优化 render 次数？

在 React 中，每次状态或 props 发生变化时，都会触发组件的 render 方法。如果组件的 render 方法过于复杂，或者有太多的子组件，就会导致渲染性能下降。

如何优化 render 次数？

有几种方法可以优化 React 组件的 render 次数，包括：

使用 useEffect 钩子来处理副作用，避免在每次渲染中都执行副作用操作。
使用 useMemo 钩子来缓存函数的返回值，避免在每次渲染中都重新计算函数。
使用 useCallback 钩子来缓存函数的引用，避免在每次渲染中都重新创建函数。

`useEffect` 钩子

useEffect 钩子用于处理副作用，例如网络请求、定时器和 DOM 操作。useEffect 钩子接受两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载时、组件更新时或组件卸载时执行。依赖数组指定了哪些状态或 props 会触发回调函数的执行。

例如，以下代码使用 useEffect 钩子来在组件挂载时和组件更新时执行网络请求：

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => <p>{item}</p>)}
    </div>
  );
}

export default App;

`useMemo` 钩子

useMemo 钩子用于缓存函数的返回值。useMemo 钩子接受两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载时或组件更新时执行。依赖数组指定了哪些状态或 props 会触发回调函数的执行。

例如，以下代码使用 useMemo 钩子来缓存一个计算密集型的函数：

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

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

  const fibonacci = useMemo(() => {
    let a = 0;
    let b = 1;
    let c;

    for (let i = 0; i < count; i++) {
      c = a + b;
      a = b;
      b = c;
    }

    return c;
  }, [count]);

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

export default App;

`useCallback` 钩子

useCallback 钩子用于缓存函数的引用。useCallback 钩子接受两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载时或组件更新时执行。依赖数组指定了哪些状态或 props 会触发回调函数的执行。

例如，以下代码使用 useCallback 钩子来缓存一个事件处理函数：

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

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

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
}

export default App;