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算法的原理