标签：知识点 react DOM 标签 js React 组件

一、react入门

1.1 React的基本认识

　　1）、Faceboock开源的一个js库

　　2）、一个用来动态构建j用户界面的s库的

　　3）、React的特点：

　　　　Declarative(声明式编码)

　　　　Component-Based(组件式编程)

　　　　Learn Once, Write Anywhere(支持客户端服务器渲染)

　　　　高效、单项数据流

　　4）、React高效的原因

　　　　虚拟(virtual)DOM,不总是直接操作DOM(批量更新，减少更新次数)高效的DOM Diff算法，最小化页面重绘(减小页面更新的区域)

1.2 React的基本使用

　　1）、导入相关的js库（react.js，react-dom.js，babel.min.js）

　　2）、编码:

　　　　　　<div id="container"></div>

　　　　　　<script  type="text/babel">

　　　　　　　　let aa = 123;

　　　　　　　　let bb = "text";

　　　　　　　　ReactDOM.render(<h1 id={bb}>{aa}</h1>,containerDOM)

　　　　　　</script>

1.3 jsx的理解和使用

　　1）、理解：

　　　　全称 javascript jsx

　　　　react定义的一种类似于XML的js扩展语法：XML+js

　　　　作用：用来创建react虚拟DOM（元素）对象

　　2）、编码相关

　　　　js中直接可以嵌套标签，但标签要套js需要放在{ }中　　

　　　　在解析显示js数组时，会自动遍历显示

　　　　把数据的数组转换为标签数组：

　　　　　　let liArr = dataArr.map((item,index) =>{

　　　　　　　　return <li key = {index}>{item}</li>

　　　　　　})

　　3）、注意：

　　　　标签必须有结束、

　　　　标签的class必须改为className属性、

　　　　标签的style属性必须为双{{ }}列：{{color:"red",width:"12px"}}

1.4）、几个重要概念理解

　　1）、模块与组件

　　　　1、模块：

　　　　　　　　理解：向外提供特定的功能的js程序，一般就是一个js文件、

　　　　　　　　为什么：js代码更多更复杂、

　　　　　　　　作用：复用js，简化js的编写，提高js的运行效率、

　　　　2、组件：

　　　　　　　　理解：用来实现特定功能效果的代码集合（HTML、CSS、JS）、

　　　　　　　　为什么：一个界面的功能太过于复杂、

　　　　　　　　作用：复用编码、简化项目界面编码，提高运行效率

　　2）、模块化与组件化　　　　

　　　　1、模块化：

　　　　　　　　当应用的js都以模块来编写的，这个应用就是一个模块化的应用、

　　　　2、组件化：

　　　　　　　　当应用是以多个组件的方式实现功能，这个应用就是组件化的应用、

 

每天记录一节、促进自己成长加深印象，内容只限于初学者。

没写对的地方还请指点下ღ( ´･ᴗ･` )比心

标签：知识点,react,DOM,标签,js,React,组件
来源： https://www.cnblogs.com/MrQinjj/p/16350304.html

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