4.React生命週期

4.1引出生命週期

  1.     class Life extends React.Component {
  3.         state = {
  4.             opacity:0.5
  5.         }
  7.         death = () => {
  8.             // 解除安裝定時器
  9.             // clearInterval(this.timer)
  10.             // 解除安裝元件
  11.             ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  13.         }
  15.         // 生命週期鉤子函式
  16.         // 元件掛載完呼叫
  17.         componentDidMount(){
  18.             this.timer = setInterval(()=>{
  19.                 // 獲取原狀態
  20.                 let {opacity} = this.state
  21.                 // 減小0.1
  22.                 opacity -= 0.1
  23.                 // 設定新的透明度
  24.                 if (opacity <= 0) opacity = 1
  25.                 this.setState({opacity})
  27.             }, 200)
  28.         }
  30.         // 元件將要解除安裝操作
  31.         componentWillUnmount(){
  32.             // 解除安裝定時器
  33.             clearInterval(this.timer)
  34.         }
  36.         render(){
  37.             return (
  38.                 <div>
  39.                     <h2 style={{opacity: this.state.opacity}}>yeyang is da hanbi</h2>
  40.                     <button onClick={this.death}>don't life</button>
  41.                 </div>
  42.             )
  43.         }
  44.     }

4.2 react生命週期（舊）（17.0版本之前）

  1.     /*
  2.     1. 初始化階段: 由ReactDOM.render()觸發---初次渲染
  3.         1.	constructor()
  4.         2.	componentWillMount()
  5.         3.	render()
  6.         4.	componentDidMount() ====> 常用
  7.                 ---  一般在這個鉤子做一些初始化的事，例如：開啟定時器，傳送網路請求，訂閱訊息
  8. 	2. 更新階段: 由元件內部this.setSate()或父元件重新render觸發
  9.         1.	shouldComponentUpdate()
  10.         2.	componentWillUpdate()
  11.         3.	render()  ====>  必須使用的一個
  12.         4.	componentDidUpdate()
  13. 	3. 解除安裝元件: 由ReactDOM.unmountComponentAtNode()觸發
  14.         1.	componentWillUnmount() ====> 常用
  15.                 ----  一般在這個鉤子中做一些收尾的事，如關閉定時器、取消訂閱訊息
  16.      */
  18.     class Count extends React.Component {
  20.         constructor(props) {
  21.             console.log('Count---constructor')
  22.             super(props);
  23.             this.state = {
  24.                 count: 0
  25.             }
  26.         }
  28.         // state = {
  29.         //     count: 0
  30.         // }
  32.         add = () => {
  33.             const {count} = this.state
  34.             this.setState({
  35.                 count: count+1
  36.             })
  37.         }
  39.         death = () => {
  40.             ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  41.         }
  43.         force = () => {
  44.             this.forceUpdate()  // 強制更新鉤子
  45.         }
  47.         // 元件將要掛載的鉤子
  48.         componentWillMount(){
  49.             console.log('Count---componentWillMount')
  50.         }
  52.         // 元件掛載完成的鉤子
  53.         componentDidMount(){
  54.             console.log('Count---componentDidMount')
  55.         }
  57.         // 元件將要解除安裝時的鉤子
  58.         componentWillUnmount(){
  59.             console.log('Count---componentWillUnmount')
  60.         }
  62.         // 控制組件更新的閥門： 是否更新元件鉤子
  63.         shouldComponentUpdate(){
  64.             console.log('Count---shouldComponentUpdate')
  65.             return true
  66.         }
  68.         // 元件將要更新的鉤子
  69.         componentWillUpdate(){
  70.             console.log('Count---componentWillUpdate')
  71.         }
  73.         // 元件更新完的鉤子
  74.         componentDidUpdate(){
  75.             console.log('Count---componentDidUpdate')
  76.         }
  78.         render(){
  79.             console.log('Count---render')
  80.             const {count} = this.state
  81.             return (
  82.                 <div>
  83.                     <h2> 當前求和為{count}</h2>
  84.                     <button onClick={this.add}>點我+1</button>
  85.                     <button onClick={this.death}>解除安裝元件</button>
  86.                     <button onClick={this.force}>強制更新</button>
  87.                 </div>
  88.             )
  89.         }
  90.     }
  92.     // 父元件A
  93.     class A extends React.Component{
  94.         state = {
  95.             carName: 'benz'
  96.         }
  98.         changeCar = () => {
  99.              this.setState({
  100.                  carName: 'bmw'
  101.              })
  102.         }
  104.         render(){
  105.             return (
  106.                 <div>
  107.                   <div>我是A元件</div>
  108.                     <button onClick={this.changeCar}>換車</button>
  109.                     <B carName={this.state.carName}/>
  110.                 </div>
  111.             )
  112.         }
  113.     }
  115.     // 子元件B
  116.     class B extends React.Component{
  117.         // 元件將要接收新的props的鉤子
  118.         componentWillReceiveProps(props){
  119.             console.log('B---componentWillReceiveProps', props)
  120.         }
  121.         shouldComponentUpdate(){
  122.             console.log('B---shouldComponentUpdate')
  123.             return true
  124.         }
  126.         // 元件將要更新的鉤子
  127.         componentWillUpdate(){
  128.             console.log('B---componentWillUpdate')
  129.         }
  131.         // 元件更新完的鉤子
  132.         componentDidUpdate(){
  133.             console.log('B---componentDidUpdate')
  134.         }
  135.         render(){
  136.             return (
  137.                 <div>
  138.                      我是B元件, 接收的車是：{this.props.carName}
  139.                 </div>
  140.             )
  141.         }
  142.     }
  144.     // ReactDOM.render(<Count />, document.getElementById('test'))
  145.     ReactDOM.render(<A />, document.getElementById('test'))

