课程章节： React高级内容
主讲老师： Dell
课程内容：
今天学习的内容包括：
propTypes 没有传参的话不会做检测 不生效
PropTypes.isRequired 必须传递 不然警告 默认值可以解决警告
defaultProps 属性默认值
虚拟dom本质上是一个js对象，按照一定规则生成的js对象
课程收获：
4.1 心得：
react-devtools安装步骤：
1.首先打开官网：https://github.com/facebook/react-devtools
2. 进去v3分支，地址：https://github.com/facebook/react-devtools/tree/v3，download ZIP格式
3. 解压，进入到react-devtools-3目录，cnpm i安装依赖
4. 再进入到react-devtools-3\shells\chrome切换到chrome目录下，运行node build.js，当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包
5. 打开谷歌浏览器，网址输入chrome://extensions/， 选择react-detools-3目录下的shells->chrome中build目录中的unpacked即可
4.2 心得：
子组件参数类型定义 propTypes
import PropTypes from 'prop-types'; // 脚手架自带的包
TodoItem.propTypes = {
test: PropTypes.string.isRequired, // 字符串类型，必传
deleteItem: PropTypes.func, // 函数类型
index: PropTypes.number, // 数字类型
content: PropTypes.arrayOf(PropTypes.number, PropTypes.string), // 数字、字符串类型
}
子组件参数默认值 defaultTypes
TodoItem.defaultTypes = {
test: '填了默认值，类型就不会报错了'
}
propTypes 可以限制父组件给子组件传值的类型
对于组件接收的外部传来的props的类型做校验
eg.TodoItem.propTypes = {
content: PropTypes.string //content类型必须是string类型
}
PropTypes.isRequired 必须传递 否则会警告 可以定义默认值解决报错问题
eg.TodoItem.defaultProps = {
test: 'hello word' //test的默认值是hello world
}
PropTypes.instanceof(Message) //判断接收的是否是Message实例
content: PropTypes.arrayOf(propTypes.number,PropTypes.string) //content是number或者string
4.3 心得：
Test子组件从父组件接收一个content
content是父组件里的this.state.inputValue
当我们输入内容时，this.state.inputValue会发生变化
子组件里的conten会发生变化，所以子组件render()函数会被重新执行，页面会重新渲染
当父组件里的render()函数被运行时，它的子组件的render会被重新运行一次
4.4 心得：
方案一：
state 数据
jsx模板
数据+模板 结合，生成真实的DOM来显示
state发生改变
数据+模板 结合，生成真实的DOM，替换原始的DOM
缺陷：
第一次生成了一个完整的DOM片段
第二次生成了一个完整的DOM片段
第二次的DOM替换第一次的DOM，非常耗性能
方案二：
state 数据
jsx模板
数据+模板 结合，生成真实的DOM，来显示
state 发生改变
数据+模板 结合，生成真实的DOM，并不直接替换原始的DOM
新的DOM和原始的DOM 作比对，找差异
找出input框发生了变化
只用新的DOM中的input元素，替换掉老的DOM中的input元素
缺陷：性能的提升并不明显
方案三（虚拟DOM方案）：减少了真实dom的创建和真实dom的对比
state 数据
jsx模板
数据+模板 结合，生成真实的DOM，来显示
生成虚拟DOM（虚拟DOM就是一个对象，用它来描述真实DOM）（损耗了一点点性能）
[‘div’,{id: ‘abc’},[‘span’,{},‘hello world’]]
state 发生变化
数据+模板 生成新的虚拟DOM（极大地提升了性能）
[‘div’,{id: ‘abc’},[‘span’,{},‘bye bye’]]
比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是spanzhongdeneir（比较两个js对象，极大地提升了性能）
直接操作DOM，改变span中的内容
4.5 心得：
JSX -> createElement -> 虚拟DIM（JS对象）-> 真实的DOM
优点：
性能提升了
它使得跨端应用得以实现。React Native
4.6 心得：
虚拟DOM与Diff算法
一、虚拟DOM介绍
虚拟DOM：实际上就是一个JS对象，用来描述真实dom
虚拟DOM包含：1.节点名称 2。节点属性 3.节点的children
['div',{id: 'abc'【属性】},['span',{},'hello world']]
虚拟DOM的优点：1.性能提升 2.实现跨端应用
优化性能的原因：真实DOM的比较很耗性能，但虚拟DOM的比较实质上是对象的比较，消耗小
实现跨端应用的原因：虚拟dom不管是在浏览器里还是源生应用里都可以被识别（而真实DOM不能被源生的应用是被）
从虚拟DOM到真实DOM的步骤
JSX -> (通过createElement方法) 虚拟D0M（JS对象）-> 真实的DOM
return <div>item</div> === return React.createElement('div',{},'item');
因此JSX可以简化代码
二、虚拟DOM的Diff算法
Diff算法(difference)：虚拟dom（或JS对象）的比对方式
实现逻辑：同层比对
使用key值的重要性：极大提升了虚拟dom比对的性能【但必须保证key前后是相同的才能建立关系
4.7 心得：
获取DOM:
-
通过e.target访问
-
使用ref: ref能够帮助我们直接获取DOM元素，但尽量不要使用
-
ref和setState一起用时可能出现问题，DOM获取并不及时，原因是setState是异步的，解决方法是将获取DOM的语句放在setState第二个参数的函数里
4.8 心得：
React 生命周期
-
componentWillMount 在组件即将被挂在到页面执行
-
render 页面挂载执行
-
componentDidMount 组件被挂载完成后执行
-
shouldComponentUpdate 组件更新前执行，需要返回Boolean值
-
componentWillUpdate 组件更新前执行，但在 shouldComponentUpdate 后执行，并且返回true，才会执行
-
componentDidUpdate 组件更新完成后执行
-
conponentWillReceiveProps 当一个组件从父组件接收了参数，只要父组件的render函数执行了，子组件的这个生命函数就会执行。如果这组件第一次存在父组件中，才会执行
-
componentWilUnmount 组件被移除时执行
4.9 心得：
一、React生命周期函数的使用场景：
shouldComponentUpdate：React性能优化（见下文二）
componentDidMount：发送ajax请求【放在render里会被反复执行，是不合理的】（见下文三）
二、React性能优化的方式
1、周期函数：shouldComponentUpdate(nextProps,nextState)，提高组件性能
父组件数据发生变化时，子组件也会刷新，但是很多时候的刷新是不必要的，可以在子组件生命周期函数中加以判断，只有特定条件下子组件才更新
shouldComponentUpdate(nextProps, nextState){
if(判断条件) {//如nextProps.content !== this.props.content
return true
}else{
return false
}
}
2、作用域的修改：放在constructor里面。比如：this.handleClick.bind(this)，只会执行一次，避免子组件无谓渲染
3、react 的底层setState，内置性能提升机制，异步函数，把多次数据改变结合一一次来做，降低虚拟DOM比对频率
4、react底层用的是虚拟DOM的概念，同层比对，还有key 值这样的概念，提升虚拟dom 比对速度
三、react中发送ajax请求的方式
react里面没有封装ajax函数，可以安装第三方模块来进行ajax请求；
在项目目录下安装axios 运行：yarn add axios
代码中：
import axios from 'axios';
componentDidMount() {
axios.get('/api/todolist')
.then((()=>{alert('succ')})
.catch(()=>{alert('error')})
}
4.10 心得：
axios安装使用：
npm install axios
import axios from 'axios'
componentDidMount() {
axios.get('./api/todolist')
.then((res) => {
this.setState(() => ({
list: [...res.data]
}))
})
.catch(() => {console.log("erro")})
}
接口地址 ：http://localhost.charlesproxy.com:3000/api/getTodoList
页面地址 ： http://localhost.charlesproxy.com:3000/
charls map local：
protocal：http
host：localhost.charlesproxy.com
port：3000
path：/api/getTodoList
4.11 心得：
<Fragment>占位符不会渲染成任何元素，帮助解决多个DOM标签问题
css样式引入 improt “./main.css”
4.12 心得：
animation的使用
.show {
animation: show_item 2s ease-in forwards;
}
//forwards保留这个动作停在最后的状态
@keyframes show_item {
0% {
opacity: 0;
color: red;
}
50% {
opacity: 0.5;
color: yellow;
}
100% {
opacity: 1;
color: green;
}
}
4.13 心得：
第三方库react-transition-group的使用：
安装：react-transition-group主要是解决复杂的css问题：yarn add react-transition-group
引入：CSSTransition import {CSSTransition} from ‘react-transition-group’
使用：无需手动进行class的改变，只需在需要进行效果改变的组件外嵌套CSSTransition 组件即可
CSSTransition有如下属性【提供了很多钩子函数（钩子函数=生命执行函数，即在某一时刻会自动执行的函数）】
（1）in
true: 入场动画
false:出场动画
（2）onmountOnExit
动画完成之后元素隐藏
（3）onEntered={(el)=>{}} 钩子函数，在
入场动画结束时触发，el表示当前的
dom元素
（4）appear = {true}第一次显示也要执
行动画 对应的类
名 .fade-appear .fade-appear-active
用法:
import {CSSTransition} from 'react-transition-group’
in={this.state.show(true)} — 判断是否启动动画
timeout={1000} ------动画持续时间；以秒数为时间
unmountOnExit ---- 动画完成之后Dom元素被隐藏
onEntered={(el-这个el代表标签包裹里面的div)=>{el.style.color=‘blue’}} ---- 动画执行完成之后执行的钩子函数
apper = true ---- 页面初始加载出现该函数
CSS设置:
.fade-appear{} ----- 入场动画在初始页面加载的时候执行
.fade-enter-apper ----- 入场动画执行的第二个瞬间在页面初始加载的时候
classNames=‘fade’ -----fade是动画类名的前缀
CSS设置:
.fade-enter{} -----入场动画执行的第一个时刻
.fade-enter-actve{} ---- 入场动画执行的第二个瞬间，会存在该样式，一直到入场动画执行完为止
.fade-enter-done{} ----当整个入场动画执行完成之后，执行该样式
.fade-exit{} ---- 出场动画执行的第一个时刻
.fade-exit-active{} ---- 和入场动画类似，第二个时刻
.fade-exit-done{} ---- 出场动画执行完成之后，执行该样式
4.14 心得：
如果要使用Transition group的话，最外层要放Transition group，里面还要放CSSTransition