zoukankan      html  css  js  c++  java
  • 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>.浏览器打开以上代码渲染结果

     

  • 相关阅读:
    Can't locate ... in @INC
    c++写一个类后编译发现class重定义
    python with
    遍历Java Map
    mod_jk notes
    NPM使用总结
    Yeoman
    Java中的Marker Interfaces有什么用
    有关Ehcache的内容的引用和Java的deep copy
    JDBC的PreparedStatement语句使用记录
  • 原文地址:https://www.cnblogs.com/yinzhengjie/p/12131323.html
Copyright © 2011-2022 走看看