快捷導(dǎo)航

react新版本生命周期鉤子函數(shù)及用法詳解

更新時(shí)間：2021年04月28日 10:10:56 作者：河軟小寶

這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過(guò)示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

和舊的生命周期相比

在這里插入圖片描述

準(zhǔn)備廢棄三個(gè)鉤子，已經(jīng)新增了兩個(gè)鉤子

React16 之后有三個(gè)生命周期被廢棄(但并沒(méi)有刪除)

componentWillMount（組件將要掛載的鉤子）
componentWillReceiveProps（組件將要接收一個(gè)新的參數(shù)時(shí)的鉤子）
componentWillUpdate（組件將要更新的鉤子）

新版本的生命周期新增的鉤子

getDerivedStateFromProps
通過(guò)參數(shù)可以獲取新的屬性和狀態(tài)
該函數(shù)是靜態(tài)的
該函數(shù)的返回值會(huì)覆蓋掉組件狀態(tài)

getSnapshotBeforeUpdate

真實(shí)的DOM構(gòu)建完成，但還未實(shí)際渲染到頁(yè)面中。
在該函數(shù)中，通常用于實(shí)現(xiàn)一些附加的dom操作
該函數(shù)的返回值，會(huì)作為componentDidUpdate的第三個(gè)參數(shù)

getDerivedStateFromProps

getDerivedStateFromProps不是給實(shí)例用的，需要將它定義為一個(gè)靜態(tài)方法。且需要給一個(gè)返回值

返回值可以使 state Obj 也可以是null
返回值是 state Obj 的話直接將之前的覆蓋且無(wú)法改變
返回null 對(duì)其他任何功能都沒(méi)有影響

// 從props哪里得到一個(gè)派生的狀態(tài)
static getDerivedStateFromProps(props,state){
	return props
}

若 state的值在人和時(shí)候都取決與 props 時(shí)，可以使用getDerivedStateFromProps

在這里插入圖片描述

<div id="test"></div>
  <!-- 引入react核心庫(kù) -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // 創(chuàng)建組件
  class Count extends React.Component{
    // 構(gòu)造器
    constructor(props){
      console.log('Count---constructor')
      super(props)
      // 初始化狀態(tài)
      this.state = {count:0}
    }

    // 掛載完成的鉤子
    componentDidMount(){
      console.log('Count---componentDidMount')
    }

    // 卸載組件按鈕的回調(diào)
    death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 實(shí)現(xiàn) +1
     add =()=>{
      // 獲取原狀態(tài)
      const {count} = this.state
      // 更新狀態(tài)
      this.setState({count:count+1})
    }

    // 強(qiáng)制更新按鈕的回調(diào)
    force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps',props,state)
      return props
    }

    // 控制組件更新的閥門
    shouldComponentUpdate(){
      console.log('Count---shouldComponentUpdate')
      // 如果返回值為false閥門關(guān)閉  默認(rèn)為true
      return true
    }

    // 組件更新完畢的鉤子
    componentDidUpdate(){
      console.log('Count---componentDidUpdate')
    }

     // 組件將要卸載的鉤子
     componentWillUnmount(){
      console.log('Count---componentWillUnmount');
    }

    render(){
      console.log('Count---render')
      const {count} = this.state
      return(
        <div>
          <h2>當(dāng)前求和為:{count}</h2>
          <button onClick={this.add}>點(diǎn)我+1</button>  
          <button onClick={this.death}>點(diǎn)我卸載組件</button>  
          <button onClick={this.force}>點(diǎn)我強(qiáng)制更新（不改變數(shù)據(jù)）</button>  
        </div>
      )
    }
  }
  
  // 渲染組件
    ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>

執(zhí)行結(jié)果

在這里插入圖片描述

getSnapshotBeforeUpdate

返回值可以是null 或者一個(gè)快照
如果是null 則沒(méi)有任何影響
如果是一個(gè)快照則可以將返回值傳遞給componentDidUpdate 的第三個(gè)參數(shù)
componentDidUpdate 能接收的三個(gè)參數(shù)
分別是
先前的props、先前的state和getSnapshotBeforeUpdate返回的快照
prevprops、 prevstate、snapshotValue

在這里插入圖片描述

<div id="test"></div>
  <!-- 引入react核心庫(kù) -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // 創(chuàng)建組件
  class Count extends React.Component{
    // 構(gòu)造器
    constructor(props){
      console.log('Count---constructor')
      super(props)
      // 初始化狀態(tài)
      this.state = {count:0}
    }

    // 掛載完成的鉤子
    componentDidMount(){
      console.log('Count---componentDidMount')
    }

    // 卸載組件按鈕的回調(diào)
    death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 實(shí)現(xiàn) +1
     add =()=>{
      // 獲取原狀態(tài)
      const {count} = this.state
      // 更新狀態(tài)
      this.setState({count:count+1})
    }

    // 強(qiáng)制更新按鈕的回調(diào)
    force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps',props,state)
      return null
    }

    getSnapshotBeforeUpdate(){
      console.log('getSnapshotBeforeUpdate');
      return "eee"
    }

    // 控制組件更新的閥門
    shouldComponentUpdate(){
      console.log('Count---shouldComponentUpdate')
      // 如果返回值為false閥門關(guān)閉  默認(rèn)為true
      return true
    }

    // 組件更新完畢的鉤子
    componentDidUpdate(preProps,preState,snapshotValue){
      console.log('Count---1componentDidUpdate',preProps,preState,snapshotValue);
    }

     // 組件將要卸載的鉤子
     componentWillUnmount(){
      console.log('Count---componentWillUnmount');
    }

    render(){
      console.log('Count---render')
      const {count} = this.state
      return(
        <div>
          <h2>當(dāng)前求和為:{count}</h2>
          <button onClick={this.add}>點(diǎn)我+1</button>  
          <button onClick={this.death}>點(diǎn)我卸載組件</button>  
          <button onClick={this.force}>點(diǎn)我強(qiáng)制更新（不改變數(shù)據(jù)）</button>  
        </div>
      )
    }
  }
  
  // 渲染組件
    ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>