为什么在react(函数组件)中渲染前不发生副作用

为什么在渲染前不发生副作用?

我认为有两个原因:

function Component(){
// do something side effects
return <h1>Hello, World</h1>
}

在上面的代码中，每次渲染都会出现副作用，但是使用useEffect，我们可以决定是否跳过，并且我们可以清除一些副作用

function Component(){
// do something side effects that takes 10 seconds
return <h1>Hello, World</h1>
}

在上面的代码中，渲染被阻塞了10秒

function Component(){
useEffect(()=>{
// do something side effects that takes 10 seconds
})

return <h1>Hello, World</h1>
}

但是在这段代码中，渲染在10秒内是非阻塞的，因为我们使用了useEffect钩子(在渲染之后，可能会出现副作用)

我以前是这样想的，但是我有一个问题。

由于JavaScript可以异步操作，如果副作用是异步的，它不会阻塞渲染。如果是这样的话，第二个理由可能是站不住脚的，但是我想知道是否还有另一种观点。

我想知道是否有其他的原因，为什么副作用不应该在渲染前出现

副作用不需要花很多时间。函数中的副作用是可以在函数外部观察到的东西(不包括返回值)。当一个反应组件logs to the console, makes an API call, creates an object in storage etc.时，它正在执行一个副作用。

如果你这样写，你是正确的:

function Component(){
// make async call
return <h1>Hello, World</h1>
}

返回将在不等待异步调用完成的情况下执行。但是如果它在函数的主体中，那么它每次都被调用。你真的想那样吗?

副作用可以在useEffect或事件处理程序中执行。主要思想是不要直接从React函数调用它们。react函数应该只有两个任务——呈现输出和处理事件。除了这些主要影响之外的任何影响都是副作用。

注意:你可以在任何你想要的地方调用副作用，但你将偏离函数式编程和纯函数，这是React的基础。

相关内容