时间戳

首页 > 解决方案 > React：重新渲染行为

reactjs - React：重新渲染行为

问题描述

我对反应有些陌生，我正在尝试了解每次组件何时重新渲染。通常我很擅长自己解决这些问题，但我似乎无法找到其中的逻辑

展品 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

我猜为什么它在 Exhibit 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

我不明白为什么在第二次渲染时，它不会增加。我知道它确实会永久增加值，而不仅仅是用于日志记录。

谢谢。

标签： reactjs

解决方案

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

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

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

推荐阅读