React基础教学——学习笔记

React简介：

React是一个用于构建用户界面的JavaScript库。

React主要用于构建UI，很多人认为React属于MVC中的V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点：

1、声明式设计——可以轻松描述应用；

2、高效——React通过对DOM的模拟，最大限度地减少与DOM的交互。

3、灵活——React可以与已知的库或框架很好配合；

4、JSX——JSX是JavaScript语法的扩展，建议使用；

5、组件——通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中；

6、单响应的数据流——React实现了单向响应的数据流，减少重复代码，比传统数据绑定更简单。

围绕React的技术栈主要包括：React、redux、react-redux、react-route，…

官网：React – A JavaScript library for building user interfaces

中国：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

特点：

（1）使用JSX语法创建组件、实现组件开发、为函数式UI编程方式打开了大门；

（2）性能高：通过diff算法、虚拟DOM实现视图的高效渲染和更新；

一处学习随处编写。

核心：

（1）虚拟DOM：

（2）Diff算法：

总结：

1、JSX中添加属性时，使用className代替class，像label中的for属性，使用htmlFor代替；

2、JSX创建Dom的时候，所有节点必须有唯一根元素进行包裹；

3、JSX语法中，标签必须成对出现，如果是单标签，必须自闭合；/

4、在JSX中可以直接使用JS语句，需要用{}包裹。

5、JSX只能出现表达式，不能出现语句。

6、在JSX中注释{/* */};

---

四——React中的组件/模块、组件化/模块化

1、基本概念：

1）组件：

a、一个应用、板块、页面中用于实现某个局部的功能（包括Html、js、css等）；

b、把这些局部功能组装到一起就形成了完整的一个大的功能；

c、主要目的是，复用代码，提高项目运行效率。

2）组件化：如果一个应用是用多组件的方式进行综合开发的，那么这个应用就是组件化应用；

3）模块：多个组件形成模块，或者是一个提供特定功能的js文件，主要特点在于耦合性底，可移植性高，执行效率好。

4）模块化：如果一个应用都是用模块的形式来构建的，那么这个应用就是模块化应用。

2、React中组件的创建方式：

1）构造函数创建组件

a、使用构造函数来创建组件时，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；

b、必须要向外return一个合法的JSX创建的虚拟DOM；

c、Demo: 简单组件 / 带参数组件 / 复合组件

2）class关键字创建组件

3）区别

a、构造函数创建的组件叫：无状态组件；

b、class关键字创建的组件叫：有状态组件；

c、有状态组件与无状态组件的本质区别在于是否有state（状态）属性。

---

五、React中的State（状态）

1、什么是state?

1）React 把组件看成是一个状态机（State Machines）, 通过状态 (State) 去操作状态机。

2）在开发中, 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

3）在React 中，只需更新组件的 state，然后根据新的 state 重新渲染用户界（不要操作 DOM）。

---

六、props和state混合使用

Demo: 定义一个组件描述一条狗

1）需求

1) 分析props和state的使用场景?

2) props的使用细节?

3) 单组件中, 两者的区别?

2）核心代码

a) 定义props和state

b) 渲染页面

c) 业务处理

d) 运行结果

3）案例总结

a、在单组件中, props一般用于接收外部传入的数据; 而state则用于记录组件内部数据, 而且是需要经常改变的数据。

b、state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

c、props更多是组件间传递数据的一种方式，props同样也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改。

---

七、Ref的使用

1）定义 ：Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素。

2）使用场景

a) 处理焦点、文本选择或媒体控制。

b) 触发强制动画。

c) 集成第三方 DOM 库。

3）注意 ：官方提示, 如果可以通过声明式实现，则尽量避免使用 refs。话外音: React无法控制局面的时候，就需要直接操作Refs了。

4）案例使用 ：让输入框获得焦点? 核心代码