新手對React生命週期的理解（學習筆記）

時間 2019-12-06

原文原文鏈接

React生命週期圖解

先上圖(引用官網圖片)

其實總結就是進入當前頁面，，而後渲染頁面，加載數據，渲染demo，數據更新，組件卸載react
constructorios

/*
* constructor 實際上是Es6 裏面帶的一個屬性，表明初始化，可是組件未掛載
* constructor的固定寫法以下
* 好比你react 須要定義一些 
* State 的值就能夠定義在 constructor裏面，這個是一個很好的習慣
*/
import React, { Component } from 'react';
 class APP extends Component {

  constructor(props) {
    super(props);
    this.state = {
    counter: 0,
  }
  }
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}

export default APP;

複製代碼

4 componentWillMountes6

/*
* 組件初始化時只調用，
* 之後組件更新不調用，
* 整個生命週期只調用一次，此時能夠修改state
*/

import React, { Component } from 'react';

class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    date: new Date()
    }
  }
  /*
  * 這個就是組件初始化建立的時候纔會執行的方法
  * 而且只會執行一次，此時能夠去修改 State裏面的值
  * 我這裏借用官網的定時器的例子,
  * 若是看不懂es6 的代碼，很簡單，把他還原成es5
  * https://www.babeljs.cn/repl  把es6的代碼複製進去就變成es5的代碼了
  */
  componentWillMount(){
   this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  /*你執行的方法函數能夠寫在這裏，也能夠寫在底部，可是通常我都寫上面
  * 美觀，而且方便人查看，我有一個習慣，寫函數方法我都會寫一個註釋，可能
  * 有人說，會增長安裝包大小，其實也很少那幾K，能夠寫註釋方便別人查看，本身之後
  * 也能看得懂，取名，要適合當前場景，別TM去取拼音
  */
  /*
  * 定時器
  */
  tick() {
    this.setState({
      date: new Date()
    });
   }
  
  render() {
    return (
      <div>
         <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    </div>
    )
  }

}
export default APP;
複製代碼

5 render算法

/*
* react最重要的步驟，
* 建立虛擬dom，
* 進行diff算法，當你組件傳遞數據更新變化都會執行 render
* 更新dom樹都在此進行。此時就不能更改state了
* 你這裏再去更改state 就會報錯哦，記住了 !!!
* 通常父組件傳遞的props 都會在此獲取
* 父子之間傳遞數據，能夠參考我另外一篇文章
* https://blog.csdn.net/wonaixiaoshenshen/article/details/89221569
*/
import React, { Component } from 'react';
class APP extends Component {
  render() {
  const { moneylist} =this.props
  console.log(`這裏能夠打印一下moneylist的值，每次都會更新`${moneylist})
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

複製代碼

6 componentDidMountaxios

/*
* 這個屬性就 厲害啦，這個屬性就是加載請求數據的最好放處，
* 此處是axios 的方式，feach 的方式其實同理
*/
import React, { Component } from 'react';
import axios from 'axios';
class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    List: [],
    }
componentDidMount（）{
   /*
  *先存一下this，以防使用箭頭函數this會亂指，此處能夠優化哈。
  */
    const _this=this;  
    axios.get(`你請求的後端的地址`)
    .then(function (response) {
      _this.setState({
        List:response.data,
      });
    })
    .catch(function (error) {
      console.log(error);
    })
}
  render() {
    return (
    /*
    * 若是要循環數據的話就在這裏寫一個map 循環就行了
    */
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

複製代碼

7 componentWillReceiveProps(nextProps)後端

import React, { Component } from 'react';
class APP extends Component {

componentWillReceiveProps(nextProps){
/*  今生命週期是須要條件成立纔會執行的
*   組件初始化時不調用
*   組件接受新的props時調用。
*   經常使用於父子組件傳值，子組件寫這個方法函數
/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;
複製代碼

8 shouldComponentUpdate(nextProps, nextState)數組

/*
* 當沒有致使state的值發生變化的setState是否會致使當前頁面重渲染 
* 因此，shouldComponentUpdate會阻止沒必要要的沒有意義的重渲染
* shouldComponentUpdate函數是重渲染時render()
* 函數調用前被調用的函數，它接受兩個參數：nextProps和nextState，
* 分別表示下一個props和下一個state的值。
* 當函數返回false時候，阻止接下來的render()函數的調用，
* 阻止組件重渲染，而返回true時，組件照常重渲染。
*
*/

import React, { Component } from 'react';
class Son extends Component{
  render(){
    const {index,number,handleClick} = this.props
    /*
    * 在每次渲染子組件時，打印該子組件的數字內容
    */
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  /*
  *點擊後使numberArray中數組下標爲index的數字值加一，重渲染對應的Son組件
  */
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(
             <div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return (
                           <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                 ) 
                }
                )
              }
           </div>)
  }
}
export default Father
/*
* 可是這樣會致使你的頁面性能降低，這個例子是我一開始
* 在學的時候，看到有位大佬寫過這個我就記錄下來了，而後這樣雖然是能夠實現效果
* 可是了，會致使沒有必要的渲染，如何解決了？
* 就是在子組件中渲染以前去進行判斷，是否數據變化了，若是沒有變化，則中止，沒有
* 必要再進行渲染
*/
複製代碼

解決方案以下bash

import React, { Component } from 'react';
class Son extends Component{
/*
* 子組件中，一開始進行判斷，當前傳遞的props 是否相同
* 若是相同，則暫停渲染（指渲染一次），不然就渲染
*/
  shouldComponentUpdate(nextProps,nextState){
      if(nextProps.number == this.props.number){
        return false
      }
      return true
  }
  render(){
    const {index,number,handleClick} = this.props
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(<div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                }
                )
              }
           </div>)
  }
}
export default Father
複製代碼

9 .componentWillUnmountbabel

import React, { Component } from 'react';

class APP extends Component {

componentWillUnmount(){
/*
* 組件將要卸載時調用，
* 一些事件監聽和定時器須要在此時清除
*/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

複製代碼