掌握 useEffect API

Hooks API是一项很棒的功能，于去年二月添加到 v16.8 版本中，它改变了我们编写 React 应用的方式。现在，我们可以更多地编写函数式组件，而不是类组件。由于函数式组件的存在，我们不再需要在构造函数中绑定任何函数。所以，今天我们来揭秘useEffect API。

这个 Hook 的作用基本上就是在你完成某些操作后渲染组件。它主要用于调用 API 或 Web 服务，或者从 API 或 Web 服务获取数据，并且需要在 DOM 更新之后执行某些操作。

useEffect Hook 基本上是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

首先，我们演示与useEffect API等效的componentDidMount。

您可以看到这两个示例之间的区别。第二个示例的代码行数比第一个示例少，并且比第一个示例更具可读性，因为我们去掉了构造函数方法。这里的关键是 useEffect 方法中的第二个参数是一个空数组，这意味着我们只运行 useEffect Hook 的第一个参数或回调函数一次，或者只在组件第一次渲染时调用它。

其次，我们演示了与useEffect API等效的componentDidUpdate。

这里需要记住的关键是，我们将searchTerm 的值传入useEffect Hook的第二个参数数组中。当searchTerm 的值发生变化时，我们会在useEffect Hook中运行回调函数。如果searchTerm的当前值为“ a”，而下次渲染时的新值为“ab” ，则 useEffect Hook会比较这两个值，判断两者是否不同，然后继续调用回调函数。

最后，我们演示了与useEffect API等效的componentWillUnmount。

在useEffect Hook第一个参数的回调函数中，我们返回一个名为Cleanup的函数，用于避免应用中的内存泄漏。在本例中，我们移除了 DOM 中的事件监听器并清除了超时设置。我编写的这个超时组件助手是一个高阶组件，如果用户未触发事件数组中的任何事件，组件到达后会将用户重定向到基本路径。在本例中，超时时间为 600 秒或 5 分钟。欢迎在您的项目中使用它，或为其添加一些功能。

感谢您阅读这篇文章。

祝大家有美好的一天😃。