后端开发教程 - Java、Spring Boot 实战 - msg200.com
React - useEffect hook - 快速指南
useEffect 是什么？
让我们看一些例子
useEffect 是什么？
useEffect 是一个 React 内置钩子，它允许我们在组件生命周期的挂载、更新和卸载阶段运行代码。
useEffect 钩子接收两个参数：一个要执行的函数和一个依赖项数组。
让我们看一些例子
我在组件app.js旁边设置了两个输入数字和一个按钮Calculator。我们在输入框中设置数字，点击按钮时，状态会更新，组件会通过 props 获取数字。没什么特别的。
import { useRef, useState } from "react";
import "./App.css";
import Calculator from "./Calculator";
const App = () => {
const inputA = useRef(0);
const inputB = useRef(0);
const [numbers, setNumbers] = useState({
numberA: inputA.current.value,
numberB: inputB.current.value,
});
const getTotalHandler = () => {
setNumbers({
numberA: +inputA.current.value,
numberB: +inputB.current.value,
});
};
return (
<>
<div className="container">
<div>
<label>Input A</label>
<input type="number" ref={inputA} />
</div>
<div>
<label>Input B</label>
<input type="number" ref={inputB} />
</div>
<button onClick={getTotalHandler}>Calculate</button>
<Calculator numberA={numbers.numberA} numberB={numbers.numberB} />
</div>
</>
);
};
export default App;
我有一个名为的组件Calculator，它通过 props 接收numberA并numberB返回总和。
const Calculator = ({ numberA, numberB }) => {
return <h1>The total is {numberA + numberB}</h1>;
};
export default Calculator;
组件挂载时执行 useEffect
现在我将使用它useEffect来执行一个函数，该函数会在组件挂载时记录日志。首先，我useEffect从 导入钩子react。
import { useEffect } from "react";
为了实现这个钩子，我必须设置一个要执行的函数和一个依赖项数组，然后我的组件看起来像这样：
import { useEffect } from "react";
const Calculator = ({ numberA, numberB }) => {
useEffect(() => {
console.log(`First render`);
}, []);
return <h1>The total is {numberA + numberB}</h1>;
};
export default Calculator;
在这种情况下，我将依赖数组留空，因为我只希望在第一次渲染时执行此代码。
现在，当我第一次加载我的组件时，我会在控制台上看到它：
由于依赖项数组为空，此日志仅在组件挂载时执行。如果我更新App组件状态并更新Calculatorprops，此日志函数将不会再次执行。让我们检查一下：
我已经更新了numberA和numberB道具，但该功能并未执行。
每次 props 更新时执行 useEffect
现在，让我们在每次 props 更新时执行一个函数。这在基于新的 props 执行副作用时很有用，例如，根据从 props 收到的值从 API 中检索详细信息。文章末尾有一个示例。
首先，我在之前的代码中添加第二个 useEffect。
import { useEffect } from "react";
const Calculator = ({ numberA, numberB }) => {
useEffect(() => {
console.log(`First render`);
}, []);
useEffect(() => {
console.log(`This gets executed each time the props are updated`);
}, [numberA, numberB]);
return <h1>The total is {numberA + numberB}</h1>;
};
export default Calculator;
这次我没有将依赖项数组留空，而是在其中添加了 numberA 和 numberB 属性，这样 useEffect hook 就知道，每次其中一个属性更新时，它都必须运行该函数。让我们检查一下它是否有效：
是的。实际上，你会看到组件第一次挂载时，两个useEffect钩子都会被执行。
每次 props 更新时，使用 useEffect 从 API 获取数据
现在我将向您展示如何利用useEffect钩子在每次更新组件的 props 时从 API 获取数据。
对于这个例子，我创建了一个名为的新组件Rick，它使用通过 props 接收的 id 从 Rick and Morty 公共 api 获取数据。
import { useState, useEffect } from "react";
const Rick = ({ id }) => {
const [character, setCharacter] = useState(null);
const [request, setRequest] = useState(`pendent`);
useEffect(() => {
setRequest(`pendent`);
const getApiResults = (characterId) => {
fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
.then((response) => response.json())
.then((data) => {
setCharacter(data);
setRequest(`completed`);
});
};
getApiResults(id);
}, [id]);
let content = ``;
if (request === `completed`) {
content = (
<>
<img src={character.image} alt={character.name} />
<h1>{character.name}</h1>
</>
);
}
return content;
};
export default Rick;
在组件中，app我有一个按钮，它会生成一个随机数，并通过 props 将其传递给Rick组件。在第一次渲染时，我们只有这个按钮：
但是每次我们点击一个随机数时，它都会生成并通过 props 传递。这会触发useEffect根据该 id 获取所属 Rick and Morty 角色的函数：