react.生命周期:
(1)无状态组件没有生命周期
(2)实例期:
①Constructor(){}
- 在组件挂载之前调用,如果没有自定义constructor,实例化组件时会有默认的constructor,如果定义了constructor,就要在constructor里调用super(props)
(3)存在期:
①ComponentWillMount(){}:组件将加载 - (1)挂载前调用
- (2)在componentWillMount中修改state,不会导致组件重新渲染
②componentDidMount(){}组件加载完毕 - 组件挂载完成立即触发,在这里修改state会使组件重新渲染
- 如果需要加载远程数据,在这里发送网络请求
③componentWillUpdate(){}组件将更新 - (1)接收到新的props或state时调用,不能this.setState()
④componentDidUpdate(){}组件更新完毕 - (1)初次渲染不调用
- (2)组件被更新后可以在这里操作dom
⑤shouldComponentUpdate(){}组件可以更新 - (1)新的props或state被接受渲染前调用
- (2)返回bool值,默认为true
- (3)若返回false之后的componentWillUPDATE,render,componentDidMount不会被调用
⑥componentWillReceiveProps(){}组件将要接收prop参数
⑦Render(){}
1.Render必须,返回类型:
(1)React元素:自定义的组件或原生dom组件
(2)字符串或数字:会被渲染成dom中的文本节点
(3)Null
(4)Boolean (5)包含多个元素的数组
render(){
return [
<li key='1'>1</li>,
<li key='2'>2</li>
]
}
(4)销毁期:
①componentWillUnmount(){}销毁组件
2.组件初始化生命周期的执行过程:
(1)Constructor(){}
(2)componentWillMount(){}
(3)Render(){}
(4)componentDidMount(){}
3.组件内部状态(state)被改变生命周期的过程:
(1)shouldComponentUpdate(){}
(2)componentWillUpdate(){}
(3)Render(){}
(4)componentDidUpdate(){}
4.组件外部状态被改变生命周期的过程:
(1)componentWillReceiveProps(){}
(2)shouldComponentUpdate(){}
(3)componentWillUpdate(){}
(4)Render(){}
(5)componentDidUpdate(){}
5.使用swipe
(1)Npm install react swip-js-iso react-swipe
(2) import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
(3)巴拉巴拉。。。
vue生命周期
1.beforeCreate:
(1)创建前
(2)还没有响应式
(3)不要修改data里的数据
2.Created
(1)创建完成
(2)可以在这里进行ajax请求,
3.beforeMount
(1)挂载前
4.Mounted
(1)挂载完成
(2)初始化完成
5.beforeUpdate
(1)更新前
6.Updated
(1)更新后
7.beforeDestroy
(1)销毁前
8.Destroyed
(1)销毁后
网友评论