在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才会触发。
useEffect中的代码执行异步发生。还有另一个类似于useEffect的钩子，但是它以同步方式工作。它称为useLayoutEffect。
由于useLayoutEffect的执行是同步发生的，因此在调用完成之前，它可能会阻止可视更新一段时间。因此，应在非常特定的用例中使用它，而在常见用例中首选标准useEffect。
还有一个钩子可用于调试以及与第三方库（例如Redux）一起使用。称为useDebugValue来显示自定义挂钩的标签。