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函数来实现类似的功能。