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

この記事は、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></hello>, document.body);

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

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

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

var data = [{title: 'Hello'}];
var Hello = React.render(<demo></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>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <likebutton></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></c> : null
    }
  }

  return AsyncComponent
}

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

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

  function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <provider>
                <router>
                    <route></route>
                </router>
            </provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <provider>
                <router>
                    <route></route>
                </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渲染一个
• 只能出现一个顶级组件，不能返回一组元素
• 不能改变组件的状态
• 不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

render执行情况如下：

1. 首次加载
2. setState改变组件内部state。
   注意： 此处是说通过setState方法改变。
3. 接受到新的props

注意:因为数据是异步的情况，会导致组件重复渲染

componentDidMount

该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

var data = [..];
var comp = React.createClass({
    render: function(){
        return <imput></imput>
    },
    componentDidMount: function(){
        $(this.getDOMNode()).autoComplete({
            src: data
        })
    }
})

由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：

var Area = React.createClass({
    render: function(){
        this.getDOMNode(); //render调用时，组件未挂载，这里将报错
        
        return <canvas>
    },
    componentDidMount: function(){
        var canvas = this.refs.mainCanvas.getDOMNode();
        //这是有效的，可以访问到 Canvas 节点
    }
})</canvas>

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。如果ref回调函数以inline函数的方式来指定，那么在组件更新的时候ref回调会被调用2次。第一次回调的时候传入的参数是null,而第二次的时候才真正的传入DOM节点

更多了解ref使用
从React官方文档看 refs 的使用和未来
获取真实dom，并获取dom css 三种方法

存在期

此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用；

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

componentWillReceiveProps

当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用。

componentWillReceiveProps: function(nextProps){
    if(nextProps.checked !== undefined){
        this.setState({
            checked: nextProps.checked
        })
    }
}

了解更多点击此处

shouldComponentUpdate

shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且，当函数返回false时候，阻止接下来的render()函数及后面的 componentWillUpdate，componentDidUpdate 方法的调用，阻止组件重渲染，而返回true时，组件照常重渲染。

了解更多点击此处--真的讲的好

componentWillUpdate

这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。

componentDidUpdate

这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

销毁

componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount

React v.16生命周期

constructor(props) // 初始化参数

componentWillMount()

render() // 第一次渲染 

componentDidMount()

**当父组件向子组件传入props发生改变后，依次调用**

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState) 

componentWillUpdate()

render() //子组件更新渲染

componentDidUpdate()

**当组件自身state发生变化后**

componentWillUpdate()

render() //组件再次更新渲染

componentDidUpdate()


当组件卸载

componentWillUnmount()

与低于React16版本的比较

1. React16 の新しいライフサイクルでは、componentWillMount、componentWillReceiveProps、componentWillUpdate が非推奨になりました。
2. 3 つの非推奨のフック関数 (componentWillMount、componentWillReceivePorps、componentWillUpdate) を置き換えるために、getDerivedStateFromProps と getSnapshotBeforeUpdate が追加されました。
3. React16これら 3 つのフック関数は削除されていませんが、新しいフック関数 (getDerivedStateFromProps、getSnapshotBeforeUpdate) と混合することはできません。React17 は、componentWillMount、componentWillReceivePorps、componentWillUpdate

4. 新しいペアを追加しました。エラー処理 (componentDidCatch)

[関連する推奨事項: 反応ビデオ チュートリアル]

#

以上がReact ライフサイクルの包括的な理解 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。