React组件的生命周期介绍
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
组件对象从创建到死亡它会经历特定的生命周期阶段
组件的三个生命周期状态: Mount:插入真实 DOM,Update:被重新渲染,Unmount:被移出真实 DOM
生命周期流程
需求: 自定义组件
- 让指定的文本做显示/隐藏的动画
- 切换时间为2S
- 点击按钮从界面中移除组件界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_ComponentLife</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Fade extends React.Component {
constructor (props) {
super(props)
console.log('constructor(): 创建组件对象------------------')
this.state = {
opacity: 1
}
this.removeComponent = this.removeComponent.bind(this)
}
componentWillMount () {
console.log('componentWillMount(): 初始化将要挂载------------------')
}
componentDidMount () {// 在此方法中启动定时器/绑定监听/发送ajax请求
console.log('componentDidMount(): 初始化已经挂载------------------')
// 保存到当前组件对象中
this.intervalId = setInterval(function () {
console.log('------------------')
// 得到当前opacity
let {opacity} = this.state
// 更新opacity
opacity -= 0.1
if (opacity <= 0) {
opacity = 1
}
// 更新状态
this.setState({opacity})
}.bind(this), 200) // bind(this)是因为这里setInterval是属于window的,所以需要绑定this
}
componentWillUpdate () {
console.log('componentWillUpdate(): 将要更新------------------')
}
componentDidUpdate () {
console.log('componentDidUpdate(): 已经更新------------------')
}
componentWillUnmount () { // 清除定时器/解除监听
console.log('componentWillUnmount(): 将要被移除------------------')
clearInterval(this.intervalId)
}
render() {
console.log('render() 渲染组件------------------')
const {opacity} = this.state
return (
<div>
<h2 style={{opacity:opacity}}>{this.props.content}</h2>
<button onClick={this.removeComponent}>不活了</button>
</div>
)
}
removeComponent () {
ReactDOM.unmountComponentAtNode(document.getElementById('example'))
}
}
// 可以在渲染组件的时候传一些数据
ReactDOM.render(<Fade content="react学不会, 怎么办?"/>, document.getElementById('example'))
</script>
</body>
</html>
还有两个生命周期函数
componentWillReceiveProps方法表示:当父组件传递参数进来的时候会触发调用这个方法,并且接收一个参数
shouldComponentUpdate方法表示:一旦更新state里面的数据就会触发这个方法,方法最后不会默认return true,需要手动return true,如果return false 后面的生命周期函数就不会执行了
常用的方法
render(): 必须重写, 返回一个自定义的虚拟DOM
constructor(): 初始化状态, 绑定this(可以箭头函数代替)
componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听
新版本的新增的两个生命周期函数
// 新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props后调用。
// 它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。
// 与componentDidUpdate一起,这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。
static getDerivedStateFromProps(nextProps, prevState) {
console.log('getDerivedStateFromProps', nextProps, prevState)
if (nextProps.value !== prevState.value) {
return {
value: nextProps.value
}
}
return null
}
// 新的getSnapshotBeforeUpdate生命周期在更新之前被调用(例如,在DOM被更新之前)。
// 此生命周期的返回值将作为第三个参数传递给componentDidUpdate。
//(这个生命周期不是经常需要的,但可以用于在恢复期间手动保存滚动位置的情况。
// 与componentDidUpdate一起,这个新的生命周期将覆盖旧版componentWillUpdate的所有用例
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('getSnapshotBeforeUpdate', prevProps, prevState)
return null
}