React useEffect() Hook：用法、使用方式和使用时间

useEffect() Hook 介绍

useEffect hook一个关键组件。 它处理数据获取、设置事件侦听器或修改 DOM 等任务，并允许用户使用功能组件执行副作用。 它还控制组件生命周期。

useeffect挂钩利用两个参数，一个函数和一个可选的依赖项数组。 作为第一个参数传递的函数在组件的初始渲染后执行，然后在每次更新后再次执行。您可以使用依赖数组指示效果所依赖的变量。 如果依赖数组的任何变量发生变化，将执行新的效果运行。

本质上，useEffect 钩子的创建是为了解决 ES6 类组件生命周期中面临的挑战。然而，它现在已经成为 React 的核心概念之一。

简要介绍了什么是 react 中的 useEffect ，现在让我们看一下它的语法。

useEffect() Hook 的基本语法

useEffect 支持两个参数； 第二个参数是可选的。 语法如下：

useEffect(<函数>, <依赖>)

该函数包括副作用逻辑。 它会在 DOM 更新后直接触发回调的执行。

该依赖项包含您的副作用的可选依赖项数组，即状态和道具值。 请注意，仅当依赖项在渲染过程中发生更改时，use effect 挂钩才会运行回调。

该语法服务于 useEffect() 的唯一目的。 它允许您将副作用逻辑放在回调函数中，然后使用 dependencies 参数来控制何时需要副作用运行。

在实现 useEffect() Hook 时可以考虑如下语法：

// 导入使用效果

从“反应”中导入{useEffect}；

功能我的组件（）{

// 在返回的 JSX 之上调用它

// 传递两个参数给它，即一个数组和一个函数

使用效果（（）=> {

// 效果函数

返回（）=> {

// 清理函数

};

}, [/* 依赖数组 */]);

// 组件渲染逻辑

}

}

查看我们的免费技术课程，在竞争中脱颖而出。

使用 useEffect() Hook 挂载和卸载组件

安装

React 组件生命周期的初始阶段涉及创建组件并将其插入到 DOM 中。 react useEffect的这个生命周期阶段包括 componentDidMount 生命周期方法，它在组件挂载时执行。

下面是使用 useEffect() 挂钩安装组件的示例。

componentDidMount() {

console.log("组件挂载成功");

this.setState({

已加载：真

})

}

在上面的示例中，componentDidMount 允许您使用 setState。 因此，您可以轻松地在生命周期方法中设置和更改状态。 相应的方法使用 API 调用、调用远程端点并获取数据。

卸载

这个React useEffect生命周期方法处理 DOM 中的清理。它就像一个从 DOM 中删除组件的useEffect 清理函数。 在 React 中称为卸载。 卸载只使用一种生命周期方法，即componentWillUnmount。 当你想从 DOM 中删除一个组件时调用它。

componentWillUnmount() {

console.log("组件卸载成功");

}

使用 use effect() Hook 处理状态变化

useEffect在每次渲染后执行。它还用于运行某些代码以确认状态更改。 您可以通过在 useEffect() Hook 中传递第二个参数来控制效果的执行时间。 第二个参数作为一个依赖数组，即如果相应的变量发生变化，效果必须重新运行。 请注意，state 是其中一种变量类型。

以下部分举例说明使用效果钩子如何处理状态变化。

例如，您可能希望根据“天”值运行副作用。 假设您有一个副作用，即根据当天的值显示问候消息。 日期值保存在状态变量中。

每当您选择一天时，状态都会更新。 状态值的更改使您可以更新问候消息。 您应该将状态变量作为依赖项数组的子集传递给 useEffect 挂钩。

使用效果（（）=>

{

// 副作用

}， [状态]）;

在上面的useEffect react native示例中，如果状态变量的值更新，副作用就会运行。

探索我们的热门软件工程课程

对 API 和网络请求使用 useEffect() 挂钩

您可以将“useEffect()”挂钩与 API 和网络请求结合使用，以从服务器获取数据并处理错误。 以下是如何将“useEffect()”与 API 结合使用并处理网络错误的示例：

从“反应”中导入反应，{useState，useEffect}；

