ホームページ > 記事 > ウェブフロントエンド > 反応のホックとは何ですか
HOC はコンポーネントの論理的な再利用部分を抽出する React の高度な技術ですが、HOC は React API ではなく、コンポーネントをパラメータとして受け取り、拡張されたコンポーネントを返すメソッドです。
関連チュートリアルの推奨事項: React ビデオ チュートリアル
具体的には、HOC は関数であり、関数はコンポーネントをパラメータとして受け取り、新しいコンポーネントを返します。 結果主義の観点から見ると、HOC は
Vue
の
と同等です。実際、
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
から同じデータを取得する必要がある場合、各コンポーネントを再度記述する必要があります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 の使用方法
2. タイミング
コンポーネントの
HOC と Mixin の比較
高次コンポーネントは関数型プログラミングの考え方に属し、ラップされたコンポーネントには高次コンポーネントの存在は認識されず、高次コンポーネントによって返されるコンポーネントは元のコンポーネントに加えて拡張された機能を持ちます。コンポーネントです。 Mixin の混合モードでは、コンポーネントに新しいメソッドと属性が継続的に追加されます。コンポーネント自体はそれを感知するだけでなく、関連する処理 (名前の競合、状態の維持など) を実行する必要さえあります。混合モジュールの数が増加すると、コンポーネント全体の保守が困難になるため、非常に多くの React ライブラリが高次コンポーネントを使用して開発されています。
以上が反応のホックとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。