react的生命周期阶段
- react分为挂载，更新以及卸载的阶段。
第一次挂载的时候
- 先从constructor — getdDeruvedStateFromProps-- render- componentDidMount
class Car extends React.Component {
constructor (props) {
super(props)
console.log('我是constructor')
this.state = {
person: {
name: '小明'
}
}
}
static getDerivedStateFromProps (props, state) {
// 接收两个属性
console.log('我是getDerivedStateFromProps')
return {
person: {
// 直接覆盖state，并且值改变的时候并不会重新刷新
age: 19
}
}
}
render() {
console.log('我是render')
return (
<div>
<h1>我是{
this.state.person.age}组件</h1>
</div>
)
}
componentDidMount () {
console.log('组件更新完毕')
}
}
// 执行结果 我是constructor
// 我是getDerivedStateFromProps
// 我是render
// 组件更新完毕
更新的时候(当props改变，调用setState，forceUpdate)
- getDerivedStateFromProps — shouldComponentUpdate --render – getSnapshotBeforeUpdate — componentDidUpdate
class Car extends React.Component {
constructor (props) {
super(props)
console.log('我是constructor')
this.state = {
person: {
name: '小明'
}
}
this.add = this.add.bind(this)
}
add () {
this.setState({
person: {
name: '小花'
}
})
}
static getDerivedStateFromProps (props, state) {
// 接收两个属性
console.log('我是getDerivedStateFromProps', state)
// return {
// person: { // 直接覆盖state，并且值改变的时候并不会重新刷新
// age: 19
// }
// }
return null
}
shouldComponentUpdate() {
console.log('我是shouldComponentUpdate')
return true // 如果返回的是false将不会更新，默认返回的是true
}
render() {
console.log('我是render')
return (
<div>
<h1 onClick={
this.add}>我是{
this.state.person.name}组件</h1>
</div>
)
}
getSnapshotBeforeUpdate (props, state) {
// 保存更新前的props, state
console.log('我是 getSnapshotBeforeUpdate')
return '我是保存的快照'
}
componentDidUpdate (props, state, snapshot) {
// 保存更新前的props, state， snapshot为 getSnapshotBeforeUpdate的返回值
console.log('我是componentDidUpdate')
}
componentDidMount () {
console.log('组件更新完毕')
}
}
// 执行结果：
// 我是constructor
// 我是getDerivedStateFromProps
// 我是render
// 组件更新完毕
// 我是getDerivedStateFromProps
// 我是shouldComponentUpdate
// 我是render
// 我是 getSnapshotBeforeUpdate
// 我是componentDidUpdate
组件卸载的时候
class Car extends React.Component {
constructor (props) {
super(props)
console.log('我是constructor')
this.state = {
person: {
name: '小明'
}
}
this.add = this.add.bind(this)
this.cancel = this.cancel.bind(this)
}
add () {
this.setState({
person: {
name: '小花'
}
})
}
cancel () {
ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
}
static getDerivedStateFromProps (props, state) {
// 接收两个属性
console.log('我是getDerivedStateFromProps')
// return {
// person: { // 直接覆盖state，并且值改变的时候并不会重新刷新
// age: 19
// }
// }
return null
}
shouldComponentUpdate() {
console.log('我是shouldComponentUpdate')
return true // 如果返回的是false将不会更新，默认返回的是true
}
render() {
console.log('我是render')
return (
<div>
<h1 onClick={
this.add}>我是{
this.state.person.name}组件</h1>
<button onClick={
this.cancel}>卸载组件</button>
</div>
)
}
getSnapshotBeforeUpdate (props, state) {
// 保存更新前的props, state
console.log('我是 getSnapshotBeforeUpdate')
return '我是保存的快照'
}
componentDidUpdate (props, state, snapshot) {
// 保存更新前的props, state， snapshot为 getSnapshotBeforeUpdate的返回值
console.log('我是componentDidUpdate')
}
componentDidMount () {
console.log('组件更新完毕')
}
componentWillUnmount () {
console.log('组件卸载！')
}
}