react小白知识点以及面试知识标题1React入门

一、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、组件化：

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

 

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

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