在React.js功能组件中使用useEffect()

React钩子useEffect有助于在React的功能组件中添加componentDidUpdate和componentDidMount组合生命周期。

到目前为止，我们知道我们只能在有状态组件中添加生命周期方法。

要使用它，我们需要从react导入它-

import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
   useEffect( ()=>{
      console.log(‘hello’);
      setTimeout( ()=>{ alert(‘hello’); }, 2000);
   });
}

如果运行它，我们将在每个渲染周期看到控制台日志并发出警报。在这里，我们也可以在useEffect中调用http请求。现在，这类似于有状态组件的componentDidUpdate生命周期。

我们可以在单个组件中添加多个useEffect函数。

如何使其像componentDidMount一样工作

将空数组作为第二个参数传递给useEffect函数调用，使其像componentDidMount一样工作。

const tutorials=(props)=>{
   useEffect( ()=>{
      console.log(‘hello’);
      setTimeout( ()=>{ alert(‘hello’); }, 2000);
   }, [] );
}

我们可以将第二个参数传递给useEffect，如果第二个参数有任何变化，那么React将执行此useEffect函数调用。

下面显示的第二个参数是一个数组，这意味着我们可以在该数组内添加多个元素。

import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
   useEffect( ()=>{
      console.log(‘hello’);
      setTimeout( ()=>{ alert(‘hello’); }, 2000);
   }, [props.player]);
}

如何在功能组件中执行清理工作

在useEffect内部，我们可以在函数调用的末尾添加return语句，该语句返回一个函数。此返回函数执行清理工作。清理工作的执行频率还取决于传递给useEffect函数的第二个参数。

import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
   useEffect( ()=>{
      console.log(‘hello’);
      setTimeout( ()=>{ alert(‘hello’); }, 2000);
      return ( ()=>{
         console.log(‘cleanup on change of player props’);
      });
   }, [props.player]);
}

我们知道，componentWillUnmount 执行时组件从实际的DOM中删除。同样，如果我们将useEffect与第二个空参数一起使用并添加返回函数调用，则它将作为componentWillUnmount'

const tutorials=(props)=>{
   useEffect( ()=>{
      console.log(‘hello’);
      setTimeout( ()=>{ alert(‘hello’); }, 2000);
      return ( ()=>{
         console.log(‘cleanup similar to componentWillUnmount’);
      });
   }, []);
}

在上面的代码示例中，我们确定将三个生命周期组合在一个函数useEffect中。这些生命周期是componentDidUpdate，componentDidMount和componentWillUnmount。

在useEffect中添加return语句是可选的，这意味着清理工作是可选的，并取决于用例。

如果我们使用多个useEffect，则它们将按照与声明相同的顺序执行。

给定正确的第二个参数，我们可以优化useEffect的性能。

仅当更改了指定的第二个参数时，useEffect才会触发。

useEffe ct中的代码执行异步发生。还有另一个类似于useEffect的钩子，但是它以同步方式工作。它称为useLayoutEffect。

由于useLayoutEffect的执行是同步发生的，因此在调用完成之前，它可能会阻止可视更新一段时间。因此，应在非常特定的用例中使用它，而在常见用例中首选标准useEffect。

还有一个钩子可用于调试以及与第三方库（例如Redux）一起使用。称为useDebugValue来显示自定义挂钩的标签。