004 虚拟DOM和真实DOM

虚拟DOM是一个js对象

const VDOM = 
hello, React
 
ReactDOM.render(VDOM, document.getElementById('test'))
console.log(VDOM);
console.log(document.getElementById('test'));
// debugger 打断点
  
    // 虚拟DOM本质就是object对象
    // 虚拟DOM轻，真实DOM重，虚拟DOM是react内部在使用，无需真实DOM那么多的属性
    //　虚拟DOM最终会被react转换为真实DOM，呈现在页面上

005 JSX语法规则

XML早期用于存储和传输数据

const myId = 'aTgUigu'
    const myData = 'Hello,Re123act'

    const VDOM = (
      

        

        {myData.toLowerCase()}
        
        

        {myData.toLowerCase()}
        
        
        
      
    )
    ReactDOM.render(VDOM, document.getElementById('test'))

jsx语法规则

1. 定义虚拟dom时，不加引号

2. 标签中混入js表达式时用{} 【表达式：区分Js语句和表达式，一个表达式会产生一个值 例如

表达式：定义一个 const x = ？？？ 只要？？？会返回一个值就是表达式】

(1)a

(2) a+b

(3) demo(1) 函数表达式

(4) function test() {}

语句：

1. if()

2. for

3. switch()

4. 样式的类名指定不要用class， 要用className。 因为class时ES6里面的关键词，需要避开

5. 内联样式要用，style = {{key: value}}的形式， 复杂单词需要用小驼峰形式

6. 只能有单一根元素 类似vue

7. 标签必须闭合[或者使用自闭和]

8. 关于标签首字母

1）如果是小写字母开头，则将该标签转换为HTML同名元素，没有这个标签则报错

2）如果是大写字母开头，react则去渲染对应组件

006 jsx小练习

react只能遍历数组，不能遍历对象

遍历数组时：这里要index 用于diff算法

007 组件与模块化

提高js的运行效率 和vue差不多

008 开发者工具的安装

一个插件

009 函数式组件

执行顺序

1. 执行了ReactDOM.render，找到了Demo组件
2. 发现组件是函数定义的，然后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现