2.React Hooks-useEffect使用

在React中，useEffect是一个用于处理副作用的Hook。副作用指的是在组件渲染期间可能会产生的任何操作，例如访问API、订阅事件、修改DOM等。useEffect可以让你在组件渲染完成后执行这些副作用操作。

基本用法：

 其中，第一个参数是一个回调函数，用于定义需要执行的副作用操作。第二个参数是一个依赖数组，它指定了什么情况下需要重新运行副作用操作。如果依赖数组为空，副作用操作只会在组件的初始渲染和每次更新时运行。如果提供了依赖数组，useEffect会检查数组中的依赖项是否发生变化，只有在依赖项发生变化时才会重新运行副作用操作。

副作用操作可以包含一些异步操作，例如使用fetch函数获取数据或订阅WebSocket事件。此外，你也可以在副作用操作中执行一些清理操作，例如取消订阅、清除计时器等。为了在组件卸载时执行清理操作，你可以在回调函数中返回一个函数，React会在组件卸载时自动调用该函数。

Hooks是针对函数式组件的一种解决方法，但在函数组件中是没有生命周期函数钩子的。因此换种理解方法可以说是利用useEffect hook来模拟生命周期函数钩子：

（1）componentDidMount:

  可以使用一个空的依赖数组[]作为useEffect的第二个参数，以模拟组件的初始渲染完成后执行的操作。要想模拟componentDidMount，则第二项参数必须为空数组，才能在组件加载之前进行操作。如网络请求提前获取数据等。

（2）componentDidUpdate:

通过在useEffect的第二个参数中指定依赖项，可以模拟组件更新后执行的操作。当指定的依赖项发生变化时，副作用操作会重新运行。

以自己的练习代码为例：

在采用上述方法时，未使用useEffect对参数进行依赖，使得频繁render组件报错。于是采用useEffect对detail参数进行监视，只有在该参数发生变化时才会重新render。代码如下：

 （3）componentWillUnMount:

可以在useEffect的回调函数中返回一个清理函数，用于模拟组件卸载时执行的操作。常用的比如清除定时器等。

（4）componentDidCatch：

自己未尝试过，感兴趣的可以试试。

useEffect可以模拟几个比较重要的生命周期函数钩子，但其不等于生命周期函数。它更加灵活、方便。可以在一个函数组件中多次使用，而不仅仅局限于特定的生命周期阶段。