react入门学习

一、react官网

1. 英文官网: https://reactjs.org/

2. 中文官网: https://react.docschina.org/

二、React的特点

1. 声明式编码

2. 组件化编码

3. React Native 编写原生应用

4. 高效（优秀的Diffing算法）

三、React高效的原因

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

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

四、相关js库

1. react.development.js：React核心库。

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

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

注意：这三个js核心库有顺序，react.development.js要在react-dom.development.js前加载

五、关于虚拟DOM

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

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

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

六、关于JSX

1. 全称是JavaScript XML

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

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

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

1. 写法：var ele = <h1>hello jsx</h1>

2. 注意：他不是字符串，也不是HTML/XML标签

3. 注意：他最终生产的是一个js对象

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

6. 标签属性任意：HTML属性或其他

7. 基本语法规则

1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

8. babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

七、渲染虚拟DOM(元素)

1. 语法: ReactDOM.render(virtualDOM, containerDOM)

2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

3. 参数说明

1. 参数一: 纯js或jsx创建的虚拟dom对象

2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

八、JSX语法规则

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

2. 标签中混入JS表达式时不要用{}

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

4. 内联样式要用style = {{key:value}}的形式去写，并且要用驼峰样式

5. 虚拟DOM必须只有一个根标签

6. 标签必须闭合

7. 标签首字母

1. 若是首字母小写则将该标签转为html中同名元素，如哦html没有同名元素则报错

2. 若是首字母大写在，react去渲染对应组件，若组件没定义，则报错

九、模块与组件、模块化与组件化的理解

1. 模块：

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

2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

3. 作用：复用js, 简化js的编写, 提高js运行效率

2. 组件：

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

2. 为什么要用组件： 一个界面的功能更复杂

3. 作用：复用编码, 简化项目编码, 提高运行效率

3. 模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4. 组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用