為什么 render 里的 log 被調用兩次？
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;
2020-06-28
每次state數據更新，都會重新走render方法重新渲染，然后通過diff算法只更新有數據更新的地方。