استخدام Async/Await في وظائف React Render: نهج بديل

غالبًا ما تتم مواجهة البرمجة غير المتزامنة في تطبيقات React، خاصة عند التعامل مع التطبيقات الخارجية مصادر البيانات. ومع ذلك، فإن استخدام غير المتزامن والانتظار مباشرة داخل وظيفة التصيير في React يمكن أن يؤدي إلى نتائج غير متوقعة.

لدمج الاستدعاءات غير المتزامنة بشكل فعال في React، هناك نهج شائع يتمثل في استخدام تقنيات إدارة الحالة. يتضمن ذلك جلب البيانات بأسلوب دورة حياة منفصل، مثل ComponentDidMount أو استخدام خطافات مثل useEffect، وتحديث الحالة بمجرد توفر البيانات.

فكر في المثال التالي:

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 ? (
      
    ) : null;
  }
}

const Child = ({ data }) => (
  
    {data.map((x, i) => (
      {x}
    ))}
  
);

في هذا الأسلوب، يقوم مكون ParentThatFetches بجلب البيانات بشكل غير متزامن ويقوم بتحديث حالته وفقًا لذلك. بمجرد توفر البيانات، فإنه يعرض المكون الفرعي، الذي يعرض البيانات.

النهج البديل: المكونات من جانب الخادم

مكونات خادم React، المقدمة في React 18 ، توفير طريقة أخرى للتعامل مع البيانات غير المتزامنة في تطبيقات React. على عكس نموذج العرض التقليدي من جانب العميل، يتم عرض مكونات React Server على الخادم، مما يسمح لك بجلب البيانات ومعالجتها قبل إرسال HTML إلى العميل.

إليك مثال محدث يعزز مكونات React Server:

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 (
    
        {data.map(({ address, email, mobile }, index) => (
          
        ))}
      

      

            
{address}
            
Goa
            
asdsad
            
{email}
            
{mobile}
          
    
  );
}

في هذا المثال، تقوم وظيفة getAddressData بجلب العناوين بشكل غير متزامن على الخادم. تقوم وظيفة GeoServerComponent بعد ذلك باستلام العناوين كدعائم وتعرض HTML الضروري على الخادم. يضمن هذا الأسلوب أن تكون البيانات جاهزة قبل إرسال HTML إلى العميل، مما يؤدي إلى حل المشكلات التي تمت مواجهتها عند استخدام المزامنة والانتظار مباشرة في وظيفة العرض.