React レンダー関数で非同期呼び出しを効果的に使用するにはどうすればよいですか?

React レンダー関数での Async/Await の使用: 代替アプローチ

非同期プログラミングは、React アプリケーションでよく発生します (特に外部を扱う場合)。データソース。ただし、React のレンダリング関数内で async と await を直接使用すると、予期しない結果が生じる可能性があります。

React に非同期呼び出しを効果的に組み込むための一般的なアプローチは、状態管理テクニックを利用することです。これには、componentDidMount などの別のライフサイクル メソッドでデータを取得するか、useEffect などのフックを使用してデータを取得し、データが利用可能になったら状態を更新することが含まれます。

次の例を考えてみましょう。

<code class="javascript">class ParentThatFetches extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? (
      <child data="{this.state.data}"></child>
    ) : null;
  }
}

const Child = ({ data }) => (
  <tr key="{index}">
    {data.map((x, i) => (
      <td key="{i}">{x}</td>
    ))}
  </tr>
);</code>

Inこのアプローチでは、ParentThatFetches コンポーネントがデータを非同期にフェッチし、それに応じて状態を更新します。データが利用可能になると、データを表示する子コンポーネントがレンダリングされます。

代替アプローチ: サーバー側コンポーネント

React 18 で導入された React サーバー コンポーネントは、React アプリケーションで非同期データを処理するための別のアプローチを提供します。従来のクライアント側レンダリング モデルとは異なり、React サーバー コンポーネントはサーバー上でレンダリングされるため、HTML がクライアントに送信される前にデータをフェッチして処理できます。

React サーバー コンポーネントを利用する更新された例を次に示します。

<code class="javascript">import Geocode from "react-geocode";
import _ from "lodash-es";

const getAddressData = async (getCompanyUserRidesData = []) =>
  Promise.all(
    getCompanyUserRidesData.map(async (userRides) => {
      const addr = await Geocode.fromLatLng(22.685131, 75.873468);
      const address = addr.results[0].formatted_address;
      const email = _.get(userRides, "driverId.email", "");
      const mobile = _.get(userRides, "driverId.mobile", "");
      return { address, email, mobile };
    })
  );

async function GeoServerComponent({ phase, getCompanyUserRidesData }) {
  const data = await getAddressData(getCompanyUserRidesData);
  return (
    <table>
      <tbody>
        {data.map(({ address, email, mobile }, index) => (
          <tr key="{index}">
            <td>{address}</td>
            <td>Goa</td>
            <td>asdsad</td>
            <td>{email}</td>
            <td>{mobile}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}</code>

この例では、getAddressData 関数はサーバー上でアドレスを非同期的に取得します。次に、GeoServerComponent 関数はアドレスを小道具として受け取り、必要な HTML をサーバー上でレンダリングします。このアプローチにより、HTML がクライアントに送信される前にデータの準備が整っていることが保証され、レンダリング関数で async と await を直接使用するときに発生する問題が解決されます。

以上がReact レンダー関数で非同期呼び出しを効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。