React技术栈-虚拟DOM和DOM diff算法

　　　　　　　　　　　React技术栈-虚拟DOM和DOM diff算法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.基本原理图

二.案例代码

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>虚拟DOM和DOM diff算法</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    <!--导入 React的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--导入提供操作DOM的react扩展库-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--导入解析JSX语法代码转为纯JS语法代码的库-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--导入解析解析props属性的库-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">
        
    //1>.定义组件
    class HelloWorld extends React.Component {
          constructor(props) {
            super(props)
            this.state = {
                date: new Date()
            }
          }

          componentDidMount () {
            setInterval(() => {
                  this.setState({
                  date: new Date()
                  })
            }, 1000)
          }

          render () {
            console.log('render()')
            return (
                  <p>
                    Hello, <input type="text" placeholder="Your name here"/>!&nbsp;
                    It is {this.state.date.toTimeString()}
                  </p>
            )
          }
    }

    //2>.渲染组件
    ReactDOM.render(<HelloWorld/>,document.getElementById('box1'))

    </script>
</html>

2>.浏览器打开以上代码渲染结果