クラスコンポーネントの上に機能的な部品+フックを使うべきですか?

9786 ワード
react webdev テキストリンク
あなたが反応するのが新しいならば、あなたはチュートリアルを通して働いていました、チャンスはあなたがフックとクラス構成要素の両方の機能的な構成要素の例に走らせました.ベテランの開発者として、あなたはまだそのクラスのコンポーネントを使用している可能性があります、その価値が書き換えを疑問に思う.
あなたも考えているかもしれません.

I've been digging for answers, but I just can't find a clear answer for this


それは十分に公平であり、公式文書にも2020年半ばまでは強い推薦はなかった.

どちらを使いますか.
公式反応チームスタンス(docsによる)は、以下の通りです

When you’re ready, we’d encourage you to start trying Hooks in new components you write. [...] We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).


要約
  • 新しいコードはフックで機能的な構成要素を使用しなければなりません、準備ができているとき、
  • 古いコードは、あなたが
    • を書き直したくないならば、クラス構成要素を使用し続けることができます

    私はちょうどフックに焦点を当てる必要がありますか?
    それは簡単ではない.
    Error Boundariesをビルドするには、まだクラスコンポーネントが必要です.
    その上、フックと機能的なコンポーネントにそれらを書き直す必要が全くないので、2019年以前に書かれたほとんどのコードはまだクラス構成要素をまだ使うでしょう.コードベースの既存のコードを理解する場合は、クラスコンポーネントを学習する必要があります.
    また、彼らのインタビュー中に質問をする企業はまだクラスについてお問い合わせしますが見つかります.

    フックを使うために古いクラスベースのコードを書き直すべきですか?
    すべての良いことと同様に、ここで考慮するトレードオフがあります.
    フックは、より複雑で、類似した複雑さのクラス構成要素と比較して構成要素を理解しやすくなります.
    私のポイントを説明するには、最初にクラスとして書かれたThe Star Wars APIからいくつかのデータを取得するコンポーネントを比較します.
    import React from 'react';

export default class DataDisplayer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null,
    };
  }

  async componentDidMount() {
    const response = await fetch(
      `https://swapi.dev/api/people/${this.props.id}/`
    );
    const newData = await response.json();
    this.setState({ data: newData });
  }

  componentWillUnmount() {
    // if this was a subscription, we'd need clean-up here
    console.log('CWU');
  }

  render() {
    const { data } = this.state;
    if (data) {
      return <div>{data.name}</div>;
    } else {
      return null;
    }
  }
}
    かなり標準クラスのコンポーネント.
    アプリの成長として、ライフサイクルのメソッドが大きく成長し、コンテキストの切り替えだけでは、ファイルをスクロールからの関与増加します.
    私はあなたのことを知りませんが、クラスをスクロールするときの私の思考過程は次のようなものです.

    Okay so I'm in componentDidMount, so we'll be fetching data here

    Okay so here we're rendering, so this code runs every single time

    I need to add some extra functionality... hmm which lifecycle method does that go in again?


    一方、フックがあります.
    import React, { useEffect, useState } from 'react';

export default function DataDisplayer(props) {
  const [data, setData] = useState('');

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(`https://swapi.dev/api/people/${props.id}/`);
      const newData = await response.json();
      setData(newData);
    };
    getData();
    return () => {
      // if this was a subscription, we'd need clean-up here
    };
  }, [props.id]);

  if (data) {
    return <div>{data.name}</div>;
  } else {
    return null;
  }
}
    フックでは、順番に続くコードを書くことはずっと簡単です、そして、私はフックで機能的なコンポーネントを読むのを見つけることはより少ない文脈スイッチングを必要とします.
    それはフックへの書き直しの主な利点です-あなたのCodeBaseの開発者の経験は、各コンポーネントが何をするかを理解するのに時間がかかるにつれて向上します.
    主な欠点は、時間-書き換えを費やした時間は、新しい機能を構築を費やしている可能性があります時間です.

    ここからどこですか.
    過去に私のチームにフックを紹介するとき、私は以下のアプローチを勧めました.
  • すべての新しいコードはフック
    • と機能的なコンポーネントとして記述する必要があります
  • 既存のコードは、(例えば、バグを修正したり、機能を追加したりする場合は、コンポーネントをフックに交換するまでに時間をかけて)触れられたら書き直さなければなりません
    (これはMaxrozen . comの私のブログに掲載された記事です.
    • SwifDuck:複数の減速器とシンプルなReduxストア
    MySQLのいくつかの模様の技