数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 React.js 函数组件中使用 useEffect()
React hook 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 语句，该语句返回一个函数。此 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 并添加一个 return 函数调用，它将作为**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 以显示自定义钩子的标签。
3K+ 次查看
