反应：重新渲染行为

Question

我有些新意，我想尝试每次重新渲染组件的时间。通常我很擅长自己弄清楚这些东西，但是我似乎找不到其中的逻辑

展览A

const Science = () => {
    console.log('Rendering')

    useEffect(() => console.log('Effect ran'))

    console.log('Returning')

    return <div></div>
}

此输出

Rendering
Returning
Rendering
Returning
Effect ran

我不明白为什么要重新渲染，以及为什么useEffect代码在渲染和返回之后都出现。

展览B

const Science = () => {
    console.log('Rendering')

    useEffect(() => console.log('First effect ran'))
    useEffect(() => console.log('Second effect ran'))

    console.log('Returning')

    return <div></div>
}

此输出

Rendering
Returning
Rendering
Returning
First effect ran
Second effect ran

我对它为什么在图A中重新渲染的猜测是useEffect会导致重新渲染，但是在这里看到，只有一个useEffect会导致重新渲染。不确定这种行为。

展览C

const Science = () => {
    console.log('Rendering')

    let numRenders = useRef(0)
    console.log(++numRenders.current)

    console.log('Returning')

    return <div></div>
}

这真的使我感到困惑，因为它输出

Rendering
1
Returning
Rendering
1
Returning

我不明白为什么在第二个渲染中它没有增加。我知道它确实会永久增加该值，而不仅仅是记录日志。

谢谢。

Answer 1

首先，呈现您的jsx。然后执行生命周期挂钩，然后重新呈现组件。然后每次状态更改时都会渲染组件或更改道具。

您的useEffect代码没有任何依赖关系，但您没有提及它。在这种情况下，这种方法是正确的

useEffect(() => console.log("useEffect was ran") , [])

Answer 2

useEffect 回调在render phase之后异步执行，即分别为 A 和 B 。

关于附件C ，它输出：

Rendering 
1
Returning 

并且未渲染两次，它由于其他原因（例如，您未向我们展示的父级渲染）而渲染了两次。无论如何，useRef 不会触发渲染，因此due to closures更新参考是没有意义的（它将始终显示渲染的第一个值）。

换句话说，作为其功能组件，渲染触发功能并将评估更新的值。

请参阅附带的代码和框。