web-dev-qa-db-ja.com

React古典的な `class`コンポーネントでReactフックを使用するにはどうすればよいですか？

この例では、この反応クラスがあります：

class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return <div>{this.state.sampleState}
   }
}

問題は、Reactフックをこれに追加できるかどうかです。 React-HooksはReact Classスタイルの代替手段であることを理解しています。しかし、Reactフックにゆっくり移行したい場合、クラスに便利なフックを追加できますか？

javascriptreactjsreact-hooks
13
Aminadav Glickshtein

高次コンポーネント は、フックが登場するまでこのタイプのことを行ってきた方法です。フック用のシンプルな高次コンポーネントラッパーを作成できます。

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return <Component {...props} myHookValue={myHookValue} />;
  }
}

これは実際にはクラスコンポーネントから直接フックを使用するわけではありませんが、これにより少なくともクラスコンポーネントからフックのlogicを使用できるようになります。 、リファクタリングなし。

class MyDiv extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return <div>{myHookValue}</div>;
  }
}

MyDiv = withMyHook(MyDiv);
20
Joel Cox

クラスコンポーネントはフックをサポートしていません-

Hooks-FAQ によると：

クラスコンポーネント内でフックを使用することはできませんが、クラスと関数コンポーネントを単一のツリーでフックと確実に混在させることができます。コンポーネントがフックを使用するクラスまたは関数であるかどうかは、そのコンポーネントの実装の詳細です。長期的には、フックがReactコンポーネントを記述する主要な方法になると予想されます。

10
Gilad Bar

フックはクラスではなく、関数に使用することを目的としています。フックを使用する場合は、フック付きの機能コンポーネントとして新しいコードを作成することから始めます。

React FAQs によると

クラスコンポーネント内でフックを使用することはできませんが、クラスと関数コンポーネントを単一のツリーでフックと確実に混在させることができます。コンポーネントがフックを使用するクラスまたは関数であるかどうかは、そのコンポーネントの実装の詳細です。長期的には、フックがReactコンポーネントを記述する主要な方法になると予想されます。

const MyDiv = () => {
   const [sampleState, setState] = useState('hello world');
   render(){
      return <div>{sampleState}</div>
   }
}
4
Shubham Khatri

React Hooksを使用すると、クラスを作成せずにリアクション機能とライフサイクルを使用できます。それは、はるかに小さくて読みやすいフォームファクターを持つクラスコンポーネントの同等バージョンのようなものです。 Reactフックに移行するのは、書くのが楽しいからです。ただし、機能コンポーネント用に導入されているため、クラスコンポーネント内に反応フックを記述することはできません。

これは次のように簡単に変換できます。

class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return <div>{this.state.sampleState}
   }
}

const MyDiv = () => {
   const [sampleState, setSampleState] = useState('hello world');
   return <div>{sampleState}</div>
}
3
kk_360

他の回答で既に説明したように、フックAPIは、クラスコンポーネントでのみ現在使用可能な機能を関数コンポーネントに提供するように設計されています。フックはクラスコンポーネントで使用することは想定されていません。

クラスコンポーネントを記述して、機能コンポーネントへの移行を容易にすることができます。

単一の状態の場合：

class MyDiv extends Component {
   state = {sampleState: 'hello world'};

   render(){
      const { state } = this;
      const setState = state => this.setState(state);

      return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
   }
}

に変換されます

const MyDiv = () => {
   const [state, setState] = useState({sampleState: 'hello world'});

   return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
}

useStateステートセッターはステートプロパティを自動的にマージしないことに注意してください。これはsetState(prevState => ({ ...prevState, foo: 1 }))でカバーする必要があります。

複数の状態の場合：

class MyDiv extends Component {
   state = {sampleState: 'hello world'};

   render(){
      const { sampleState } = this.state;
      const setSampleState = sampleState => this.setState({ sampleState });

      return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
   }
}

に変換されます

const MyDiv = () => {
   const [sampleState, setSampleState] = useState('hello world');

   return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
}
2
Estus Flask

ステートフルコンポーネント、コンテナ、またはクラスベースのコンポーネントはReactフックの機能をサポートするため、ステートレスコンポーネントだけでステートフルコンポーネントにReactフックする必要はありません。

いくつかの追加情報

Reactフックとはでは、フックとは何ですか？ウェルフックは新しい方法であるか、コンポーネントを記述する新しい方法を提供します。

これまでのところ、もちろん機能およびクラスベースのコンポーネントがありますよね？機能コンポーネントは小道具を受け取り、画面にレンダリングする必要のあるJSXコードを返します。

これらはプレゼンテーションに最適であるため、ビジネスロジックについてではなく、UIパーツのレンダリングに使用され、通常はコンポーネントごとに1つまたはいくつかの目的に焦点を合わせます。

一方、クラスベースのコンポーネントも小道具を受け取りますが、この内部状態も持っています。したがって、クラスベースのコンポーネントは、ビジネスロジックの大部分を実際に保持するコンポーネントです。したがって、ビジネスロジックでは、HTTPリクエストを作成し、応答を処理し、アプリの内部状態を変更する必要があります。 HTTPがなくても。ユーザーがフォームに記入し、これを画面のどこかに表示したいので、この状態が必要です。これにはクラスベースのコンポーネントが必要です。したがって、通常はクラスベースのコンポーネントを使用して他のコンポーネントを調整し、状態を渡しますたとえば、機能コンポーネントの小道具として。

さて、この分離に伴う1つの問題と、それがもたらすすべての利点がありますが、1つの問題は、あるコンポーネント形式から別のコンポーネント形式への変換が煩わしいことです。難しいことではありませんが、面倒です。

機能コンポーネントをクラスベースのコンポーネントに変換する必要がある状況に陥った場合、それは多くのタイピングであり、常に同じもののタイピングが多いため、面倒です。

引用符の大きな問題は、ライフサイクルフックを正しく使用するのが難しい場合があることです。

明らかに、componentDidMountを追加してそこにコードを実行することは難しくありませんが、どのライフサイクルフックを使用するか、いつ、どのように正しく使用するかを知っていることは、特に複雑なアプリケーションでとにかく難しい場合があります。コンポーネントを作成する1つの方法があり、そのスーパーコンポーネントはHTTPリクエストなどの状態と副作用の両方を処理し、ユーザーインターフェイスもレンダリングできますか？

さて、これがまさにフックのすべてです。フックは機能的なコンポーネントを作成する新しい方法を提供しますが、それは重要です。

2
Allan Duarte

既存のクラスコンポーネントでは不可能です。クラスコンポーネントを機能コンポーネントに変換してから、次の行で何かを行う必要があります-

function MyDiv() {
const [sampleState, setSampleState] = useState('hello world');
return (
      <div>{sampleState}</div>
    )
}
1
Aseem Upadhyay

私にとって、React.createRef（）は役に立ちました。

例：

constructor(props) {
      super(props);
      this.myRef = React.createRef();
   }

...


<FunctionComponent ref={this.myRef} />

元の投稿 ここ 。

0
Fikret