函数式组件和类组件中使用 useEffect 区别

2023-09-12 08:38:19

前言

在 React 中，Hook 是一个非常强大的工具，它可以让我们在函数式组件中使用状态和生命周期函数。然而，在使用 Hook 时，也有一些需要注意的点，否则可能会导致一些问题。

Stale State

其中一个常见的问题是 stale state。所谓 stale state，是指组件的状态在渲染时已经过时了。这通常发生在组件的状态依赖于异步操作的结果时。例如，我们使用 useEffect Hook 来在组件挂载时获取数据，如果我们在数据获取完成之前渲染组件，那么组件的状态就会是过时的。

函数式组件和类组件中使用 useEffect 的区别

在函数式组件中，我们可以使用 useEffect Hook 来在组件挂载时、更新时或卸载时执行一些副作用操作。例如，我们可以使用 useEffect 来获取数据、设置定时器或添加事件监听器。

在类组件中，我们可以使用组件生命周期函数来在组件挂载时、更新时或卸载时执行一些副作用操作。例如，我们可以使用 componentDidMount 来获取数据、componentDidUpdate 来设置定时器或 componentWillUnmount 来添加事件监听器。

函数式组件和类组件中使用 useEffect 的区别在于，useEffect 是一个声明式的 API，而组件生命周期函数是一个命令式的 API。这意味着，当我们使用 useEffect 时，我们需要显式地告诉 React 组件在什么时候执行副作用操作，而在类组件中，我们只需要在组件生命周期函数中执行副作用操作即可。

总结

在使用 useEffect 时，我们需要特别注意 stale state 的问题。为了避免 stale state，我们可以使用 useEffect 的第二个参数来指定副作用操作的依赖项。当依赖项发生变化时，副作用操作就会再次执行。

注意点

在使用 Hook 时，需要注意以下几点：

不要在 useEffect 中执行异步操作。如果需要执行异步操作，可以使用 useCallback Hook 来创建一个 memoized 回调函数，然后在 useEffect 中调用这个回调函数。
不要在 useEffect 中更新组件的状态。如果需要更新组件的状态，可以使用 useState Hook 来创建一个 state 变量，然后在 useEffect 中更新这个 state 变量。
不要在 useEffect 中使用 this 。因为 useEffect 是一个声明式的 API，所以它不具备 this 上下文。如果需要使用 this 关键字，可以使用 useRef Hook 来创建一个 ref 对象，然后在 useEffect 中使用这个 ref 对象。