React Native や React を初めて使用する場合は、state と props という言葉に出会ったことがあるでしょう。これら 2 つを理解することは、動的で適応性のあるモバイル アプリケーションを開発するために不可欠です。このブログ記事では、state と props について詳しく説明し、それらの違いを調べ、React Native アプリケーションでデータ フローを効果的に処理する方法を学びます。

ステートとプロパティとは何ですか?

州

State は、コンポーネントが独自のデータを作成および管理できるようにする組み込みオブジェクトです。コンポーネントのライフサイクルを通じて変更される可能性のある情報が保持されます。状態が変化するたびに、コンポーネントはそれらの変化を反映するために再レンダリングされます。

• Mutable: 状態は、setState (クラス コンポーネント内) または useState フック (機能コンポーネント内) を使用して変更できます。
• コンポーネントに対してローカル: 状態は完全にカプセル化されており、コンポーネントに対してローカルです。
• 再レンダリングのトリガー: 状態を更新すると、コンポーネントが再レンダリングされます。

小道具

Props (プロパティの略) は読み取り専用コンポーネントです。これらは、引数が関数に渡される方法と同様に、コンポーネントに渡される外部パラメータです。

• Immutable: 小道具を受け取るコンポーネントは小道具を変更できません。
• 親から継承: プロップは親コンポーネントから子コンポーネントに渡されます。
• 構成に使用: コンポーネントを構成し、その動作を外部から制御します。

違いを理解する

いつ状態を使用し、いつプロパティを使用するかを理解することが、アプリ内のデータ フローを管理する鍵となります。

なぜ重要なのでしょうか?

• State は、ユーザー入力、API 応答、またはその他の動的データを追跡して応答する必要があるコンポーネントにとって不可欠です。
• Props を使用すると、動的なデータと関数を受け入れることでコンポーネントを再利用できるようになり、コードがよりモジュール化され、保守しやすくなります。

データ フローを効果的に管理する

効果的なデータ フロー管理により、アプリが予測どおりに動作し、デバッグと保守が容易になります。

1.一方向のデータ フロー

React Native は単方向のデータ フローを使用します。データは props を介して親コンポーネントから子コンポーネントに移動します。これにより、データ フローの理解とデバッグが容易になります。

2.ステータスアップ

複数のコンポーネントが同じデータにアクセスする必要がある場合は、状態を最も近い共通の祖先まで引き上げるのが最善です。このようにして、共有状態を props.

3.子から親への通信にコールバックを使用する

子コンポーネントが親コンポーネントと通信できるようにするには、関数 (コールバック) を props として渡すことができます。子コンポーネントはこの関数を呼び出して、親にデータを送り返すことができます。

例

これらの概念を説明するために、いくつかのコード例を見てみましょう。

例 1: 小道具の使用

親コンポーネント (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
  );
};

export default App;

子コンポーネント (Greeting.js):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

説明：

• App コンポーネントは name prop を Greeting コンポーネントに渡します。
• Greeting コンポーネントは props を受け取り、props.name を使用してパーソナライズされたメッセージを表示します。

例 2: 状態の使用

カウンターコンポーネント (Counter.js):

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

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

  return (
    You clicked {count} times setCount(count   1)} />
    
  );
};

export default Counter;

説明：

• useState フックを使用してカウントを 0 に初期化します。
• setCount 関数は状態を更新します。
• ボタンを押すとカウントが増加し、コンポーネントが再レンダリングされて新しいカウントが表示されます。

例 3: 状態を引き上げる

親コンポーネント (TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
  );
};

export default TemperatureConverter;

子コンポーネント (TemperatureInput.js):

import React from 'react';
import { TextInput, Text } from 'react-native';

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:>
  );
};

export default TemperatureInput;

説明：

• 共有状態の温度とスケールは、TemperatureConverter コンポーネントに引き上げられます。
• TemperatureInput コンポーネントは props を受け取り、コールバックを通じて変更を親に送り返します。

ベストプラクティス

1.可能な場合はコンポーネントをステートレスに保つ

ステートレス コンポーネントはテストとデバッグが簡単です。 props を使用してデータを渡します。

2.ステートフルネスを最小限に抑える

必要な場合にのみ状態を使用します。ステートフル コンポーネントが多すぎると、アプリの管理が難しくなる可能性があります。

3.直接的な状態の突然変異を避ける

状態を直接変更しないでください。常に setState または useState.

4.型チェックに PropType を使用する

PropType を使用して、コンポーネントに渡されるプロパティの意図したタイプを文書化します。

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5.グローバル状態のコンテキスト API を利用する

さまざまなネスト レベルの多くのコンポーネントからアクセスできる必要があるデータの場合は、Context API の使用を検討してください。

避けるべきよくある間違い

• 状態を直接変更する:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• 小道具を使用して親の状態を直接変更する:

子コンポーネントは、props や親の状態を直接変更しようとしてはなりません。コールバックを使用します。

結論

状態とプロパティを理解し、効果的に管理することは、React Native 開発者にとって不可欠です。これらの概念をマスターすると、機能的であるだけでなく、クリーンで効率的で保守しやすいアプリケーションを構築できるようになります。

覚えて：

• 状態は時間の経過とともに変化するデータ用であり、コンポーネント内で管理されます。
• Props は、データと関数をコンポーネント ツリーに渡すためのものです。

時間をかけてプロジェクトでこれらの概念を実践すると、開発ワークフローが大幅に改善されることがわかります。