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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.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>

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

三.基本原理图

以上是 React技术栈-虚拟DOM和DOM diff算法 的全部内容， 来源链接： utcz.com/z/384434.html

回到顶部