没有依赖项的 useEffect 内部代码与外部代码之间的区别?

Question

我很难理解没有依赖项的useEffect内部的代码与仅在useEffect之外的代码。

例如，一个简单的例子：

const func1 = () => {
console.log("Apple") 
useEffect(() => {
console.log("Banana") 
})
return (//...JSX)
}

我相信Apple和Banana都会在重新渲染时调用，那么为什么要使用 useEffect呢？

我听到的标准答案是，每次重新渲染时都会调用Apple，但只有在状态/道具更改时才会调用Banana。

但是状态/道具的改变几乎总是会导致重新渲染，那么在内部使用效果真的有好处吗？

Answer 1

是的，你是对的！两个代码在每个渲染上运行，但区别在于何时运行。

请考虑以下事项

const Component = () =>{
const ref = useRef(null)
console.log(ref.current) // null

useEffect(() => console.log(ref.current) /*div*/)
return <div ref={ref} />
}

useEffect在装载组件后运行。因此，对于您的示例useEffect是无用的，但是如果您需要访问仅在组件挂载后可用的值(例如测量 DOM(，效果通常是要走的路。

Answer 2

在您的示例代码中，我认为在useEffect钩子中使用它没有任何好处。但是 2 行代码在不同的时间执行。外部useEffect不受组件生命周期的阻碍 - 我认为它在渲染组件时被称为。但是，当组件被挂载或更新时，useEffect钩子中的那个会被调用，如 react 文档中所述。