提问人：Vishal Sangole 提问时间：10/1/2023 最后编辑：Frank van PuffelenVishal Sangole 更新时间：10/1/2023 访问量：39
状态更改是否会卸载功能组件
Does change in state unmount functional component
问：
我知道状态的变化会触发组件的重新渲染。所以我的问题是，作为重新渲染过程的一部分，状态更改是否也会卸载功能组件？
main.jsx
const Fullnote = () => {
const notes = useContext(NotesContext);
const [note, setNote] = useState(INITIAL_VALUE);
const { noteId } = useParams();
useEffect(() => {
notes.forEach(data => {
if (data.id === noteId) setNote(data)
});
return ( () => console.log("return"))
});
return (
<>
......
</>
)
}
在上面的代码片段中，这里我们从上下文中获取对象数组。该数组中的每个对象都具有唯一的 ID。我们也从 url 中获取 noteId。一旦组件挂载 useEffect 运行，我们设置与 noteId 匹配的状态。
console.log（“return”） 会在 setState（） 之后运行吗？
答：
1赞
Nicholas Tower
10/1/2023
#1
所以我的问题是，作为重新渲染过程的一部分，状态更改是否也会卸载功能组件？
console.log（“return”） 会在 setState（） 之后运行吗？
这是两个不同的问题：它会卸载吗？不可以，组件不会卸载。只有父组件才能卸载此组件。它将通过停止呈现 或更改 上的键来实现此目的。<Fullnote /><Fullnote key={something} />
但是，它将记录“返回”。在组件重新渲染后，它将运行效果，并在运行效果之前运行来自先前渲染效果的清理代码。因此，上一次渲染的清理代码将运行，并记录“return”。
如果要限制 useEffect 的运行时间，可以提供依赖项数组作为 useEffect 的第二个参数。如果数组中的任何值都没有更改，则效果不会重新运行，因此不需要撤消之前的效果。
useEffect(() => {
// ...
}, [notes, noteId]);
P.S.，如果您调用的唯一位置是在 那么不应该是一个单独的状态。相反，您可以在渲染期间进行计算。这将使代码更简洁、更高性能（因为它不再需要双重渲染），并将消除值不同步的时间点。setNoteuseEffectnotenote
const Fullnote = () => {
const notes = useContext(NotesContext);
const { noteId } = useParams();
const note = notes.find(data => data.id === nodeId);
return (
<>
......
</>
)
}
（如果您确实调用了省略的代码，则此建议将不适用）setNote
评论
0赞
AKX
10/2/2023
如果确实调用了 ，则可以在挂载期间将音符分叉到状态。setNoteconst [note, setNote] = useState(() => notes.find(n => n.id === noteId));
2赞
kind user
10/1/2023
#2
状态更改是否会卸载功能组件
不。您可以使用 ：useState
const [note, setNote] = useState(() => {
console.log('mount');
return INITIAL_VALUE;
});
您将看到 was was only called， even after rerendering the component for the compon.console.log
console.log（“return”） 会在 setState（） 之后运行吗？
是的。
您尚未设置依赖项数组。的回调只有在您将依赖数组保留为空数组时才起作用。useEffectcomponentWillUnmount[]
如果没有提供依赖数组，它将在每个组件重新渲染时运行，包括清理函数（回调 ）。因此，在更改 后，组件重新渲染后，调用 （），然后调用 .useEffectstatecleanupconsole.log("return")useEffect
评论
useEffectsetStateconst notes = useContext(NotesContext); const { noteId } = useParams(); const [note, setNote] = useState(() => notes.find(n => n.id === noteId));