React.js 简介以及一些基本概念

React 是什么

React 跟angular.js 和Vue.js 一样是构建用户界面的js库
2011 年由Facebook 工程师Jordan Walke创建
在 2013 开源

React 的优势

原生js的痛点

原生的Javascript 操作DOM繁琐，效率低(DOM-API 操作UI）
使用Javascript 直接操作DOM，样式数据改变时，浏览器会进行大量重绘重排
原生Javascript 没有组件化编码方案，代码复用率低。

React的优点

采用组件化模式，声明式编码，提高开发效率以及组件复用率。
命令式编码：必须告诉程序做一件事情的每个步骤.
声明式编码：告诉程序做1个件事，不需要关心步骤，如何实现.
在React Native 中可以使用React语法进行移动端(android / ios)开发.
使用虚拟DOM 和优秀的 diffing（比较出不同的地方）算法，尽量减少于真实DOM 的交互.
这个是React的核心优势

什么是虚拟DOM 和其优势

先看下面原生html ES6 js 的例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="graphics_card"> </div> <script> let cardList = [ { 
     card: 'RTX4090', comment: '旗舰，烧接口'}, { 
     card: 'RTX4080', comment: '加价，智商检测卡'}, { 
     card: '7900XTX', comment: '铺货弱，AMD YES!'} ] let cardHtml = ""; cardList.forEach(card=>{ 
      cardHtml += `<li>${ 
       card.card} - ${ 
       card.comment}</li>` // ` but not '' }); document.getElementById('graphics_card').innerHTML = cardHtml </script> </body> </html>

document.getElementById('graphics_card').innerHTML = cardHtml

而这种DOM重绘时是不会重用旧有DOM的，当数据量大时，例如在页面中展示1000条数据，当增加1条数据到1001时，旧有的1000数据的dom还是会被重绘，效率就不高了。
在这里插入图片描述

而React 会引入一种虚拟DOM（VDOM）的东西，在代码和页面真实 DOM中构建了1个中间层
当数据首次被页面展示，因为中间VDOM层的存在，效率肯定时比原生更低的
但是当网页数据发生变化时， React会生成新的VDOM 然后与内存中的旧VDOM比较，然后只会更新被更改or新增的真实DOM。这就是差异了
在这里插入图片描述

React怎样构建VDOM， Hello word 例子

react的依赖

❯ npm list reactprj1@1.0.0 /home/gateman/Projects/jsproject/reactprj1 ├── babel-standalone@6.26.0 ├── react-dom@15.7.0 └── react@15.7.0

例子：

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <!-- define a container --> <script src="../node_modules/react/dist/react.min.js"></script> <script src="../node_modules/react-dom/dist/react-dom.min.js"></script> <script src="../node_modules/babel-standalone/babel.min.js"></script> <script type="text/babel"> //create virtual dom , single quotes is not need const VDOM = <h1> Hello, React</h1> //appy virtual dom to page ReactDOM.render(VDOM, document.getElementById("test")) //first parameter is virtual dom, second parameter is container (div) </script> </body> </html>

很简单，无非构建1个VDOM对象，然后利用ReactDOM.reader()方法去渲染这VDOM对象。映射成真实DOM对象

在例子中，
我们引用了babel 这个依赖，注意script的类型时text/babel 而不再是默认的text/javascript
这就是所谓的jsx

例如下面这句, 在js中肯定是有语法错误的，因为我们没有使用双引号。

 const VDOM = <h1> Hello, React1 </h1>

所以我们在React中更多的是在写jsx 而不是原生js，当然浏览器是不认识js的，所以我们需要babel和依赖去翻译jsx
当运行时
我们会在浏览器见到这warning
在这里插入图片描述
意思babel是在运行时翻译jsx的，并不建议在生产环境中使用这种翻译模式，因为更耗性能，在生产环境中应该像用webpack那样先把jsx 翻译好再部署

为什么要使用jsx 而不是js

const VDOM = React.createElement('h1', { 
   id: "title"}, "Hello, React")

 const VDOM = <h1 id="title"> Hello, React1 </h1>

貌似差不多，

但是当我们构建1个复杂的嵌套VDOM是时

jsx可以很简单地实现

 const VDOM = ( <h1 id="title"> <span id="subtitle"> Hello, React</span> </h1> )

而原生js要写成函数嵌套，

const VDOM = React.createElement('h1', { 
   id: "title"}, React.createElement('span', { 
   id:"subtitle"}, "Hello, React") )

明显jsx方式更优雅，可读性更好，在构建VDOM更像在写html

当然babel实际上会把jsx的方式翻译成原生js的方式，所以预翻译就很重要了.

VDOM 在内存里究竟是个什么东西

很简单，我们只需要再代码中print一下

 ReactDOM.render(VDOM, document.getElementById("test")) ; console.log('VDOM is:'. VDOM); console.log(typeof VDOM); console.log(VDOM instanceof Object); debugger; //add a breakpoint stop here

在这里插入图片描述
可见它无非就是js的一般对象

到此这篇React.js 简介以及一些基本概念的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： React 开发者完全指南：React.FC（）、函数组件和更多

下一篇： Vue.js与React的全面对比

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/3303.html