功能我的组件（）{

const [数据, setData] = useState(null);

const [error, setError] = useState(null);

使用效果（（）=> {

异步函数 fetchData() {

尝试 {

const response = await fetch('https://api.example.com/data');

如果（！response.ok）{

throw new Error('网络响应不正常');

}

const json = await response.json();

设置数据（json）；

} 赶上（错误）{

设置错误（错误）；

}

}

获取数据（）；

}, []);

如果（错误）{

返回<div>错误：{error.message}</div>；

}

如果（！数据）{

返回 <div>正在加载...</div>;

}

返回 （

<分区>

<p>{数据.消息}</p>

</div>

);

}

您可以修改此示例以包含处理网络请求和 API 响应所需的任何其他功能。

高级 useEffect() 钩子技术

一种高级的useEffect React Native技术是记忆。这是一种优化技术，其中缓存函数调用的输出。 随后，当再次输入相同的输入时，useEffect 返回函数返回它。

另一个著名的 useEffect() Hook 技术是 useMemo Hook。 它可以让你计算一个值并记住它。 它的语法是：

从 'react' 导入 { useMemo }

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() 钩子依赖

useEffect() Hook 依赖项包含您的副作用的依赖项列表，同时还包含状态或道具值。 dependencies 参数允许您捕获一些组件生命周期事件，例如组件被安装或特定状态/属性值被更新。

dependencies 参数使您可以控制调用副作用的时间，而不管组件的渲染周期如何。

使用 useEffect() Hook 进行条件渲染

useEffect Hook 允许您将条件放在钩子中。 这是一个例子。

使用效果（（）=> {

如果（应该执行）{

//（条件列表）

}

}, [应该执行])

您需要在 shouldExecute 函数下提及要执行的强制条件。

使用 effect() Hook vs ComponentDidMount() 和 ComponentDidUpdate()

useEffect() 钩子 vs componentDidUpdate()：

useEffect() 钩子 vs componentDidMount()：

useEffect() Hook 的常见错误和最佳实践。

常见错误

1.没有定义依赖

只要组件被渲染，useEffect 就会运行。 因此，您必须定义必须触发重新渲染的值。 否则，您的 useEffect 函数可能会产生性能问题。

2.执行useEffect hook后没有清理

useEffect 可能会返回一个清除函数，该函数在卸载组件时执行。 useEffect 后不清理会造成内存泄漏和其他问题。 所以，使用useeffect清理功能很重要。

3. 在useEffect 函数中无依赖地使用setState

如果您更新 useEffect 中的状态，它会触发另一个渲染。 这可能会导致无限循环。 为防止这种情况，您必须始终将要更新的状态变量定义为 useEffect 挂钩中的依赖项。

探索我们的软件开发免费课程

最佳实践：

• 如果你想使用 useEffect 钩子，请确保每个组件只使用一个。 在多个 useEffect 挂钩的情况下，所有这些挂钩都会在组件呈现时运行。 因此，它会产生性能问题和意外行为。
• 确保不要在条件、循环或嵌套函数中使用 useEffect 挂钩。 如果你在 for 循环中使用 State，那么 React 会在每次循环运行时创建一个新的状态变量。 因此，它会导致意想不到的行为。
• 确保不要过度使用 useEffect 挂钩。 它们会使您的代码难以阅读，如果过度使用可能会影响性能。
• 您只能从 React 函数中调用 useEffect 挂钩。 如果您从类组件调用它，您将看到一个错误。

结论

如果您想在不编写任何额外代码的情况下轻松访问组件的 props 和状态，最好在 React 中使用 useEffect 。它显着简化了组件中的副作用，因为它使得在状态或 prop 更改时更容易执行副作用。 您可以考虑上面讨论的方面和最佳实践，以确保您的 React 组件以最佳方式执行。

学习高要求的软件开发技能在当今时代至关重要。 您可以通过攻读利物浦约翰摩尔斯大学计算机科学专业的upGrad 理学硕士学位来掌握这些前沿技能。 该课程通过传授 Java、Python 等技能和相关领域的专业知识，使您成为专业的软件开发人员。 彻底学习本课程涵盖的各个方面可以帮助您探索 javascript 开发人员、软件工程师和后端工程师等工作机会。

除了掌握软件开发技能外，upGrad 还通过IIITB 的全栈开发执行 PG 课程和全栈软件开发训练营等课程，帮助您提升全栈开发人员的职业生涯。 这些课程提供沉浸式学习平台，让候选人获得高要求的全栈开发技能，有效地为成功的职业铺平道路！