React学习日记2

2022-04-11 10:32:51 阅读：170 来源： 互联网

标签：学习 const DOM React test getElementById 组件日记 VDOM

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9