首頁 >web前端 >js教程 >react生命週期的全面了解（附程式碼）

react生命週期的全面了解（附程式碼）

不言轉載: 2019-04-03 10:05:562740瀏覽

這篇文章帶給大家的內容是關於react生命週期的全面了解（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一個React元件的生命週期分為三個部分：實例化、存在期、銷毀時。

實例化階段

客戶端渲染時，如下依序被呼叫

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()

服務端渲染

getDefaultProps()
getInitialState()
componentWillMount()
render()

注意：componentDidMount()不會再服務端被渲染；

getDefaultProps

對於每個元件實例來講，這個方法只會呼叫一次，該元件類的所有後續應用，getDefaultPops 將不會再被調用，其返回的物件可以用於設定預設的props值。

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <p>Hello,{this.props.name},git username is {this.props.dwqs}</p>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

也可以在掛載元件的時候設定 props。

var data = [{title: 'Hello'}];
<Hello data={data} />

或呼叫 setProps （一般不需要呼叫）來設定其 props

var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

但只能在子元件或元件樹上呼叫 setProps。別呼叫 this.setProps 或直接修改 this.props。將其當作唯讀資料。

React透過propTypes 提供了一種驗證props 的方式，propTypes 是一個配置對象，用於定義屬性類型：

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },
    
    //...
})

或

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class BetterImage extends Component{...}

BetterImage.PropTypes={
  src: PropTypes.string,
  center: PropTypes.bool,
  loadingImage: PropTypes.string,
  defaultImage: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  onComplete: PropTypes.func
}
BetterImage.defaultProps={
  ....
}

getInitialState

對於元件的每個實例來說，這個方法的呼叫有且只有一次，用來初始化每個實例的state，在這個方法裡，可以存取元件的props。每個React元件都有自己的 state，與 props 的差別在於 state只存在元件的內部，props 在所有實例中共用。

getInitialState 和getDefaultPops 的呼叫是有區別的，getDefaultPops 是對於元件類別來說只調用一次，後續該類別的應用程式都不會被調用，而getInitialState 是對於每個元件實例來講都會調用，並且只調一次。

var LikeButton = React.createClass({
  //初始化State
  getInitialState: function() {
    return {liked: false};
  },
  
  handleClick: function(event) {
    //设置修改State
    this.setState({liked: !this.state.liked});
  },

  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

每次修改state，都會重新渲染元件，實例化後透過state 更新元件，會依序呼叫下列方法：

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

componentWillMount

在渲染前呼叫,在客戶端也在服務端。 React 官方正式發布了 v16.3 版本。在這次的更新中，除了前段時間被熱烈討論的新Context API 之外，新引入的兩個生命週期函數getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未來v17.0 版本中即將被移除的三個生命週期函數componentWillMount ，componentWillReceiveProps，componentWillUpdate .

在這個生命週期中你會遇到一下問題：

a.首屏無數據導致白屏
在React 應用中，許多開發者為了避免第一次渲染時頁面因為沒有獲取到非同步資料導致的白屏，而將資料請求部分的程式碼放在了componentWillMount 中，希望可以避免白屏並提早非同步請求的發送時間。但事實上在 componentWillMount 執行後，第一次渲染就已經開始了，所以如果在 componentWillMount 執行時還沒有獲取到非同步資料的話，頁面首次渲染時也仍然會處於沒有非同步資料的狀態。換句話說，元件在首次渲染時總是會處於沒有非同步資料的狀態，所以不論在哪裡發送資料請求，都無法直接解決這個問題。而關於提早發送資料請求，官方也鼓勵將資料請求部分的程式碼放在元件的 constructor 中，而不是 componentWillMount。
若是為了改善使用者體驗曾經用過的解決方法有兩個：

方法一：非同步請求元件，使用nprogress 新增載入動畫；

import React, { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './customNprogress.styl'

NProgress.configure({ showSpinner: false })

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null
    }

    async componentDidMount() {
      NProgress.start()
      const { default: component } = await importComponent()
      NProgress.done()

      this.setState({ component })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))

方法二：使用 onreadystatechange 去監聽readyState，在資源載入完成之前載入一個只有框架的靜態頁面，頁面不請求資料。當資料請求完成之後再將路由切換到真實的首頁。

  function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={Index}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={FirstScreen}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    }
}

document.onreadystatechange = listen

具體參考解決React首屏載入白屏的問題

b.事件訂閱

另一個常見的用例是在componentWillMount 中訂閱事件，並在componentWillUnmount 中取消掉對應的事件訂閱。但事實上 React 並不能夠保證在 componentWillMount 被呼叫後，同一元件的 componentWillUnmount 也一定會被呼叫。一個當前版本的例子如服務端渲染時，componentWillUnmount 是不會在服務端被呼叫的，所以在 componentWillMount 中訂閱事件就會直接導致服務端的記憶體洩漏。另一方面，在未來 React 開啟非同步渲染模式後，在 componentWillMount 被呼叫之後，元件的渲染也很有可能會被其他的事務所打斷，導致 componentWillUnmount 不會被呼叫。而 **componentDidMount 就不存在這個問題，在 componentDidMount 被呼叫後，componentWillUnmount 一定會隨後被呼叫到，並根據具體程式碼清除掉元件中存在的事件訂閱。 **

render

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

只能通过 this.props 和 this.state 访问数据（不能修改）
可以返回 null,false(这种场景下，react渲染一个