首先，我想陈述显而易见的：react类组件已死ð
这篇文章是关于渲染生命周期在函数组件上的工作。
的作用。功能组件
组件是必须返回JSX.Element的函数，这意味着带有一些JS糖的HTML标签。
您可以通过声明和导出功能来声明和导出反应功能组件。
假设您熟悉useState，让我们看一个示例：
import React, { useState } from "react"
export const Counter = () => {
const [counterValue, setCounterValue] = useState(0)
const increaseValue = () => {
setCounterValue(counterValue + 1)
}
return (
<button id="value-button" onClick={increaseValue}>
{ counterValue }
</button>
)
}
您也可以使用功能关键字来声明功能组件：
export function Counter() {
const [counterValue, setCounterValue] = useState(0)
const increaseValue = () => {
setCounterValue(counterValue + 1)
}
return (
<button id="value-button" onClick={increaseValue}>
{ counterValue }
</button>
)
}
渲染过程
每当组件的状态或支柱更改时，函数的代码将再次运行。
这意味着每次点击“ value-button”将：
- 增加反价。
- RedeClare resamvalue，创建一个新的内存参考。
- 执行返回块。
反应使用效果钩
假设您要执行操作，例如显示警报，每次渲染组件时。
您可以使用使用效果钩为组件添加副作用。它具有3种不同的配置： [somestateValue] ， [] 和 no依赖关系。
这是一个简单的示例，每当组件渲染时会触发警报：
import React, { useEffect, useState } from "react"
export const Counter = () => {
const [counterValue, setCounterValue] = useState(0)
const increaseValue = () => {
setCounterValue(counterValue + 1)
}
useEffect(() => {
alert('I run whenever the component renders')
})
return (
<button id="value-button" onClick={increaseValue}>
{ counterValue }
</button>
)
}
在JavaScript的单线程环境中，事件循环处理useEffect之类的任务。 useEffect任务添加到任务队列中。
浏览器完成绘制屏幕更新（渲染）后，事件循环运行了排队的任务。
这不会阻止渲染过程。
空数组[]
如果每个状态上的警报听起来都很烦人，则可以将第二个参数添加到useEffect，一个空数组[]。
这确保效果在组件的初始渲染后仅运行一次：
useEffect(() => {
alert('I run once, after the component is first rendered')
}, [])
特定依赖性
对于链接到一个或多个状态的特定副作用，您可以将它们添加到依赖项数组中。
useEffect然后在任何一个状态发生变化时都会执行：
useEffect(() => {
alert('I run whenever counterValue changes.')
}, [counterValue])
请记住，只有在依赖项数组中使用的状态是一种很好的做法。
请注意“无依赖”场景，因为它可能导致不必要的效果和性能问题。
请继续关注更多关于React渲染的信息，我们将在以后的帖子中深入研究useCallback和useMemo钩子！