ホームページ >ウェブフロントエンド >jsチュートリアル >React ライフサイクルの包括的な理解 (コード付き)

React ライフサイクルの包括的な理解 (コード付き)

不言転載: 2019-04-03 10:05:562740ブラウズ

この記事は、React ライフサイクル (コード付き) を包括的に理解するのに役立ちます。一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

React コンポーネントのライフサイクルは、インスタンス化、存在、破棄の 3 つの部分に分かれています。

インスタンス化フェーズ

クライアントがレンダリングすると、以下が順番に呼び出されます

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

サーバー側レンダリング

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

注:componentDidMount() はサーバー側ではレンダリングされません;

getDefaultProps

各コンポーネントインスタンスに対して、このメソッドは 1 回だけ呼び出され、コンポーネントクラス後続のすべてのアプリケーションでは、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);

コンポーネントをマウントするときに小道具を設定することもできます。

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

または setProps を呼び出して (通常は呼び出す必要はありません) プロパティを設定します

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

コンポーネントの各インスタンスについて、このメソッドは各インスタンスの状態を初期化するために 1 回だけ呼び出されます。このメソッドでは、コンポーネントの props にアクセスできます。各 React コンポーネントには独自の状態があり、状態がコンポーネント内にのみ存在するのに対し、プロップはすべてのインスタンス間で共有されるという点でプロップとは異なります。

getInitialState と getDefaultPops の呼び出しには違いがあります。getDefaultPops はコンポーネントクラスに対して 1 回だけ呼び出され、このクラスの後続のアプリケーションは呼び出されません。一方、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')
);

状態が変更されるたびに、コンポーネントは再レンダリングされます。インスタンス化後、コンポーネント は状態を通じて更新され、次のメソッドが順番に呼び出されます。

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

componentWillMount

は、クライアントとサーバーの両方で、レンダリング前に呼び出されます。 React はバージョン v16.3 を正式にリリースしました。今回のアップデートでは、少し前に話題になった新しい Context API に加えて、新たに導入された 2 つのライフサイクル関数 getDerivedStateFromProps と getSnapshotBeforeUpdate、および 3 つのライフサイクル関数、componentWillReceiveProps、componentWillUpdate が将来の v17.0 バージョンで削除される予定です。

このライフサイクルでは、次の問題が発生します:

a. 最初の画面にデータがないため、白い画面が表示されます
React アプリケーションでは、多くの開発者が白い画面を回避するためにページが初めてレンダリングされるときに非同期データを取得できないことが原因で、白い画面を回避して非同期リクエストの送信時間を早めることを期待して、データリクエスト部分のコードがcomponentWillMountに配置されます。しかし、実際には、componentWillMount の実行後、最初のレンダリングが開始されているため、componentWillMount の実行時に非同期データが取得されていない場合、ページは最初のレンダリング時に非同期データが存在しない状態のままになります。つまり、最初にレンダリングされるとき、コンポーネントは常に非同期データのない状態になるため、データ要求がどこに送信されるかに関係なく、この問題に対する直接的な解決策はありません。データリクエストの早期送信に関して、当局はコードのデータリクエスト部分をcomponentWillMountではなくコンポーネントのコンストラクターに配置することも推奨しています。
ユーザーエクスペリエンスを向上させるために使用されたソリューションが 2 つある場合:

方法 1: 非同期リクエストコンポーネント、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'))

方法 2: onreadystatechange を使用します。 to readState をリッスンし、リソースの読み込みが完了する前にフレームのみを含む静的ページを読み込みます。ページはデータを要求しません。データ要求が完了すると、ルートは実際のホームページに切り替わります。

  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.イベントサブスクリプション

もう 1 つの一般的な使用例は、componentWillMount およびコンポーネント内のイベントをサブスクライブすることです。 ComponentWillUnmount 対応するイベントのサブスクリプションをキャンセルします。しかし実際には、React は、componentWillMount が呼び出された後、同じコンポーネントのComponentWillUnmount も呼び出されることを保証できません。現在のバージョンの例としては、サーバー側でレンダリングするときに、componentWillUnmount がサーバー側で呼び出されないため、componentWillMount でイベントをサブスクライブすると、サーバー側で直接メモリリークが発生します。一方、将来 React が非同期レンダリングモードをオンにすると、componentWillMount が呼び出された後、コンポーネントのレンダリングが他のトランザクションによって中断され、その結果、componentWillUnmount が呼び出されなくなる可能性があります。 **componentDidMount にはこの問題はありません。componentDidMount が呼び出された後、続いてcomponentWillUnmount が呼び出され、コンポーネント内に存在するイベントサブスクリプションが特定のコードに従ってクリアされます。 **＃＃＃＃＃＃＃＃＃＃＃＃与える＃＃＃＃＃＃

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

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