解決済み: React Native フックをインストールする方法

確かに、次のような記事があります。

React Native は Facebook を活用した革新的なテクノロジーで、開発者は実際のネイティブ ユーザー インターフェイスを提供しながら、JavaScript を使用してモバイル アプリを構築できます。 これは、JavaScript によって制御されるネイティブ コンポーネントを組み込むことで実現されます。 重要な機能の XNUMX つは、React への強力な追加機能である React Native Hooks を介して、クラスベースのコンポーネントではなく機能コンポーネントを使用できることです。

React Native Hooks を使用すると、コードベースをより小さく、よりシンプルにし、理解しやすくすることができます。 この記事では、アプリケーションに React Native Hook をインストールして実装する方法について説明します。

React Native フックのインストール

フックの使用を開始するには、特定のバージョンの React および React Native が必要です。 React のバージョンは 16.8 以降、React Native のバージョンは 0.59 以降の最新である必要があります。

npm install react@^16.8.3 react-native@^0.59.8 --save

上記のコマンドは、必要な React および React Native バージョンをインストールし、プロジェクトに依存関係として保存します。

React Native プロジェクトでのフックの紹介

React Native Hooks は、クラスを作成せずに状態やその他の React 機能を使用できるようにする関数です。 これらは React 16.8 バージョンで追加されました。 これらを React Native プロジェクトに組み込む方法を見てみましょう。

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

使用状態 機能コンポーネントに React 状態を追加するフックです。 上の例では、count という新しい状態変数を初期化しています。

他の人気のあるフックを探索する

React Native は、useState、useEffect、useContext、useReducer、useCallback などの多数のフックを提供します。 ここでは、機能コンポーネントの副作用を管理する useEffect の使用法を調べてみましょう。

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

useEffect React クラスのcomponentDidMount、componentDidUpdate、componentWillUnmountと同じ目的を果たしますが、単一のAPIに統合されています。 レンダリングのたびに実行されます。

React Native Hooks を使用すると、コードが簡素化され、状態と副作用の管理が容易になります。これにより、保守とデバッグがより簡単な、より単純なコードとアプリケーションが得られます。

関連記事：

コメント