web-dev-qa-db-ja.com

react-redux connectおよびredux dataを使用したコンポーネントのライフサイクルの順序

我々はすべてそれを知っている constructor -> componentWillMount -> componentDidMountは実行の順序です。

ここでreduxが登場し、コンポーネントのライフサイクルでreduxプロパティにアクセスしようとしています。 接続が実行されますの順序は何ですかデータは利用可能なライフサイクルメソッドを無視し、データの更新をやり直します。可能性は

1. Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

2. constructor -> Connect (DATA AVAILABLE) -> componentWillMount & componentDidMount

3. constructor -> componentWillMount -> Connect (DATA AVAILABLE) -> componentDidMount

4. constructor -> componentWillMount -> componentDidMount -> Connect (DATA AVAILABLE)

順序の整合性または依存はロードされたデータに依存していますか？

反応してネイティブに反応する

そして、reduxプロパティをPropTypeで必須と定義しても問題ありません。

reactjsreact-nativereduxreact-redux
13
Gaudam Thiyagarajan

connectはコンポーネントをラップするHOCであるため、コンポーネントライフサイクルメソッドは接続ライフサイクルの後にあります。簡単に理解するために、このように書かれた接続を考えることができます

const connect = (mapStateToProps, mapDispatchToProps) => (Component) => {
    return class ReduxApp extends React.Component {
        // lifecycle of connect
        render() {
            return (
                 <Component {...mapStateToProps(state)} />
            )
        }
    }
}

これで、状態が更新されるたびに、connectはコンポーネントに返される小道具のリストを浅く比較し、変更がある場合は小道具を更新します。その後、小道具が更新されているようにコンポーネントライフサイクルメソッドが実行されます。

つまり、最初の実行は

Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

データが更新されたら

Connect (DATA AVAILABLE) -> componentWillReceiveProps/getDerivedStateFromProps -> componentWillUpdate -> render -> componentDidUpdate
6
Shubham Khatri

最初の実行順序は-

接続（データ利用可能）->コンストラクター＆componentWillMount＆レンダリング＆componentDidMount

サイトが起動すると、コンポーネントのマウントライフサイクルの前に、デフォルトの状態とアクションでredux connectが最初に初期化されます。ただし、reduxにAPI呼び出しがある場合、コンポーネントのマウントライフサイクルはデータを待機しません。代わりに、コンポーネントがすでにマウントされており、reduxがデータを返す場合、コンポーネントの更新ライフサイクルが呼び出されます。

1
Christian