前端面试题 - 97. React hook如何模拟class组件的功能

随着React Hook的引入，函数组件在状态管理和副作用处理方面变得更强大和灵活。本文将介绍如何使用几个常见的React Hook来模拟Class组件的功能，并展示它们的用法及对应关系。

useState - 使用useState hook来管理状态

React提供了useState hook来让我们在函数组件中添加状态管理的能力。它可以替代Class组件中的this.state。useState返回一个数组，第一个元素是当前状态的值，第二个元素是一个函数，用于更新状态的值。

示例代码：

import React, { useState } from 'react';

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

  // state更新函数
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useEffect

useEffect是React Hook中用于处理副作用操作的函数，它与class组件中的生命周期方法有一些对应关系。下面是useEffect与class组件的常见生命周期方法对应关系：

1. componentDidMount - useEffect的空依赖数组

当使用空依赖数组（[]）作为useEffect的第二个参数时，useEffect的副作用函数只会在组件挂载完成后执行一次，相当于class组件的componentDidMount生命周期方法。

示例代码：

useEffect(() => {
  // 副作用操作，仅在组件挂载时执行一次
}, []);

1. componentDidUpdate - useEffect的有依赖数组

当传递一个非空的依赖数组给useEffect作为第二个参数时，useEffect的副作用函数将在依赖项发生变化后执行，类似于class组件的componentDidUpdate生命周期方法。它可以通过比较前后状态或属性来执行不同的操作。

示例代码：

useEffect(() => {
  // 副作用操作，当依赖项发生变化时执行
}, [dependency]);

1. componentWillUnmount - useEffect返回的清理函数

当需要在组件卸载时执行一些清理操作时，可以在useEffect的副作用函数内部返回一个函数。这个返回的函数会在组件卸载时调用，类似于class组件的componentWillUnmount生命周期方法。

示例代码：

useEffect(() => {
  // 副作用操作

  return () => {
    // 清理操作，组件卸载时调用
  };
}, []);

react.memo和useMemo

1. react.memo - PureComponent 或 shouldComponentUpdate

   类组件中的PureComponent或者手动实现shouldComponentUpdate方法可以用来避免不必要的重新渲染。而使用react.memo可以在函数组件中实现类似的功能。

   react.memo是一个高阶组件，它接受一个组件作为参数，并返回一个新的记忆化组件。这个记忆化组件只有在props发生变化时才会重新渲染，否则会直接复用之前的渲染结果。

示例代码：

import React, { memo } from 'react';

function MyComponent({ data }) {
  // 组件渲染逻辑
}

export default memo(MyComponent);

1. useMemo - 优化组件内的计算

   类组件中的shouldComponentUpdate方法通常用于优化性能，避免重复计算。而使用useMemo可以在函数组件中实现类似的功能。

   useMemo接受一个计算函数和依赖数组作为参数，它会缓存计算结果并在依赖项发生变化时重新计算。如果依赖项未发生变化，则直接返回上一次的缓存值。

示例代码：

import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const result = useMemo(() => {
    // 计算逻辑
  }, [a, b]);

  // 组件渲染逻辑
}