感受hook里useEffect的执行顺序,hook倒计时

本文基于之前创建的react-app脚手架文件
App.tsx

import React from 'react'function App() {const [count, setCount] = React.useState(5)console.log('1')React.useEffect(() => {// 实现count每一秒-1console.log('2')let timer = setInterval(() => {if (count > 0) {// console.log('count:', count)setCount(count - 1)}}, 1000)return () => {clearInterval(timer)}}, [count])console.log('3')return (<div className="App"><p>Hello,Dust</p><span>count:{count}</span></div>)
}export default App

执行结果:
注意观察每个console.log的位置,执行结果是实现一个5s的倒计时,每秒console里都会打印出"1,3,2"
说明useEffect的内容是最后执行,先执行之前之后的内容,这样也好理解"副作用"这个定义.

简单一点:去掉倒计时功能

import React from 'react'function App() {console.log('1')React.useEffect(() => {console.log('2')}, [])console.log('3')return (<div className="App"><p>Hello,Dust</p></div>)
}export default App

执行结果:(是不是直观多了)

感受hook里useEffect的执行顺序,hook倒计时相关推荐

在Angular单个的单元测试里，调用多次detectChange，会重复执行ngAfterViewInit hook吗
我的单元测试源代码: import { Component } from '@angular/core'; import { waitForAsync, ComponentFixture, TestB ...
【pytest】Hook 方法之 pytest_collection_modifyitems：修改测试用例执行顺序
pytest_collection_modifyitems 是在用例收集完毕之后被调用,可以用来调整测试用例执行顺序: 它有三个参数,分别是: session:会话对象: config:配置对象: i ...
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
关于PyTorch中的register_forward_hook()函数未能执行其中hook函数的问题
关于PyTorch中的register_forward_hook()函数未能执行其中hook函数的问题 Hook 是 PyTorch 中一个十分有用的特性.利用它,我们可以不必改变网络输入输出的结构, ...
MATLAB多个for循环嵌套的执行顺序、如何将生成的数据存放在一个向量或矩阵里？
MATLAB中多个for循环嵌套的执行顺序: 当有两个for循环时,先执行一次外部for循环,再将内部循环全部执行. 当有三个for循环时,先执行一次最外部for循环,再执行一次第二层for循环,最后 ...
uniapp里的mounted_uni-app 生命周期函数执行顺序
{{message}} 点击 import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { ...
排队器拦截_过滤器（Filter）和拦截器（Interceptor）的执行顺序和区别
首先建立一个SpringBoot工程,增加一个IndexController供测试使用. @Controller public class IndexController { @GetMapping( ...
php扩展实现hook,ThinkPHP3.2 扩展（钩子,HOOK）
Thinkphp 执行流程 /index.php ->require './ThinkPHP/ThinkPHP.php'; /ThinkPHP/ThinkPHP.php ->require ...
main线程子线程顺序_面试官：线程池如何按照core、max、queue的执行顺序去执行？详解...
前言这是一个真实的面试题. 前几天一个朋友在群里分享了他刚刚面试候选者时问的问题:"线程池如何按照core.max.queue的执行循序去执行?". 我们都知道线程池中代码执行顺 ...

感受hook里useEffect的执行顺序,hook倒计时

简单一点:去掉倒计时功能

感受hook里useEffect的执行顺序,hook倒计时相关推荐

最新文章

热门文章