函数公式网 周期函数 史上最详解React函数组件生命周期

史上最详解React函数组件生命周期

React函数组件是React中的一种组件类型,通常用于编写无状态组件或实现React Hooks。 与类组件相比,功能组件的生命周期相对简单。

在React 16.8之前,函数式组件没有生命周期的概念,但是通过React Hooks的引入,我们可以使用一些新的Hook函数来实现类似生命周期的功能。 以下是一些常用的 React Hooks 及其对应的生命周期函数

1.useEffect()

useEffect()是React中最常用的Hooks之一,可以用来处理组件的副作用,比如网络请求、DOM操作等。 useEffect() 的第一个参数是一个函数,当组件被挂载、更新和卸载时将被调用。 在函数组件中,useEffect()的第二个参数是一个数组,可以指定一个依赖列表,只有列表中的依赖发生变化时才会再次调用该函数。

useEffect()相当于类组件中componentDidMount()、componentDidUpdate()、componentWillUnmount()三个生命周期函数的组合。

举个例子:

useEffect

2.useLayoutEffect()

useLayoutEffect()和useEffect()类似,都可以用来处理组件的副作用。 不同的是useLayoutEffect()会在DOM更新之前同步调用这个函数,所以如果在这个函数中修改了DOM,视图会立即更新。

useLayoutEffect()相当于类组件中componentDidMount()和componentDidUpdate()这两个生命周期函数的组合,但会在DOM更新之前调用。

下面是一个例子:

useLayoutEffect

3.useMemo()

useMemo()可以用来优化性能 组件的,可以缓存计算结果,避免重复计算。 useMemo()的第一个参数是一个函数,当组件更新时会调用该函数,返回值作为useMemo()的计算结果。 如果依赖列表保持不变,useMemo() 将返回缓存的计算结果。 useMemo() 的第二个参数是一个依赖列表,只有当列表中的依赖发生变化时才会重新计算。

useMemo()相当于类组件中的shouldComponentUpdate()生命周期函数,用于判断组件是否需要更新。

这里有一个例子:

useMemo

4.useCallback()

useCallback()类似于useMemo()用于 优化组件的性能。 区别在于 useCallback() 返回一个函数,而不是一个值。

useCallback()的第一个参数是一个函数,当组件更新时会调用该函数,返回值作为useCallback()的返回值。 useCallback()的第二个参数是一个依赖列表,只有当列表中的依赖发生变化时,才会返回新的函数。

useCallback()相当于类组件中的shouldComponentUpdate()生命周期函数,用于判断组件是否需要更新。 它还可用于避免重新创建函数,优化性能。

下面是一个例子:

useCallback

5.useRef()

useRef()用于创建一个A引用对象 可以在组件的多个渲染中持续存在。

useRef() 的返回值是一个包含当前属性的对象,该属性的值可以在组件的多次渲染中保持不变。

useRef() 通常用于保存组件中的值,或者获取组件中 DOM 元素的引用。

下面是一个例子:

useRef

以上是常用的生命周期函数(Hook)及其在React函数组件中的用法。 需要注意的是,函数组件没有类组件中的生命周期函数,但是可以使用Hook函数来实现类似的功能。

本文来自网络,不代表函数公式网立场,转载请注明出处:https://www.cyhsb.com/zqhs/2926.html

【高考数学】这篇文章彻底读懂高考的分段函数

备考2022高中数学评分技巧:函数周期性和对称性最全总结,码起来

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

返回顶部