为什么 render 里的 log 被调用两次?

来源:3-3 React 生命周期

雨轩娇子

2020-05-30 14:43

import React from 'react'


class Clock extends React.Component {

 constructor(props){

   super(props)

   this.state = {

     time: new Date()

   }

 }

 //生命周期函数 组件创建完成

 componentDidMount(){

   //创建定时器,间隔 1s

   this.timer = setInterval(() => {

     this.setState({

       time: new Date()

     })

   }, 1000);

 }

 //生命周期函数 组件更新

 componentDidUpdate(currentProps,currentState){

    console.log(currentState);

 }

 //生命周期函数 组件即将销毁

 componentWillUnmount(){

   clearInterval(this.timer)

 }

 render(){

    console.log('---render---'); //调用两次

   

   return (

     <div>

       <h2 >电子时钟</h2>

       <br></br>

       <h1>{this.state.time.toLocaleTimeString()}</h1>

     </div>

   )

 }

}

export default Clock;


写回答 关注

1回答

  • qq_随随念_0
    2020-06-28 22:36:54

    每次state数据更新,都会重新走render方法重新渲染,然后通过diff算法只更新有数据更新的地方。

基于实例的 React16 傻瓜课程

通过一系列简单有趣的例子,让你了解 React16 的基本概念和新特性

22372 学习 · 106 问题

查看课程

相似问题