og

React生命周期

Snipaste_20200518_012549.jpg React生命周期,反正我相信大家都是会了的,而且 官网文档 也是蛮香的。

不过多理解一次,记忆反正深刻吗。

下面这些过时的生命周期方法就舍弃了(老实说当时第一版Mysite项目我还常用这些过时的。。。) componentWillMount()

componentWillReceiveProps()

componentWillUpdate()

官方图: Snipaste_20200517_025054.jpg

各个生命周期的解释请参考 官网文档

下面我们对这张图的每个周期列举到组件代码中,依旧还是用最简单的代码+console.log大法来理解这张图。

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
import React from 'react'; class Parent extends React.Component { constructor(props) { super(props) this.state = { pcount: 0, key: 1 } } add = () => { this.setState((state) => { return { pcount: state.pcount + 1 }; }) } unmountLifecycle = () => { this.setState((state) => { return { key: state.key + 1 }; }) } render() { return ( <div> <Lifecycle pcount={this.state.pcount} key={this.state.key}></Lifecycle> <button onClick={this.add}>点击父元素属性变化pcount+1</button> <button onClick={this.unmountLifecycle}>点击卸载子组件</button> </div> ); } } class Lifecycle extends React.Component { constructor(props) { console.log("constructor") super(props) this.state = { count: 0 } } componentDidMount() { // this.Interval_id = setInterval(() => { // this.setState((state) => { // return { count: state.count + 1 }; // }) // }, 1000) console.log("componentDidMount") } static getDerivedStateFromProps(props, state) { console.log("1--getDerivedStateFromProps") return null // 此方法返回一个 state render前必然调用 // 可以用来让props.pcount // return {count:props.pcount} } shouldComponentUpdate(nextProps, nextState) { console.log("2--shouldComponentUpdate", nextProps, nextState) return true } getSnapshotBeforeUpdate(prevProps, prevState) { console.log("3--getSnapshotBeforeUpdate",prevProps, prevState) //这个snapshot返回值会作为componentDidUpdate的第三个参数 return "snapshot" } componentDidUpdate(prevProps, prevState, snapshot) { console.log("4--componentDidUpdate", prevProps, prevState, snapshot) } componentWillUnmount() { // clearInterval(this.Interval_id) console.log("componentWillUnmount") } add = () => { this.setState((state) => { return { count: state.count + 1 }; }) } render() { console.log("render") return ( <div> <div> count:{this.state.count} <button onClick={this.add}>子组件count+1</button> </div> <div> pcount:{this.props.pcount} </div> </div> ); } } export default Parent
--end--

Article at   2020/05/17 17:27  Published  code  Category,viewed  283  times

Relevant tags:    React 

Address:   https://www.kedong.me/article/10

Copyright Notice: Freely reproduced for non-commercial use