本文共 778 字,大约阅读时间需要 2 分钟。
useEffect不带第二个参数
useEffect类似于React的生命周期方法,用于在组件加载和更新时执行代码。在React中,useEffect默认接受一个函数作为回调,执行时会在组件的挂载和更新时被调用。如果需要在特定条件下执行回调,可以传递依赖数组作为第二个参数。但有时候,我们并不需要依赖数组,直接传递一个函数即可。
例如:
useEffect(() => {// 更新文档标题document.title = 你点击了${count}次;});
这样写法在组件第一次加载和每次状态更新时都会被执行。
示例:
import React, { useState, useEffect } from 'react';import { Button } from '@alifd/next';
export default function Example() {const [count, setCount] = useState(0);
useEffect(() => { console.log(`hook-----${new Date()}`); console.log(`次数 ${count}`); document.title = `你点击了${count}次`;});return ( 你点击了 {count} 次
); }
第一次加载时,控制台会打印:
hook-----[当前日期时间]次数 0
每次点击按钮"Click me",控制台会打印:
hook-----[当前日期时间]次数 [当前计数值]
这个方法适用于在组件加载和更新时执行一次性操作,比如设置页面标题、执行初始数据加载等。
转载地址:http://euvm.baihongyu.com/