Reactの機能サブコンポーネントと上位コンポーネントの詳細な説明

この記事では、React の関数サブコンポーネントと上位コンポーネントについて詳しく説明します。必要な方は参考にしてください。

React プロジェクトに触れた後、ほとんどの人はすでに HOC (High-Order-Components) と FaCC (Functions as Child Components) を理解または使用しているはずです。これら 2 つのモードは、ほとんどの React オープンソースの Curry で使用されているためです。たとえば、react-router の withRouter は典型的な上位コンポーネントであり、1 つのコンポーネントを受け取り、別の拡張コンポーネントを返します。 React-Motion でのモーションは、典型的な FaCC アプリケーションです。

HOC と FaCC は非常に似たようなことを行い、どちらもデザイン パターンのデコレーター パターンに似ています。すべての機能は、元のインスタンスまたはユニットで拡張されます。

もちろん、一部のオープンソース ライブラリで使用されるだけでなく、日常のコード作成でも、HOC と FaCC を使用してロジックをカプセル化するのに適した場所がたくさんあります。例えば、データの埋め込みポイント、新機能の切り替え、コンバージョンデータの取得などです。コードの読みやすさとロジックの再利用を向上させるのに非常に役立ちます。

HOC

私たちは皆、関数を受け入れてカプセル化された関数を返す高次関数を使用しました:

const plus = first => second => (first + second)
plus(1)(2) // 3

そして高次コンポーネントは、高次コンポーネントに適用される高次関数の概念です:

const withClassName = ComposedComponent => props => (
   <ComposedComponent {...props} className=&#39;demo-class&#39; />
)

// 使用
const Header = text => (<header>{text}</header>)
const headerWitheClass = withClassName(Header)

コンポーネントを受け入れると、ラップされた新しいコンポーネントが返されます。私たちがよく使う withRouter は、元のコンポーネントである props に localtion などの属性を追加するものです。 props の追加に加えて、上位コンポーネントは次のことも行うことができます: withRouter就是在原有组件props上面在加上localtion等属性。除了添加props以外高阶组件还能做到：

• 在真正调用组件前后做一些事，比如埋点数据等

• 判断组件是否该render，或则应该render其他的东西，比如出错之后render错误页面

• 传递props并增加新的props

• 不render组件，转而做一些其他的事情，比如渲染一个外部的dom

对于上面的前三点都比较好理解，解释一下第4点。比如你在render了一个页面之后，需要改变一下页面的title.这是单页应用普遍存在的一个需求，通常你可以在具体router库中使用hook去实现。当然也可以通过HOC来实现：

const withTitleChange = ComposedComponent => {
  return class extends React.Component {
    componentDidMount () {
      const { title } = this.props
      document.title = title
    }
    render () {
      const props = this.props
      return <ComposedComponent {...props} />
    }
  }
}

FaCC

同样FaCC也是用于增强原有组件能力的一种模式，其主要功能的实现在于react的props.children可以是任何东西，包括函数。我们可以拿上面class的例子用FaCC再实现一遍：

const ClassNameWrapper = ({ children }) => children('demo-class')

// 使用

const HeadWithClass = (props) => (
  <ClassNameWrapper>
    {(class) => <header classNmae={class} ></header>}
  </ClassNameWrapper>
)

在FaCC中你也可以像HOC一样在生命周期中做很多事对原有的组件进行封装，基本上HOC能做的FaCC也都能做。我所在的项目之前都是大范围的使用HOC，再经过一番讨论后，开始大范围的转变成FaCC。

区别

两者都是用来增强原有组件的，具体该使用那种？那种是正确的模式？社区关于这一点也有很多讨论，比如就有人说FaCC是反模式：Function as Child Components Are an Anti-Pattern。他给出的理由是children并不语义化，会造成困惑，然后他提出了Component Injection

データの埋め込みなど、コンポーネントが実際に呼び出される前後にいくつかのことを実行します

1. コンポーネントをレンダリングするか、エラー後のエラーページのレンダリングなど、他のものをレンダリングするかを決定します

props を渡して新しい props を追加します

コンポーネントをレンダリングする代わりに、何か他のことを行います。外部 dom のレンダリングなど

1. 上記の最初の 3 つの点は比較的簡単です。4 つ目の点について説明します。たとえば、ページをレンダリングした後、ページのタイトルを変更する必要があります。これは、単一ページ アプリケーションの一般的な要件です。通常、これを実現するには、特定のルーター ライブラリのフックを使用します。もちろん、これは HOC を通じて実現することもできます:

// HOC example
import View from './View'

const DetailPage = withServerData(withNavigator(View))

ログイン後にコピー

// FaCC example

import View from './View'

const DetailPage = props => (
  <FetchServerData>
    {
      data => (
        <Navigator>
          <View data={data} {...props} />
        </Navigator>
      )
    }
  </FetchServerData>
)

ログイン後にコピー
1. FaCC では、HOC のようにライフサイクルで多くのことを実行して、元のコンポーネントをカプセル化することもできます。私が取り組んでいたプロジェクトは、以前は大規模に HOC を使用していましたが、いくつかの議論の後、大規模に FaCC に変わり始めました。
   違い

rrreeerrreee さらに 2 つの HOC を上に追加すると、上記の結合プロセスは非常に醜くなります。比較的言えば、FaCC では、どのようにカプセル化されるか、データ ソースがどこから来たのか、コンポーネントがどのようなデータを受信するのかがすべてより顕著になります。

パフォーマンスの最適化

HOC では、プロパティは HOC から受け渡されるため、ホストからプロパティを受け取ることができ、完全なライフサイクルもあり、 shouldComponentUpdate 最適化を使用できます。これは、内部でプロパティを比較できない FaCC には当てはまりません。外部コンポーネントを組み合わせた場合にのみプロパティを比較できます。

以上がReactの機能サブコンポーネントと上位コンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。