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

React学习日记1

作者：互联网

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