React日记（一）入门

描述

用于动态构建用户界面的JavaScript库（只关注视图）、由Facebook开源

特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。

2.在React Native中可以使用React语法进行移动端开发。

使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

前置知识

判断this指向、class（类）、ES6语法规范、npm包管理器、原型及原型链、数组常用方法、模块化。

官网：https://react.docschina.org/

React高效原因

1.使用虚拟DOM，不总是直接操作页面真实DOM。

2.DOM Diffing算法，最小化页面重绘。

相关js库

1.react.js：React核心库。

2.react-dom.js：提供操作DOM的react扩展库。

3.babel.min.js：解析JSX语法代码转为JS代码的库。

在线引入（需按序）：

创建虚拟DOM的两种方式

1.js方式（一般不用）

2.jsx方式

hello react：

多级DOM：

const VDOM=（

）

虚拟DOM

1.本质是Object类型的对象（一般对象）。

2.虚拟DOM比较“轻”，真实DOM比较“重”。虚拟DOM是react在用，无需真实DOM上那么多的属性。

3.虚拟DOM最终会被react转化为真实DOM，呈现在页面上。

React JSX

1.全称：JavaScript XML

2.react定义的一种类似于XML的JS扩展语法

3.本质是React.createElement(component,props,...children)方法的语法糖

4.作用：简化创建虚拟DOM

写法：var ele=

hello jsx

注意：它不是字符串，也不是HTML/XML标签，它最终产生的就是一个JS对象。

5.标签名任意：HTML标签或其他标签

jsx语法规则

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}（id={myId.toLowerCase()}）。

3.样式的类名指定不要用class，要用className。

4.内联样式要写成style={{color:’white’}}形式。

5.创建虚拟DOM只能有一个根标签。

6.标签必须闭合（自结束在>内加/）。

7.引入自定义组件的标签首字母大写。

使用列表输出数组中的内容：

（B站尚硅谷）