React(从0到1，小白入门到熟悉)

第一章：React入门

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

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

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

1.1初识React

学习React之前你要掌握的JavaScript基础知识

判断this的指向

class类

ES6语法规范

npm包管理器原型、原型链数组常用方法

模块化

1.1.1官网

(1)英文官网：http://reactjs.org/

(2)中文官网：http://react.docschina.org/

1.1.2介绍描述

（1）用于动态构建用户的JavaScript库

（2）由Facebook开源

1.1.3React的特点

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

1.1.4React高效的原因

(1)使用虚拟（virtual）DOM，不总是直接操作页面真实DOM

(2)DOM Diffing算法，最小化页面重绘

1.2 React 的基本使用

1.2.1相关js库

react.js：React核心库

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

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

1.2.2关于虚拟DOM:

• 本质是Object类型的对象（一般的对象）

• 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM那么多属性。

• 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

1.2.3 创建虚拟DOM的两种方式

• 纯JS方式（一般不用）
• JSX方式

1.2.4 jsx语法规则：

• 定义虚拟DOM时，不要写引号。

• 标签中混入JS表达式时要用{}。

• 样式的类名指定不要用class,要用className

• 内联样式，要用style ={{key:value}}形式书写

• 只有一个根标签

• 标签必须闭合。

• 标签首字母

  • 若小写字母开头，则将该标签转为html总同名元素，若html无该标签对应的同名元素，则报错

  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

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

1.3.1模块

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

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

• 作用：服用js，简化js的编写，提高js运行效率

1.3.2组件

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

• 为什么：一个界面的功能更复杂

• 作用：复用编码，简化项目编码，提高运行效率

1.3.3模块化

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

1.3.4组件化

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

第二章：React面向组件编程

2.1组件实例的三大核心属性1：state

2.1.1 理解

• state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

• 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

2.1.2注意：

• 组件中render方法中的this为组件实例对象

• 组件自定义的方法中this为undefined，如何解决？

  • 强制绑定this:通过函数对象的bind()

  • 状态数据，不能直接修改或更新

• 状态数据，不能直接修改或更新。

2.2 组件实例的三大核心属性2：props

2.2.1理解

• 每个组件对象都会有props(properties的简写)属性

• 组件标签的所有属性都保存在props中

2.2.2作用

• 通过标签属性从组件外向组件内传递变化的数据

• 注意：组件内部不要修改props数据

2.2.3编码操作

• 内部读取某个属性值

this.props.name

• 对props中的属性值进行类型限制和必要性限制

第一种方式（React b15.5开始已弃用）

Person.propTypes = {
name:React.PropTypes.string.isRequired
age:React.PropTypes.number

}

第二种方式（新）

使用prop-types库进限制（prop-types库）

Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number
}

• 扩展属性：将对象的所有属性通过props传递

• 默认属性值

Person.defaultProps = {
age:18,
sex:'男'
}

• 组件类的构造函数

constructor(props){
super(props)
console.log(props)
}

2.3 组件实例的三大核心属性3：refs与事件处理

2.3.1 编码

（1）字符串形式的ref

（2）回调形式的ref

 {this.input1} = c}/>

（3）createRef创建ref容器

myRef = React.createRef()

2.4 事件处理

（1）通过onXxx属性指定事件处理函数（注意大小写）

​ a、React使用的是自定义（合成）时间，而不是使用的原生DOM事件——为了更好的兼容性

​ b、React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）——为了高效

（2）通过event.target得到发生事件的DOM元素对象

2.5 收集表单数据

2.5.1 理解

包含表单的组件分类

​ a、受控组件

​ b、非受控组件

2.6 高阶函数和函数柯里化

2.6.1 高阶函数

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

• 若A函数，接受的参数是一个函数，那么A就可以称之为高阶函数
• 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

2.6.2 函数的柯里化

通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式。

2.7 组件生命周期

2.7.1理解

（1）组件对象从创建到死亡它会经历特定阶段

（2）React组件对象包含一系列勾子函数（声明周期回调函数）在特定的时刻调用

（3）我们定义组件时，在特定的生命周期回调函数中做特定的工作。

2.7.2生命周期的三个阶段（旧）

1、初始化阶段：由ReactDOM.render()触发----初次渲染

​ 1、constructor()

​ 2、componentWillMount()

​ 3、render()

​ 4、componentDidMount()

2、更新阶段：由组件内部this.setState()或父组件重新render触发

​ 1、shouldComponentUpdate()

​ 2、componentWillUpdate()

​ 3、render()

​ 4、componentDidUpdate()

3、卸载组件：由ReacyDOM.unmountComponentAtNode()触发

​ 1、componentWillUnmount()

2.7.3生命周期的三个阶段（新）

1、初始化阶段:由ReactDOM.render()触发—初次渲染

​ 1、construstor()

​ 2、getDerivedStateFromProps

​ 3、render()

​ 4、componentDidMount()

2、更新阶段：由组件内部this.setState()或父组件重新render触发

​ 1、getDerivedStateFromProps

​ 2、shouldComponentUpdate()

​ 3、render()

​ 4、getSnapshotBeforeUpdate

​ 5、componentDidUpdate()

3、卸载组件：由ReactDOM.unmountComponentAtNode()触发

​ 1、componentWillUnmount()

经典面试题：

（1）react/vue中的key有什么作用？（key的内部原理是什么？）

虚拟DOM中key的作用：

1、简单的说：key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用

2、详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

​ 旧虚拟DOM中找到了新虚拟DOM相同的key:

​ （1）若虚拟DOM中内容没变，直接使用之前的真实DOM

​ （2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

​ 旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 根据数据创建新的真实DOM，随后渲染到页面

（2）为什么遍历列表时，key最好不要用index？

​ 1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：

​ 会产生没有必要的真实DOM更新 ===》界面效果没问题，但效率低

​ 2、如果结构中还包含了输入类的DOM：

​ 会产生错误DOM更新 ===》界面有问题

​ 3、注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作

​ 仅用于渲染列表用于展示，使用index作为key是没有问题的

3、开发中如何选择key？

​ （1）最好使用每条数据的唯一标识作为Key,比如id号，手机号、身份证号、学号

第三章：react应用（基于脚手架）

使用create-react-app创建react应用

react脚手架

1、xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目

​ 1、包含了所有的配置（语法检查、jsx编译、devServer……）

​ 2、下载好了相关的依赖

​ 3、可以直接运行一个简单效果

2、react提供了用于创建react项目的脚手架库：create-react-app

3、项目整体的技术架构为：react+webpack+es6+eslint

4、使用脚手架开发的项目的特点：模块化，组件化，工程化

创建项目并启动

第一步，全局安装：npm install -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步：进入项目文件夹：cd hello-react

第四步：启动项目:npm start