Reactjs 反应：重新渲染行为

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

附件A

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

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

    console.log('Returning')

    return <div></div>
}

我不明白为什么它会重新呈现，为什么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>
}

我猜测为什么它会在附件A中重新渲染是因为useEffect会导致重新渲染，但从这里可以看到，只有一个useEffect会导致重新渲染。不确定这种行为

附件C

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

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

    console.log('Returning')

    return <div></div>
}

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

---

谢谢。

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

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

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

---

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

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

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

---

useffect

回调在之后异步执行，这正是A和B

对于附件C，它输出：

Rendering 
1
Returning 

而未渲染两次，它渲染两次是因为其他原因（例如您未向我们显示的父级渲染）。无论如何，

useRef

不会触发渲染，因此更新引用是毫无意义的（它将始终显示渲染的第一个值）

换句话说，由于它是函数组件，因此渲染会触发该函数，并会计算更新后的值

请参阅附带的codesandbox

---

useffect

回调在之后异步执行，这正是A和B

对于附件C，它输出：

Rendering 
1
Returning 

而未渲染两次，它渲染两次是因为其他原因（例如您未向我们显示的父级渲染）。无论如何，

useRef

不会触发渲染，因此更新引用是毫无意义的（它将始终显示渲染的第一个值）

换句话说，由于它是函数组件，因此渲染会触发该函数，并会计算更新后的值

请参阅附带的codesandbox

---

这可能是真的，因为有一个父组件（App.tsx），所以可能是它导致了重新渲染。谢谢。我试图回答你的所有问题，请参阅相关问题。这可能会有帮助：这可能是真的，有一个父组件（App.tsx），所以可能是它导致了重新渲染。谢谢。我试着回答你所有的问题，看看相关的问题它可能会有帮助：它不是“正确的方式”，它只是API，“正确的方式”取决于情况我的意思是在这种情况下它不是“正确的方式”，它只是API，“正确的方式”取决于我在这种情况下的意思

Rendering 
1
Returning