首页 > 其他分享> > React学习日记2

React学习日记2

2022-04-11 10:32:51 作者：互联网

004 虚拟DOM和真实DOM

虚拟DOM是一个js对象

const VDOM = <h1 id="title">hello, React</h1> 
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 = (
      <div>
        <h2 id={myId.toLowerCase()} className = 'title'>
        <span style = {{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <h2 id={myId.toLowerCase()+'2'} className = 'title'>
        <span style = {{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <input type="text"/>
        <Good/>
      </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))

jsx语法规则

定义虚拟dom时，不加引号
标签中混入js表达式时用{} 【表达式：区分Js语句和表达式，一个表达式会产生一个值例如

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

(1)a

(2) a+b

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

(4) function test() {}

语句：

if()
for
switch()
样式的类名指定不要用class，要用className。因为class时ES6里面的关键词，需要避开
内联样式要用，style = {{key: value}}的形式，复杂单词需要用小驼峰形式
只能有单一根元素类似vue
标签必须闭合[或者使用自闭和]
关于标签首字母

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

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

006 jsx小练习

<body>
  <div id="test"></div>
  <script type="text/babel">
    const data = ['Augular','React','Vue']
    // const obj = ['Augular','React','Vue']

    const VDOM = (
      <div>
        <h1>前端js列表</h1>
        <ul>
          {
            //react只能遍历数组，不能遍历对象
            //这里要index 用于diff算法
            data.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>  
      </div>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</body>

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

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

007 组件与模块化

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

008 开发者工具的安装

一个插件

009 函数式组件

<body>
  <div id="test"></div>
  <script type="text/babel">
    // 1.创建函数式组件 本质上是一个函数，不是我在调用，式React帮我们再调用
    function Demo(){
      console.log(this); //script内容经过Babel翻译，开启了一个严格模式（禁止自定义的函数中的this指向window）
      return <h2>我式函数定义的组件【简单组件】的定义</h2> 
    }
    
    // 2. 渲染组件到页面 这里需要用到标签
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    // ReactDOM.render(demo(),document.getElementById('test')) 这个写法也可以

  </script>
</body>

执行顺序

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

标签：学习,const,DOM,React,test,getElementById,组件,日记,VDOM
来源： https://www.cnblogs.com/Nemo-so-cute/p/16128836.html