4.3 react生命週期（新）（17.0版本之後）

  1.     /*
  2.     1. 初始化階段: 由ReactDOM.render()觸發---初次渲染
  3.         1.	constructor()
  4.         2.	getDerivedStateFromProps
  5.         3.	render()
  6.         4.	componentDidMount()
  7. 	2. 更新階段: 由元件內部this.setSate()或父元件重新render觸發
  8.         1.	getDerivedStateFromProps
  9.         2.	shouldComponentUpdate()
  10.         3.	render()
  11.         4.	getSnapshotBeforeUpdate
  12.         5.	componentDidUpdate()
  13. 	3. 解除安裝元件: 由ReactDOM.unmountComponentAtNode()觸發
  14.         1.	componentWillUnmount()
  15.     */
  17.     class Count extends React.Component {
  19.         constructor(props) {
  20.             console.log('Count---constructor')
  21.             super(props);
  22.             this.state = {
  23.                 count: 0
  24.             }
  25.         }
  27.         // state = {
  28.         //     count: 0
  29.         // }
  31.         add = () => {
  32.             const {count} = this.state
  33.             this.setState({
  34.                 count: count+1
  35.             })
  36.         }
  38.         death = () => {
  39.             ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  40.         }
  42.         force = () => {
  43.             this.forceUpdate()  // 強制更新鉤子
  44.         }
  46.         // 若state的值在任何時候都取決於props，可以使用該方法
  47.         static getDerivedStateFromProps(props ,state){
  48.             console.log('Count---getDerivedStateFromProps', props, state)
  49.             return null   // 返回 state物件或者null
  50.         }
  52.         // 在更新之前獲取快照
  53.         getSnapshotBeforeUpdate(){
  54.             console.log('Count---getSnapshotBeforeUpdate')
  55.             return 'abc'
  56.         }
  58.         // 元件掛載完成的鉤子
  59.         componentDidMount(){
  60.             console.log('Count---componentDidMount')
  61.         }
  63.         // 元件將要解除安裝時的鉤子
  64.         componentWillUnmount(){
  65.             console.log('Count---componentWillUnmount')
  66.         }
  68.         // 控制組件更新的閥門： 是否更新元件鉤子
  69.         shouldComponentUpdate(){
  70.             console.log('Count---shouldComponentUpdate')
  71.             return true
  72.         }
  74.         // 元件更新完的鉤子
  75.         componentDidUpdate(preProps, preState, snapshotValue){
  76.             console.log('Count---componentDidUpdate', preProps, preState, snapshotValue)
  77.         }
  79.         render(){
  80.             console.log('Count---render')
  81.             const {count} = this.state
  82.             return (
  83.                 <div>
  84.                     <h2> 當前求和為{count}</h2>
  85.                     <button onClick={this.add}>點我+1</button>
  86.                     <button onClick={this.death}>解除安裝元件</button>
  87.                     <button onClick={this.force}>強制更新</button>
  88.                 </div>
  89.             )
  90.         }
  91.     }
  93.     ReactDOM.render(<Count count={199}/>, document.getElementById('test'))

4.4 getSnapshotBeforeUpdate使用場景

拖動滾動條讓滾動條停留在當前資料位置

  1.     class NewList extends React.Component {
  3.         state = {
  4.             newsArr: []
  5.         }
  7.         componentDidMount() {
  8.             setInterval(() => {
  9.                 // 獲取原狀態
  10.                 const {newsArr} = this.state
  11.                 // 模擬一條新聞
  12.                 const news = '新聞' + (newsArr.length + 1)
  13.                 // 更新狀態
  14.                 this.setState({
  15.                     newsArr: [news, ...newsArr]
  16.                 })
  17.             }, 1000)
  18.         }
  20.         getSnapshotBeforeUpdate() {
  21.             return this.refs.list.scrollHeight
  22.         }
  24.         componentDidUpdate(preProps, preState, height) {
  25.             console.log(preProps, preState, height)
  26.             console.log(this.refs.list.scrollTop) // 當前距離滾動條頂端的距離
  27.             this.refs.list.scrollTop += (this.refs.list.scrollHeight - height)
  28.             // this.refs.list.scrollTop += 30
  29.         }
  31.         render() {
  32.             console.log('NewList---render')
  33.             const {newsArr} = this.state
  34.             return (
  35.                 <div className="list" ref='list'>
  36.                     {
  37.                         newsArr.map((n, index) => {
  38.                             return <div key={index} className="news">{n}</div>
  40.                         })
  41.                     }
  42.                 </div>
  43.             )
  44.         }
  45.     }
  47.     ReactDOM.render(<NewList/>, document.getElementById('test'))