React全家桶(简介一)

官网：react官方网站

一.React可以克服原生JS的以下缺点：

1.原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；
2.JS直接操作DOM会使浏览器进行大量的重绘重排；
3.原生JS没有组件化编码方案，代码复用率低

二.React特点

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

• 在React Native中可以使用React语法进行_移动端开发_；

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

react.js （核心库）：核心库要在react-dom之前引入

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

babel.min.js：解析JSX语法代码转为JS代码的库，即ES6==>ES5;JSX==>JS

全称: JavaScript XML，是react定义的一种类似于XML的JS扩展语法，本质是React.createElement(component, props, …children)方法的语法

三.为什么要用JSX

1. 更加简单地创建虚拟DOM

（1）使用JSX创建虚拟DOM

（2）使用JS创建虚拟DOM（用原生JS，不用babel，开发中不使用）

2. JSX创建虚拟DOM的方法是JS方法的语法糖

四.虚拟DOM

1. 本质是Object，即一般对象（不是数组对象和函数对象）
2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM中那么多属性
3. 虚拟DOM最终会被react转换为真实DOM呈现在页面上

五.模块

1. 向外界提供特定功能的js程序。随着业务逻辑增加，代码越来越多且复杂，此时js一般会拆成多个js文件来编写，一般一个js文件就是一个模块
2. 作用：复用js，简化js的编写，提高js的运行效率
3. 模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

React面向组件编程

 

 

 

 

 

 类式组件必须要继承react的内值类React.Component
2.一定要写render函数，且要有返回值
3.render是放在类的原型对象上，供实例使用。
4.render中的this指向类的实例对象（原因见下方） <=> 类式组件的实例对象。

组件实例的三大属性

针对于类式组件，hooks可以让函数式组件也有三大属性

state属性: state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机",
通过更新组件的state来更新对应的页面显示(重新渲染组件)

props属性:

1. 作用：通过标签属性（创建虚拟DOM时直接添加的数据）从组件外向组件内传递变化的数据
2. 传递props，即传递标签属性，props批量传递标签属性
3. 每个组件对象都会有props(properties的简写)属性
4. 组件标签的所有属性都保存在props中
5. 注意: 组件内部不要修改props数据

refs属性:组件内的标签可以定义ref属性来标识自己。this.refs拿到真实DOM

回调ref

1. 内联函数（推荐）

1. 函数中的参数currentNode是ref所在的节点

2. input1是类的属性，即直接绑定到类里，而不是像字符串ref一样添加到refs对象里
   回调函数：有定义、没有执行（函数名））、最终执行（别人调用）

受控组件和非受控组件

页面中所有的输入类DOM现用现取，即通过ref标识DOM，进而获取数据