react 虛拟DOM和DOM diff算法

1.虛拟DOM

   可以更少的去操作真實DOM ,更新虛拟DOM界面不會重新渲染

2.diff算法是來判斷哪片區域需要更新，哪些不需要更新

制作下面效果 ，時間每隔一秒更新

class Life extends React.Component{
    constructor(props){
        super(props)
        this.state={
            date: new Date()
        }
    }
    componentDidMount(){
        setInterval(() => {
            this.setState({
                date:new Date()
            })
        },1000)
    }
    render(){
        return(
            <div>
                Hello: <input type='text'></input>
                <span>{this.state.date.toTimeString()}</span>  //toTimeString必須有否則有問題
                <span>{this.props.msg}</span>
            </div>
        )
    }

}
           

新、舊樹比較差異會進行diff算法

diff算法的原理