卸载功能组件状态是否发生变化

Question

我知道状态的变化会触发组件的重新渲染。所以我的问题是，状态的变化是否也会作为重新渲染过程的一部分卸载功能组件？

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()之后运行吗？

Answer 1

所以我的问题是，状态的变化是否也会作为重新渲染过程的一部分卸载功能组件？

console.log("return")会在setState()之后运行吗？

这是两个不同的问题：它会卸载吗？不，该组件不会卸载。只有父组件才能卸载该组件。它可以通过停止渲染

<Fullnote />

或更改 `

上的键来实现此目的

但是，当您的组件重新渲染时，它将运行效果。在运行效果之前，它会运行前一个渲染效果的清理代码。因此，先前渲染中的清理代码将运行，并记录“return”。

---

P.S，看起来您不应该将其作为单独的状态和 useEffect 来执行。看起来你只需要在渲染过程中计算一个派生值。这将使代码更加简洁，性能更高（因为它不再需要双重渲染），并且将消除值不同步的时间点。

const Fullnote = () => {
  const notes = useContext(NotesContext);   
  const [note, setNote] = useState(INITIAL_VALUE);
  const { noteId } = useParams();
  const note = notes.find(data => data.id === nodeId);

  return (
    <>
      ......
    </>
  )

Answer 2

卸载功能组件状态是否发生变化

不。您可以使用 useState 中的

callback

函数以编程方式检查它：

const [note, setNote] = useState(() => {
   console.log('mount');
   return INITIAL_VALUE;
});

您将看到

console.log

仅被调用一次，即使在重新渲染组件之后也是如此。

console.log("return")会在setState()之后运行吗？

是的。

您尚未设置依赖数组。如果您将

依赖数组

保留为空数组

useEffect

，则 componentWillUnmount 的回调的工作方式类似于 []

only

。

如果没有提供依赖数组，它将在每个组件重新渲染时运行，包括cleanup函数（

useEffect

的回调）。因此，在更改

state

后，组件重新渲染，

cleanup

被称为 (

console.log("return")

)，然后是

useEffect

。