反応のホックとは何ですか

HOC はコンポーネントの論理的な再利用部分を抽出する React の高度な技術ですが、HOC は React API ではなく、コンポーネントをパラメータとして受け取り、拡張されたコンポーネントを返すメソッドです。

関連チュートリアルの推奨事項: React ビデオ チュートリアル

何? HOC とは何ですか? 。これはデコレータ パターンに似た単なるデザイン パターンです。

具体的には、HOC は関数であり、関数はコンポーネントをパラメータとして受け取り、新しいコンポーネントを返します。 結果主義の観点から見ると、HOC は Vue の

mixins(mix)

と同等です。実際、

React

の以前の戦略では mixins も使用されていましたが、その後 facebook は、mixins によって引き起こされる問題の方が深刻であることに気づきました。そのため、mixins は削除されました。さらに詳しく知りたいなぜですか? HOC を使用する理由例を見てください

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }

  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 

export default Page1

この例では、コンポーネントをマウントする前に # する必要があります##localStorage から data

の値を取得しますが、他のコンポーネントも表示のために

localStorage

から同じデータを取得する必要がある場合、各コンポーネントを再度記述する必要があります

componentWillMount コードは、非常に冗長に見えます。したがって、Vue では通常、

mixins: []

を使用します。しかし、React では、HOC をビルドするときに、HOC モードを使用する必要があります。

import React, { Component } from 'react'

const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default withStorage

その後最初の例を見ると、componentWillMount

を記述する必要はありません。

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default withStorage(Page1)

明らかに、これはデコレータ パターンなので、ES7 フォームを使用できます

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

@withStorage
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default Page1

方法?HOC の使用方法

使用シナリオ

#プロパティの操作

##ref を介したコンポーネント インスタンスへのアクセス

##コンポーネント ステータスの改善
コンポーネントを他の要素でラップする
• ヒントノート

1, 名前
• ラップされたコンポーネントの名前を入力しますは、HOC の表示名にもラップされます。

  2. タイミング

  コンポーネントの
render

メソッドでは HOC を使用しないでください。また、コンポーネントの他のライフサイクルでも HOC を使用しないようにしてください。 HOCを呼び出すたびに新しいコンポーネントが返されるため、レンダリングするたびに、前の上位コンポーネントで作成したコンポーネントがアンマウントされ（アンマウント）、その後、今回作成された新しいコンポーネントが再マウント（マウント）されます。効率に影響を与えるため、コンポーネントとそのサブコンポーネントの状態が再び失われます。

3. 静的メソッド パッケージ化されたコンポーネントの静的メソッドを使用する必要がある場合は、これらの静的メソッドを手動でコピーする必要があります。これは、HOC によって返される新しいコンポーネントにはパッケージ化されたコンポーネントの静的メソッドが含まれていないためです。 4、ref

はラップされたコンポーネントには渡されません

HOC と Mixin の比較




高次コンポーネントは関数型プログラミングの考え方に属し、ラップされたコンポーネントには高次コンポーネントの存在は認識されず、高次コンポーネントによって返されるコンポーネントは元のコンポーネントに加えて拡張された機能を持ちます。コンポーネントです。 Mixin の混合モードでは、コンポーネントに新しいメソッドと属性が継続的に追加されます。コンポーネント自体はそれを感知するだけでなく、関連する処理 (名前の競合、状態の維持など) を実行する必要さえあります。混合モジュールの数が増加すると、コンポーネント全体の保守が困難になるため、非常に多くの React ライブラリが高次コンポーネントを使用して開発されています。

プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 ！

以上が反応のホックとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。