React源码系列之四：初识hooks之useEffect

React源码系列之四：初识hooks之useEffect

前言

本次React源码参考版本为17.0.3。这是React源码系列第二篇，建议初看源码的同学从第一篇开始看起，这样更有连贯性，下面有源码系列链接。

useEffect是什么

useEffect是一个React钩子，用于处理副作用。副作用是指任何在渲染之外发生的事情，例如：

• 发起网络请求
• 设置定时器
• 更新本地存储
• 调用第三方API

useEffect如何工作

useEffect钩子接受两个参数：

• 一个回调函数，用于执行副作用。
• 一个依赖项数组，用于指定副作用何时应该执行。

当组件首次渲染时，useEffect回调函数将立即执行。之后，每当依赖项数组中的任何值发生变化时，useEffect回调函数都会再次执行。

useEffect的用法

useEffect钩子有许多不同的用法，这里列举一些常见的用法：

• 发起网络请求

useEffect钩子可以用来发起网络请求。在useEffect回调函数中，您可以使用fetch API或axios库来发送请求。当请求完成时，您可以使用setState方法来更新组件的状态，从而触发重新渲染。

• 设置定时器

useEffect钩子可以用来设置定时器。在useEffect回调函数中，您可以使用setTimeout或setInterval方法来设置定时器。当定时器触发时，useEffect回调函数将再次执行。

• 更新本地存储

useEffect钩子可以用来更新本地存储。在useEffect回调函数中，您可以使用localStorage或sessionStorage API来更新本地存储。

• 调用第三方API

useEffect钩子可以用来调用第三方API。在useEffect回调函数中，您可以使用第三方API的库或SDK来调用API。当API调用完成时，您可以使用setState方法来更新组件的状态，从而触发重新渲染。

useEffect的注意事项

在使用useEffect钩子时，需要注意以下几点：

• 不要在useEffect回调函数中修改组件的状态

在useEffect回调函数中修改组件的状态可能会导致无限循环。这是因为useEffect回调函数是在每次渲染之后执行的，如果在回调函数中修改了状态，那么组件将重新渲染，useEffect回调函数将再次执行，如此循环往复。

• 不要在useEffect回调函数中执行异步操作

在useEffect回调函数中执行异步操作可能会导致问题。这是因为useEffect回调函数是在同步执行的，这意味着在回调函数执行完成之前，组件不会重新渲染。因此，如果在回调函数中执行了异步操作，那么在异步操作完成之前，组件将不会重新渲染，这可能会导致问题。

• 不要在useEffect回调函数中使用DOM API

在useEffect回调函数中使用DOM API可能会导致问题。这是因为useEffect回调函数是在同步执行的，这意味着在回调函数执行完成之前，组件不会重新渲染。因此，如果在回调函数中使用了DOM API，那么在回调函数执行完成之前，DOM元素可能不会更新，这可能会导致问题。

总结

useEffect钩子是一个强大的工具，可以用来处理副作用。在使用useEffect钩子时，需要注意一些注意事项，以避免常见错误。