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

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

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

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

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

と同等です。実際、

の以前の戦略では 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: []

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

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)

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 の使用方法

#プロパティの操作

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

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

  2. タイミング

  コンポーネントの
render

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

HOC と Mixin の比較




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

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

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