ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

React学习日记1

2022-04-11 10:35:50  阅读:180  来源: 互联网

标签:学习 DOM JavaScript js React 日记 VDOM hello


001

React Introduction

react只需要关注页面,react是将数据渲染成HTML视图的开源JavaScript库

Facebook开发

原生JS的缺点

  1. 原生JavaScript操作DOM繁琐效率低(DOM-API操作UI)
  2. 使用JavaScript直接操作DOM,浏览器会引起大量的重绘重排
  3. 原生JavaScript没有组件化的编码方案,代码复用率低

React的特点

  1. 采用组件化模式,声明式编码,提高开发效率和组件复用率
  2. 在React Native中可以使用React语法进行移动端开发(Android,iOS)
  3. 使用虚拟DOM+DIff算法,尽量减少与真实DOM的交互

002

babel.min.js:

  1. ES6 ⇒ ES5
  2. jsx ⇒ js

一个hello React案例

<!-- 这三个核心库引入一定要按照顺序 -->
<!-- 引入核心库 -->
<script src="<https://unpkg.com/react@^16/umd/react.production.min.js>"></script>
<!-- 通过react操作DOM -->
<script src="<https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js>"></script>
<!-- Babel -->
<script src="<https://unpkg.com/babel-standalone@6.26.0/babel.js>"></script>

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 此处一定要写Babel -->
  <script type="text/babel">
    // 1. 这里不用加引号
  const VDOM = <h1>hello, React</h1> 
  // 2. 渲染虚拟DOM到页面  这里接收两个参数(第一个是渲染的DOM,第二个是容器)
  ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>

003

创建虚拟DOM的两种方式

1. 使用jsx
<script type="text/babel">
    const VDOM = <h1 id="title">hello, React</h1> 
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
2. 通过js[不推荐]  最终jsx会被Babel翻译成js这样
<script type="text/javascript">
    const VDOM = React.createElement('h1',{id:'title'},'hello react')
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>

标签:学习,DOM,JavaScript,js,React,日记,VDOM,hello
来源: https://www.cnblogs.com/Nemo-so-cute/p/16128833.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有