原文地址：How the useEffect Hook Works (with Examples)
想象一下：你有一个足够好的函数组件，并且有一天，你需要加一个生命周期函数到里头。
啊。
“也许我可以用某种方式解决它？” 最终变成“糟糕，我要将它转化成一个类组件”。
类组件继承自React.Component,将函数的主体复制黏贴到render方法中，然后将代码格式缩进，最后加上生命周期的方法。
useEffect 给你提供了一个更好的选择。
通过useEffect，你可以在函数组件内部直接操纵生命周期相关的事件。即，它们中的三个：componentDidMount, componentDidUpdate, and componentWillUnmount. 全部包含在一个函数中！让我们来看一个例子：
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
function LifecycleDemo() {
// Pass useEffect a function
useEffect(() => {
// This gets called after every render, by default
// (the first one, and every one after that)
console.log('render!');
// If you want to implement componentWillUnmount,
// return a function from here, and React will call
// it prior to unmounting.
return () => console.log('unmounting...');
})
return "I'm a lifecycle demo";
}
function App() {
// Set up a piece of state, so that we have
// a way to trigger a re-render.
const [random, setRandom] = useState(Math.random());
// Set up another piece of state to keep track of
// whether the LifecycleDemo is shown or hidden
const [mounted, setMounted] = useState(true);
// This function will change the random number,
// and trigger a re-render (in the console,
// you'll see a "render!" from LifecycleDemo)
const reRender = () => setRandom(Math.random());
// This function will unmount and re-mount the
// LifecycleDemo, so you can see its cleanup function
// being called.
const toggle = () => setMounted(!mounted);
return (
<>
<button onClick={reRender}>Re-render</button>
<button onClick={toggle}>Show/Hide LifecycleDemo</button>
{mounted && <LifecycleDemo/>}
</>
);
}
ReactDOM.render(<App/>, document.querySelector('#root'));
单击Show/Hide按钮。 查看控制台。 它在消失之前打印“unmounting”，当它再次出现打印“render！” 。
现在，尝试一下Re-render按钮。每一次单击，它都会打印出“render！”和“umounting”，好像很奇怪...
单击重新渲染的控制台输出
为什么每次渲染都输出“unmounting”？
嗯，您可以（可选）从useEffect返回的清理函数不仅会在卸载组件时被调用。 每次效果生效前都会调用它-从上一次运行中清除。 实际上，它比componentWillUnmount生命周期更强大，因为如果需要，它可以让您在每个渲染之前和之后运行副作用。
不仅仅是生命周期
useEffect在每次渲染之后运行（默认情况下），并且可以选择在再次运行之前自行清理。
与其将useEffect当作一个可以完成3个独立生命周期工作的函数，不如将其简单地视为渲染后运行副作用的一种方式（包括您希望在每个操作之前进行的潜在清理）可能会更有帮助。 并在卸载之前。
每次进行渲染时阻止副作用
如果您想减少副作用的运行频率，可以提供第二个参数-一个数组。 将它们视为实现此效果的依赖项。 如果自上次以来某个依赖项已更改，则效果将再次运行。 （它还将在初始渲染后运行）
const [value, setValue] = useState('initial');
useEffect(() => {
// This effect uses the `value` variable,
// so it "depends on" `value`.
console.log(value);
}, [value]) // pass `value` as a dependency
考虑该数组的另一种方式：它应该包含effect函数在周围范围中使用的每个变量。 那么，如果使用prop呢？ 那在数组中。 是否使用state？ 那在数组中。
useEffect不会主动 “监控”
一些框架是响应式的，这意味着它们会自动检测更改并在发生更改时更新UI。
React不会这样做-它只会响应状态更改而重新渲染。
useEffect也不会主动“监视”更改。 您可以将useEffect调用想像为以下伪代码：
let previousValues = [];
let hasRun = false;
function useEffect(effectFunc, dependencyArray = undefined) {
// Let's pretend there's a function somewhere that will queue
// this to run after the render is finished -- because we don't
// want to run this effect NOW, we only want to queue it up.
afterRenderIsDone(() => {
// Check each dependency against the last time this was called
for(let i = 0; i < dependencyArray.length; i++) {
if(dependencyArray[i] !== previousValues[i]) {
// One of the values has changed! Update them for next time,
// and run the effect
previousValues = dependencyArray;
effectFunc();
break;
}
}
});
}
当您在组件中调用useEffect时，这实际上是在完成渲染后排队或安排可能运行的效果。
渲染完成后，useEffect将查看依赖项值的列表，如果其中任何一个已更改，则调用您的effect函数。
在挂载后只运行一次
您可以通过传递空数组[]的特殊值来表示“仅在挂载时运行，而在卸载时清除”。 因此，如果我们将上面的组件更改为像这样调用useEffect：
useEffect(() => {
console.log('mounted');
return () => console.log('unmounting...');
}, []) // <-- add this empty array here
然后，它将在初始渲染后打印“mounted”，在整个生命周期中保持沉默，并在退出时打印“unmounting...”。
上面的伪代码不包含对此空数组功能的支持。 可能是这样的：
let previousValues = [];
let hasRun = false;
function useEffect(effectFunc, dependencyArray = undefined) {
// Let's pretend there's a function somewhere that will queue
// this to run after the render is finished -- because we don't
// want to run this effect NOW, we only want to queue it up.
afterRenderIsDone(() => {
// 'undefined' is a special value, meaning "run every time"
if(!dependencyArray) {
effectFunc();
return;
}
// empty array '[]' is also a special value: only run once
if(dependencyArray.length === 0) {
if(!hasRun) {
hasRun = true;
effectFunc();
}
return;
}
// Check each dependency against the last time this was called
for(let i = 0; i < dependencyArray.length; i++) {
if(dependencyArray[i] !== previousValues[i]) {
// One of the values has changed! Update them for next time,
// and run the effect
previousValues = dependencyArray;
effectFunc();
break;
}
}
});
}
请注意第二个参数：如果添加了一个依赖项，很容易忘记添加一个项目；如果您错过了一个依赖项，那么下次useEffect运行时该值将过时，并且可能会导致一些奇怪的问题。
useEffect何时运行？
默认情况下，useEffect在每次调用该组件的渲染之后运行。 通过示例最容易看到此时间。尝试下CodeSandbox上的交互式示例,确保你打开了控制台，你能看到这个时间。
在这个示例中，有3个嵌套组件，Top包含Middle，Middle包含Bottom。useEffect的时间取决于每个组件的渲染时间，并且初始将全部渲染3个组件。你会看到控制台打印出3条消息。
但是请注意，React是自下而上渲染的！ 在这种情况下：底部，然后是中间，然后是顶部。 它是递归的-父级直到其所有子级都渲染完毕后才“完成”，并且useEffect仅在组件的渲染完成后才运行。
从那时起，将不会发生任何事情，直到您单击其中一个元素以增加其计数。 完成后，唯一会重新渲染的组件是您单击的组件及其下方的组件。 （请注意，如果您单击“底部”，您将不会看到“顶部”或“中间”的“已渲染”消息）
function Top() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Top rendered");
});
return (
<div>
<div onClick={() => setCount(count + 1)}>Top Level {count}</div>
<Middle />
</div>
);
}
function Middle() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Middle rendered");
});
return (
<div>
<div onClick={() => setCount(count + 1)}>Middle Level {count}</div>
<Bottom />
</div>
);
}
function Bottom() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Bottom rendered");
});
return <div onClick={() => setCount(count + 1)}>Bottom Level {count}</div>;
}
在state变化时会运行useEffect
默认情况下，useEffect在每次渲染后运行，但是对于响应状态更改而运行一些代码也是完美的选择。 您可以通过将第二个参数传递给useEffect来限制效果的运行时间。
将第二个参数想像为“依赖项”数组–如果更改了变量，效果应重新运行。 这些可以是任何类型的变量：prop，state或其他任何变量。
在此示例中，有3个state变量和3个按钮。 该效果仅在count2更改时运行，否则将保持安静。 尝试交互式示例。
function ThreeCounts() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
const [count3, setCount3] = useState(0);
useEffect(() => {
console.log("count2 changed!");
}, [count2]);
return (
<div>
{count1} {count2} {count3}
<br />
<button onClick={() => setCount1(count1 + 1)}>Increment count1</button>
<button onClick={() => setCount2(count2 + 1)}>Increment count2</button>
<button onClick={() => setCount3(count3 + 1)}>Increment count3</button>
</div>
);
}
在prop变化时会运行useEffect
正如我们能够将useEffect设置为在状态变量更改时运行一样，使用props也可以做到这一点。 请记住，它们都是常规变量！ useEffect可以在其中任何一个上触发。
在此示例中，PropChangeWatch组件正在接收2个props（a和b），并且其效果仅在更改值时才会运行（因为我们正在传递包含[a]作为第二个参数的数组）。
在交互式示例中尝试一下.:
function PropChangeWatch({ a, b }) {
useEffect(() => {
console.log("value of 'a' changed to", a);
}, [a]);
return (
<div>
I've got 2 props: a={a} and b={b}
</div>
);
}
function Demo() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
return (
<div>
<PropChangeWatch a={count1} b={count2} />
<button onClick={() => setCount1(count1 + 1)}>Increment count1</button>
<button onClick={() => setCount2(count2 + 1)}>Increment count2</button>
</div>
);
}
专注于挂载
有时您只想在挂载时做一件小事，而做一件小事需要将一个函数重写为一个类。
在此示例中，让我们看一下如何结合使用useEffect和useRef钩子将输入控件集中在第一个渲染上。
import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
function App() {
// Store a reference to the input's DOM node
const inputRef = useRef();
// Store the input's value in state
const [value, setValue] = useState("");
useEffect(
() => {
// This runs AFTER the first render,
// so the ref is set by now.
console.log("render");
// inputRef.current.focus();
},
// The effect "depends on" inputRef
[inputRef]
);
return (
<input
ref={inputRef}
value={value}
onChange={e => setValue(e.target.value)}
/>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
在顶部，我们使用useRef创建一个空的ref。 将其传递到输入的ref属性后，就需要在渲染DOM后对其进行设置。 而且，重要的是，useRef返回的值在渲染之间将保持稳定–不会更改。
因此，即使我们将[inputRef]作为useEffect的第二个参数传递，它在初始挂载时实际上只会运行一次。 这基本上是“ componentDidMount”（时间原因，我们将在后面讨论）。
为了证明这一点，请[尝试示例]（https://codesandbox.io/s/z6pommq8km）。请注意它的聚焦方式（使用CodeSandbox编辑器时有点麻烦，但是请尝试单击右侧“浏览器”中的刷新按钮）。然后尝试在框中输入。 每个字符都会触发重新渲染，但是如果您查看控制台，则会看到“render”仅打印一次。
使用useEffect请求数据
让我们看看另一个常见的用例：请求数据并显示它。在类组件中，您需要将此代码放入componentDidMount方法中。为此，我们将使用useEffect。我们还需要useState来存储数据。
值得一提的是，当React新的Suspense功能的数据获取部分准备就绪时，这将是获取数据的首选方式。 从useEffect抓取有一个大难题（我们将继续介绍），而Suspense API的使用将变得更加容易。
这是一个从Reddit获取帖子并显示它们的组件：
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
function Reddit() {
// Initialize state to hold the posts
const [posts, setPosts] = useState([]);
// effect functions can't be async, so declare the
// async function inside the effect, then call it
useEffect(() => {
async function fetchData() {
// Call fetch as usual
const res = await fetch(
"https://www.reddit.com/r/reactjs.json"
);
// Pull out the data as usual
const json = await res.json();
// Save the posts into state
// (look at the Network tab to see why the path is like this)
setPosts(json.data.children.map(c => c.data));
}
fetchData();
}); // <-- we didn't pass a value. what do you think will happen?
// Render as usual
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
ReactDOM.render(
<Reddit />,
document.querySelector("#root")
);
您会注意到，我们没有在此处将第二个参数传递给useEffect。这是不好的。不要这样
不传递第二个参数将导致useEffect运行每个渲染。然后，当它运行时，它将获取数据并更新状态。然后，一旦状态更新，组件将重新渲染，这再次触发useEffect。您可以看到问题。
为了解决这个问题，我们需要传递一个数组作为第二个参数。数组应该是什么？
继续思考一下。
…
…
useEffect依赖的唯一变量是setPosts。因此，我们应该在此处传递数组[setPosts]。由于setPosts是useState返回的设置器，因此不会在每个渲染器中都重新创建它，因此效果只能运行一次。
有趣的事实：调用useState时，它返回的setter函数仅创建一次！每次渲染组件时，它都是完全相同的函数实例，这就是为什么效果可以安全依赖于一个实例的原因。这个有趣的事实对于useReducer返回的调度函数也是如此。
当数据变化时重新发送请求
让我们在示例上进行扩展，以涵盖另一个常见问题：如何在发生某些变化（例如用户ID或本例中为subreddit的名称）时重请求取数据。
首先，我们将Reddit组件更改为接受subreddit作为prop，基于该subreddit请求数据，并仅在prop更改时重新运行效果：
// 1. Destructure the `subreddit` from props:
function Reddit({ subreddit }) {
const [posts, setPosts] = useState([]);
useEffect(() => {
async function fetchData() {
// 2. Use a template string to set the URL:
const res = await fetch(
`https://www.reddit.com/r/${subreddit}.json`
);
const json = await res.json();
setPosts(json.data.children.map(c => c.data));
}
fetchData();
// 3. Re-run this effect when `subreddit` changes:
}, [subreddit, setPosts]);
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
// 4. Pass "reactjs" as a prop:
ReactDOM.render(
<Reddit subreddit='reactjs' />,
document.querySelector("#root")
);
这仍然是硬编码的，但是现在我们可以通过将Reddit组件包装为一个组件来对其进行自定义，以使我们可以更改subreddit。 添加此新的App组件，并在底部进行渲染：
function App() {
// 2 pieces of state: one to hold the input value,
// another to hold the current subreddit.
const [inputValue, setValue] = useState("reactjs");
const [subreddit, setSubreddit] = useState(inputValue);
// Update the subreddit when the user presses enter
const handleSubmit = e => {
e.preventDefault();
setSubreddit(inputValue);
};
return (
<>
<form onSubmit={handleSubmit}>
<input
value={inputValue}
onChange={e => setValue(e.target.value)}
/>
</form>
<Reddit subreddit={subreddit} />
</>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
该应用程序在此处保持2种状态-当前输入值和当前subreddit。提交输入将“提交”子reddit，这将导致Reddit从新选择中重新获取数据。将输入包装在表格中，允许用户按Enter提交。
顺便说一句：仔细键入。没有错误处理。如果您输入不存在的subreddit，则该应用将崩溃。但是，实现错误处理将是一个很棒的练习！ ;）
我们在这里只可以使用一种状态-存储输入，并将相同的值发送给Reddit-但是Reddit组件将在每次按键时获取数据。
顶部的useState可能看起来有些奇怪，尤其是第二行：
const [inputValue，setValue] = useState（“ reactjs”）;
const [subreddit，setSubreddit] = useState（inputValue）;
我们正在将“ reactjs”的初始值传递给第一状态，这很有意义。该价值永远不会改变。
但是第二行呢？如果初始状态改变怎么办？ （并且，当您在框中键入内容时，它会显示）
请记住，useState是有状态的（有关useState的更多信息）。它只使用一次，即第一次渲染时的初始状态。之后，它将被忽略。因此，可以传递一个瞬态值（例如可能会更改的prop或其他变量）是安全的。
一百种用途
useEffect函数就像瑞士军刀的钩子。 它可以用于很多事情，从设置订阅到创建和清除计时器，再到更改引用的值。
不利的一件事是进行对用户可见的DOM更改。 计时的工作方式是，effect函数仅在浏览器完成布局和绘制后才会启动-如果您想进行视觉更改，为时已晚。
对于这些情况，React提供了useMutationEffect和useLayoutEffect钩子，除了它们被触发时机，它们的作用与useEffect相同。 看看docs for useEffect，尤其是有关the timing of effects的部分，如果您需要进行可见的DOM更改。
这似乎是一个额外的麻烦。 另一件事要担心。 不幸的是，这有点。 这个（heh）的积极副作用是，由于useEffect在布局和绘制之后运行，因此缓慢的效果不会使UI变得混乱。 不利的一面是，如果要将旧代码从生命周期转移到挂钩，则必须谨慎一点，因为这意味着useEffect在计时方面几乎等同于componentDidUpdate。
试用useEffect
您可以在启用了钩子的CodeSandbox中尝试使用useEffect。 一些想法...
-
渲染输入框并使用useState存储其值。 然后在效果中设置document.title。 （例如Dan在React Conf上的演示）
-
制作一个自定义挂钩，以从URL提取数据
-
将单击处理程序添加到文档，并在每次用户单击时打印一条消息。 （不要忘记清理处理程序！）
如果您需要灵感，请访问Nik Graf的React Hooks集合-目前star数量为440！ 它们中的大多数很容易自行实现。 （例如useOnMount，我敢打赌，您可以根据您在本文中学到的知识实现该功能！）
学习React可能会很麻烦-太多的库和工具！
我的建议？ 忽略所有人：)
有关循序渐进的方法，请访问我的Pure React研讨会。
