随着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组件的常见生命周期方法对应关系：
- componentDidMount – useEffect的空依赖数组
当使用空依赖数组（[]）作为useEffect的第二个参数时，useEffect的副作用函数只会在组件挂载完成后执行一次，相当于class组件的componentDidMount生命周期方法。
示例代码：
useEffect(() => {
// 副作用操作，仅在组件挂载时执行一次
}, []);
- componentDidUpdate – useEffect的有依赖数组
当传递一个非空的依赖数组给useEffect作为第二个参数时，useEffect的副作用函数将在依赖项发生变化后执行，类似于class组件的componentDidUpdate生命周期方法。它可以通过比较前后状态或属性来执行不同的操作。
示例代码：
useEffect(() => {
// 副作用操作，当依赖项发生变化时执行
}, [dependency]);
- componentWillUnmount – useEffect返回的清理函数
当需要在组件卸载时执行一些清理操作时，可以在useEffect的副作用函数内部返回一个函数。这个返回的函数会在组件卸载时调用，类似于class组件的componentWillUnmount生命周期方法。
示例代码：
useEffect(() => {
// 副作用操作
return () => {
// 清理操作，组件卸载时调用
};
}, []);
react.memo和useMemo
-
react.memo – PureComponent 或 shouldComponentUpdate
类组件中的PureComponent或者手动实现shouldComponentUpdate方法可以用来避免不必要的重新渲染。而使用react.memo可以在函数组件中实现类似的功能。
react.memo是一个高阶组件，它接受一个组件作为参数，并返回一个新的记忆化组件。这个记忆化组件只有在props发生变化时才会重新渲染，否则会直接复用之前的渲染结果。
示例代码：
import React, { memo } from 'react';
function MyComponent({ data }) {
// 组件渲染逻辑
}
export default memo(MyComponent);
-
useMemo – 优化组件内的计算
类组件中的shouldComponentUpdate方法通常用于优化性能，避免重复计算。而使用useMemo可以在函数组件中实现类似的功能。
useMemo接受一个计算函数和依赖数组作为参数，它会缓存计算结果并在依赖项发生变化时重新计算。如果依赖项未发生变化，则直接返回上一次的缓存值。
示例代码：
import React, { useMemo } from 'react';
function MyComponent({ a, b }) {
const result = useMemo(() => {
// 计算逻辑
}, [a, b]);
// 组件渲染逻辑
}
