惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
U
Unit 42
Google DeepMind News
Google DeepMind News
B
Blog RSS Feed
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
雷峰网
雷峰网
Microsoft Security Blog
Microsoft Security Blog
爱范儿
爱范儿
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
罗磊的独立博客
GbyAI
GbyAI
Stack Overflow Blog
Stack Overflow Blog
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
L
LangChain Blog
Engineering at Meta
Engineering at Meta
量子位
有赞技术团队
有赞技术团队
博客园 - 【当耐特】
A
About on SuperTechFans
Y
Y Combinator Blog

博客园 - uxinxin

.NET10 中配置Swagger的记录 .NET10中通过appsettings.json配置文件获取信息的几个方法 学习使用Taurus的微服务群在.NET Framework4.8环境下的搭建 .net framework 中Owin 通过启动类 Startup.cs 使用 SignalR B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【八】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【七】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【六】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【五】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【四】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【三】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【二】 B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 .NET程序屏蔽一些无效蜘蛛的访问配置 asp.net 动态加载与卸载程序集的尝试(没有成功)欢迎解决的朋友留言告知 Framework 4.6.2下的SignalR使用,以及WPF下同步使用 CYQ.Data的XML操作的一些自己使用记录 IIS URL Rewrite将伪静态配置文件放在web.config外部 ASP.NET Core EF MVC 登录验证 一步步教你用html+div+css+js基于Jquery实现一套数字华容道游戏
react 16.8.4版本中的生命周期中的细节 在组件挂在时使用了定...
uxinxin · 2022-07-06 · via 博客园 - uxinxin

react 16.8.4版本中

如果页面加载时要挂在一个定时器,且里面在修改状态,一定不能写在render里面,需要写到生命周期函数 componentDidMount中,否则会导致循环更新页面状态反复调用render造成死循环

另外定时器的卸载可以统一放在componentWillUnmount里面进行处理,这样代码更合理,思路更清晰

 1         class Life extends React.Component {
 2             state={opacity:1}
 3             death=()=>{
 4                 clearInterval(this.timer)
 5                 ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
 6             }
 7             componentDidMount() {
 8                 this.timer=setInterval(() => {
 9                     let {opacity}=this.state
10                     opacity-=0.1
11                     if(opacity<=0) opacity=1
12                     this.setState({opacity})
13                 }, 200);
14             }
15             render() {
16                 console.log('render')
17                 const {opacity}=this.state
18                 return (
19                     <div>
20                         <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
21                         <button onClick={this.death}>不活了</button>
22                     </div>
23                 )
24             }
25         }
26         ReactDOM.render(<Life />,document.querySelector('#test'))
 1         class Life extends React.Component {
 2             state={opacity:1}
 3             death=()=>{
 4                 ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
 5             }
 6             componentDidMount() {
 7                 this.timer=setInterval(() => {
 8                     let {opacity}=this.state
 9                     opacity-=0.1
10                     if(opacity<=0) opacity=1
11                     this.setState({opacity})
12                 }, 200);
13             }
14             
15             componentWillUnmount(){
16                 clearInterval(this.timer)
17             }
18             render() {
19                 console.log('render')
20                 const {opacity}=this.state
21                 return (
22                     <div>
23                         <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
24                         <button onClick={this.death}>不活了</button>
25                     </div>
26                 )
27             }
28         }
29         ReactDOM.render(<Life />,document.querySelector('#test'))