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