React Hooks 正确使用指南，避免多余渲染，提升性能

前端

2024-01-21 16:28:39

React Hooks 简介

React Hooks 是 React 16.8 中引入的一项新特性。它允许我们在函数组件中使用状态和生命周期方法。这使得函数组件更加强大和灵活，并且可以与类组件一样使用。

React Hooks 有很多优点，其中包括：

简化了组件的代码
提高了组件的可重用性
提高了组件的可测试性

React Hooks 的性能问题

虽然 React Hooks 有很多优点，但它也可能导致性能问题。这是因为 Hooks 会导致组件在不必要的时候重新渲染。

例如，以下组件使用 useState Hook 来存储一个数字 num：

import React, { useState } from "react";

const MyComponent = () => {
  const [num, setNum] = useState(0);

  const handleClick = () => {
    setNum(num + 1);
  };

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

export default MyComponent;

当点击按钮时，num 的值会增加 1。这会导致组件重新渲染。然而，重新渲染组件的子组件也会导致重新渲染，即使子组件的状态或属性没有改变。

例如，以下组件是 MyComponent 的子组件：

import React from "react";

const Header = ({ num }) => {
  return <h1>{num}</h1>;
};

export default Header;

当 MyComponent 重新渲染时，Header 也会重新渲染。即使 Header 的属性 num 没有改变。

避免多余渲染

我们可以使用一些技巧来避免多余渲染。其中一种技巧是使用 memo Hook。

memo Hook 可以防止组件在不必要的时候重新渲染。它通过比较组件的旧属性和新属性来决定是否重新渲染组件。

例如，我们可以使用 memo Hook 来包裹 Header 组件：

import React, { memo } from "react";

const Header = memo(({ num }) => {
  return <h1>{num}</h1>;
});

export default Header;

现在，Header 组件只有在 num 属性改变时才会重新渲染。

另一种避免多余渲染的技巧是使用 useMemo Hook。

useMemo Hook 可以让我们在组件中缓存一个值。这可以防止组件在每次重新渲染时都重新计算该值。

例如，我们可以使用 useMemo Hook 来缓存 num 的值：

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

const MyComponent = () => {
  const [num, setNum] = useState(0);

  const handleClick = () => {
    setNum(num + 1);
  };

  const memoizedNum = useMemo(() => num, [num]);

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

export default MyComponent;