React学习笔记-一、React入门

时间：2024-05-06 07:08:34

1、React是什么？

React是用于构建用户界面的JavaScript库。操作DOM呈现页面。是一个将数据渲染成HTML视图的开源JavaScript库。

2、React由Facebook开发开源的

3、为什么学React

原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）。使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。原生JavaScript没有组件化编码方法，代码复用率低。

4、React的特点

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

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

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

5、React为什么高效

使用虚拟DOM，不总是直接操作页面真实DOM，DOM Diffing算法，最小化页面重绘

6、学习React之前要掌握的JavaScript基础

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

7、React的基本使用

（1）React的相关js库

1、react.js：React核心库

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

3、babel.min.js：解析jsx语法代码转化为js代码的库

（2）创建虚拟DOM的两种方法

1、纯js方式（一般不用）

2、jsx方式

（3）虚拟DOM和真实DOM

1、React提供了一些API来创建一种“特别”的一般js对象

/* 创建一个简单的虚拟DOM对象 */
const VDOM = React.createElement('xx',{id:'xx'},'xx')

2、虚拟DOM对象最终都会被React转换为真实的DOM

3、编程时只需要操作react的虚拟DOM的相关数据，react会转换为真实DOM变化而更新姐面

（4）React JSX

全称：JavaScript XML

  1. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  2. 作用: 用来简化创建虚拟DOM
    1. 写法：var ele = <h1>Hello JSX!</h1>
    2. 注意1：它不是字符串, 也不是HTML/XML标签
    3. 注意2：它最终产生的就是一个JS对象
  3. 标签名任意: HTML标签或其它标签
  4. 标签属性任意: HTML标签属性或其它
  5. 基本语法规则
    1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  6. babel.js的作用
    1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

（5）渲染虚拟DOM(元素)

  1. 语法:  ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
      1. 参数一: 纯js或jsx创建的虚拟dom对象
      2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

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

（1）模块
  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  3. 作用：复用js, 简化js的编写, 提高js运行效率
（2）组件
  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件： 一个界面的功能更复杂
  3. 作用：复用编码, 简化项目编码, 提高运行效率
（3）模块化

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

（4）组件化

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

相关文章