React基础知识

2021-02-02 本文已影响0人北风吹_yfy

一、定义

React 是用于构建用户界面（视图）的 JavaScript 库。它是由国外的 Facebook 开发的，且是开源的。

二、为什么学 React

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

三、React 特点

1、采用组件化模式、声明式编码，提高开发效率及组件复用率；
2、在 React Native 中可以使用 React 语法进行移动端开发；
3、使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互。

四、虚拟 DOM

1、本质是 Object 类型的对象（一般对象）
2、虚拟 DOM 比较“轻”，真实 DOM 比较“重”，原因是虚拟 DOM是 React 内部使用的，无需真实 DOM 上那么多的属性；
3、虚拟 DOM 最终会被React 转化为真实 DOM，呈现在页面上。

Vitual.png

五、jsx 语法规则

1、定义虚拟 DOM 时，不要写引号，可用()包裹；
2、标签中混入 JS 表达式时要用{}；
3、样式的类名指定不要用 class，要用 className；
4、内联样式，要用 style = {{key: value}}的形式去写；
5、只允许有一个根标签；
6、标签必须闭合；
7、标签首字母
（1）若首字母小写，则将该标签转为 HTML 中的同名元素，若 HTML 中无对应的同名元素，则报错；
（2）若首字母大写，react 就去渲染对应的组件，若组件未定义，则报错。

注意
区分 js 语句（代码）和 js 表达式：
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
例如：
（1）a
（2）a + b
（3）test (1)
（4）arr.map ()
（5）function test () {}
语句（代码）
例如：
（1）if ()
（2）for ()
（3）switch () {}

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

模块

1、定义：向外提供特定功能的 js 程序，一般就是一个 js 文件；
2、为什么要拆成模块：随着业务逻辑增加，代码越来越多切复杂；
3、作用：复用 js，简化 js 的编写，提高 js 运行效率。

组件

1、定义：用来实现局部功能效果的代码和资源的集合（html/css/js/image/video等等）
2、为什么拆分成组件：界面功能的复杂化
3、作用：复用编码，简化项目编码，提高运行效率

模块化

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

组件化

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

六、React 面向组件编程

函数式组件（无状态组件）

a.png

类式组件（有状态组件）

类的基础点

1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写；
2、若果 A 类继承了 B 类，且A 类中写了构造器，那么 A 类构造器中的 super 是必须要调用的；
3、类中所定义的方法，都是放在类的原型对象上的，供实例去使用，且类中定义的方法都默认开启了严格模式。

类式组件的写法

b.png

image.png

类组件的 state

（1）state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）
（2）组件被称为“状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件）
（3）组件中的 render 方法中的 this 为组件实例对象
（4）组件自定义方法中的 this 为 undefined ，解决方法：
a. 在构造器中强制绑定 this，通过函数对象的 bind()；
b. 箭头函数
（5）状态数据，不能直接修改或更新，必须使用 setState() 方法。

类组件的 props