React基础篇之虚拟DOM

作者: 硅谷干货 | 来源:发表于2021-12-04 11:14 被阅读0次

React基础篇之虚拟DOM
React基础篇之JSX
浅谈react基础
React 基础学习总结
React之JSX
React 更新机制
React element tree 是什么？和 Virtual
几种前端框架的选择对比
react之虚拟dom和diff算法
React native 常用组件之View

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" > /* 此处一定要写babel */
        //1.创建虚拟DOM
        const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

JS创建虚拟DOM

<script type="text/javascript" > 
  //1.创建虚拟DOM
  const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM,document.getElementById('test'))
</script>

JSX创建虚拟DOM

<script type="text/babel" > /* 此处一定要写babel */
  //1.创建虚拟DOM
  const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
      <span>Hello,React</span>
    </h1>
  )
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟DOM与真实DOM

<script type="text/babel" > /* 此处一定要写babel */
  //1.创建虚拟DOM
  const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
      <span>Hello,React</span>
    </h1>
  )
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM,document.getElementById('test'))

  const TDOM = document.getElementById('demo')
  console.log('虚拟DOM',VDOM);
  console.log('真实DOM',TDOM);
  debugger;
  // console.log(typeof VDOM);
  // console.log(VDOM instanceof Object);
  /* 
      关于虚拟DOM：
        1.本质是Object类型的对象（一般对象）
        2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
        3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
    */
</script>