為什么 render 里的 log 被調(diào)用兩次？
import React from 'react'
class Clock extends React.Component {
?constructor(props){
? ?super(props)
? ?this.state = {
? ? ?time: new Date()
? ?}
?}
?//生命周期函數(shù) 組件創(chuàng)建完成
?componentDidMount(){
? ?//創(chuàng)建定時(shí)器,間隔 1s
? ?this.timer = setInterval(() => {
? ? ?this.setState({
? ? ? ?time: new Date()
? ? ?})
? ?}, 1000);
?}
?//生命周期函數(shù) 組件更新
?componentDidUpdate(currentProps,currentState){
? ? console.log(currentState);
?}
?//生命周期函數(shù) 組件即將銷毀
?componentWillUnmount(){
? ?clearInterval(this.timer)
?}
?render(){
? ? console.log('---render---'); //調(diào)用兩次
? ?
? ?return (
? ? ?<div>
? ? ? ?<h2 >電子時(shí)鐘</h2>
? ? ? ?<br></br>
? ? ? ?<h1>{this.state.time.toLocaleTimeString()}</h1>
? ? ?</div>
? ?)
?}
}
export default Clock;
2020-06-28
每次state數(shù)據(jù)更新，都會(huì)重新走render方法重新渲染，然后通過diff算法只更新有數(shù)據(jù)更新的地方。