5 نکته اساسی برای React که باید به کار بگیرید

در این مقاله لیستی از ترفندهای شگفت انگیز آورده شده است که می‌توانید برای بهبود سریع برنامه‌های ری‌اکت خود از آن‌ها استفاده کنید.

این نکات نه تنها کد شما را تمیزتر و قابل اطمینان‌تر می‌کند، بلکه هدف آن این است که به طور کلی تجربه توسعه را برایتان لذت بخش‌تر کند.

بنابراین سعی کنید در پروژه‌های ری‌اکت خود این تکنیک‌ها را امتحان کنید! 

شما همچنین می‌توانید برای یادگیری کامل ری‌اکت سری به دوره‌های آموزشی راکت بزنید.

 نکته 1 - Redux را با React Query جایگزین کنید

هرچه برنامه شما بزرگتر می‌شود، مدیریت استیت در بین کامپوننت‌ها نیز دشوارتر می‌گردد. پس باید به دنبال یک کتابخانه مدیریت استیت مانند Redux باشیم.

اگر برنامه شما متکی به داده‌هایی است که از API دریافت می‌کنید، اغلب از Redux برای واکشی سرور استیت استفاده می‌کنید و بعد برنامه خود را به روز می‌کنید.

این می‌تواند یک فرایند چالش برانگیز باشد. نه تنها باید داده‌ها را واکشی کنید، بلکه باید استیت‌های مختلف را نیز مدیریت کنید (بسته به اینکه داده را در اختیار دارید یا در حالت بارگیری یا خطا هستید).

در نتیجه به جای استفاده از Redux برای مدیریت داده‌هایی که از سرور دریافت می‌کنید، از کتابخانه‌ای مانند React Query استفاده کنید.

React Query علاوه بر اینکه به شما امکان کنترل بیشتر در ایجاد درخواست‌های HTTP در برنامه‌های ری‌اکت از طریق هوک‌های مفید و نیز بازیابی آسان‌تر داده‌ها می‌دهد، همچنین به شما اجازه می‌دهد تا بدون نیاز به تست دستی استیت، به صورت یکپارچه آن را در بین کامپوننت‌های برنامه خود مدیریت کنید.

در زیر نحوه تنظیم React Query در فایل index.js آورده شده است:

import { QueryClient, QueryClientProvider } from 'react-query'
import ReactDOM from "react-dom";

import App from "./App";

const queryClient = new QueryClient()

const rootElement = document.getElementById("root");
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  rootElement
);

در اینجا ما یک کوئری کلاینت تنظیم می‌کنیم که حافظه کش را برای ما راه اندازی می‌کند تا هر گونه درخواست در گذشته را بدون زحمت مدیریت کنیم. به علاوه یک کامپوننت ارائه دهنده کوئری کلاینت برای انتقال آن به کل درخت کامپوننت.

چگونه شروع به درخواست با React Query کنیم؟

شما می‌توانید این کار را با استفاده از قلاب useQuery انجام دهید که یک شناسه برای جستجوی ما می‌گیرد (در این حالت از آنجا که داده‌های کاربر را واکشی می‌کنیم، آن را "user" می‌نامیم)، به علاوه تابعی که برای واکشی آن داده‌ها استفاده می‌شود.

import { useQuery } from "react-query";

export default function App() {
  const { isLoading, isError, data } = useQuery("user", () =>
    fetch("https://randomuser.me/api").then((res) => res.json())
  );

  if (isLoading) return "Loading...";
  if (isError) return "Error!";

  const user = data.results[0];
  return user.email;
}	

همانطور که مشاهده می‌کنید React Query مسئول مدیریت این استیت‌های مختلف است که می‌تواند هنگام واکشی داده‌های ما صورت گیرد. دیگر نیازی نیست که خودمان این استیت‌ها را مدیریت کنیم، فقط می‌توانیم آنها را در آنچه که توسط useQuery برگردانده شده از بین ببریم.

بخش مدیریت استیت useQuery کجا وارد عمل می‌شود؟

اکنون که داده‌های کاربر را واکشی کردیم و آنها را در حافظه پنهان داخلی خود ذخیره نمودیم، تنها کاری که باید انجام دهیم تا بتوانیم از آن در سایر کامپوننت‌ها استفاده کنیم، فراخوانی ()useQuery با کلید "user" است که با آن مرتبط هستیم:

import { useQuery } from "react-query";

export default function OtherComponent() {
  const { data } = useQuery('user');

  console.log(data);
}

 نکته 2 - با استفاده از قلاب‌های سفارشی کار با React Context را راحت‌تر کنید

React Context راهی عالی برای انتقال داده‌ها از طریق درخت کامپوننت ماست. این به ما امکان می‌دهد بدون نیاز به استفاده از propها، داده‌ها را به هر کامپوننتی که دوست داریم منتقل کنیم.

بنابراین برای این منظور از قلاب useContext استفاده می‌کنیم.

هر چند انجام این کار یک عیب جزئی دارد. و آن این است که در هر کامپوننتی که می‌خواهیم داده‌های منتقل شده در کانتکست را استفاده کنیم، باید شی context ایجاد شده و همچنین React را ایمپورت کنیم تا قلاب useContext را بگیریم.

به جای اینکه هر بار از کانتکست استفاده کنیم تا عبارات متعددی را بنویسیم، می‌توانیم به راحتی یک قلاب ری‌اکت سفارشی ایجاد کنیم.

const user = { name: "Reed" };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

function useUser() {
  const context = React.useContext(UserContext);
  if (context === undefined) {
    throw new Error("useUser in not within UserProvider");
  }
  return context;
}

export default function App() {
  return (
    <UserProvider>
      <Main />
    </UserProvider>
  );
}

function Main() {
  const user = useUser();

  return <h1>{user.name}</h1>; // displays "Reed"
}

در این مثال ما داده‌های کاربر را بر روی کامپوننت UserProvider سفارشی خود ارسال می‌کنیم، که یک شی user را می‌گیرد و بر روی کامپوننت اصلی قرار می‌دهد.

همچنین یک قلاب useUser داریم تا با سهولت بیشتری کانتکست مورد نظر را مصرف کنیم. ما فقط باید این قلاب را خودمان وارد کنیم تا User Context را در هر کامپوننتی که دوست داریم مانند کامپوننت اصلی خود، مصرف کنیم.

نکته 3 - Context Providerها را در یک کامپوننت سفارشی مدیریت کنید

تقریبا در هر برنامه ری‌اکت که ایجاد می‌کنید، به تعدادی از Context Providerها نیاز دارید.

ما نه تنها برای React Context که در حال ایجاد آن هستیم، بلکه از کتابخانه‌های شخص ثالثی که به آن اعتماد می‌کنند (مانند React Query) به Context Provider نیاز داریم تا ابزار خود را به کامپوننت‌های مورد نیاز خود منتقل کنیم.

زمانی که شروع به کار در پروژه ری‌اکت خود کردید، این چیزی است که به نظر می‌رسد:

ReactDOM.render(
  <Provider3>
    <Provider2>
      <Provider1>
        <App />
      </Provider1>
    </Provider2>
  </Provider3>,
  rootElement
);	

در مورد این بی نظمی چه کاری می‌توانیم انجام دهیم؟

به جای قرار دادن همه Context Providerها در داخل فایل App.js یا فایل index.js، می‌توانیم یک کامپوننت به نام ContextProviders ایجاد کنیم.

این به ما امکان می‌دهد تا از prop فرزند استفاده کنیم، سپس تنها کاری که باید انجام دهیم این است که همه این Context Providerها را در این یک کامپوننت قرار دهیم:

src/context/ContextProviders.js

export default function ContextProviders({ children }) {
  return (
    <Provider3>
      <Provider2>
        <Provider1>
          {children}
        </Provider1>
      </Provider2>
    </Provider3>
  );
}

سپس کامپوننت ContextProviders را در برنامه قرار دهید:

src/index.js

import ReactDOM from "react-dom";
import ContextProviders from './context/ContextProviders'
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ContextProviders>
    <App />
  </ContextProviders>,
  rootElement
);

نکته 4 - با استفاده از عملگر object spread، propها را راحت‌تر منتقل کنید

وقتی نوبت به کار با کامپوننت‌ها می‌رسد، به طور معمول داده‌ها را با کمک propها منتقل می‌کنیم. ما یک prop ایجاد می‌کنیم و آن را برابر با مقدار مناسب آن قرار می‌دهیم.

با این حال اگر propهای زیادی داشته باشیم که باید به یک کامپوننت منتقل کنیم، آیا لازم است همه آنها را به صورت جداگانه لیست کنیم؟ البته که نه، این کار را نمی‌کنیم.

یک روش بسیار آسان برای اینکه بتوانید همه propهای مورد علاقه خود را بدون نیاز به نوشتن همه نام‌های پایه و مقادیر مربوط به آنها منتقل کنید، استفاده از الگوی {...props} است.

این شامل قرار دادن همه داده‌های prop در یک شی و پخش همه آنها به صورت جداگانه به کامپوننتی است که می‌خواهیم به آن منتقل کنیم:

export default function App() {
  const data = {
    title: "My awesome app",
    greeting: "Hi!",
    showButton: true
  };

  return <Header {...data} />;
}

function Header(props) {
  return (
    <nav>
      <h1>{props.title}</h1>
      <h2>{props.greeting}</h2>
      {props.showButton && <button>Logout</button>}
    </nav>
  );
}

نکته 5 - نگاشت روی قطعات با استفاده از React fragment

تابع .map() در ری‌اکت به ما امکان می‌دهد تا یک آرایه را بگیریم و آن را تکرار کنیم، سپس داده‌های هر عنصر را در JSX نمایش دهیم.

با این حال در برخی موارد می‌خواهیم بیش از این داده‌ها را تکرار کنیم، اما نمی‌خواهیم آنها را در یک عنصر JSX بسته کنیم. شاید با استفاده از یک عنصر JSX محصور شده، تغییرات ما اعمال شود یا نخواهیم به سادگی عنصر دیگری به DOM اضافه کنیم.

نکته شناخته شده برای امکان تکرار مجموعه‌ای از داده‌ها، داشتن عنصر والد به عنوان یک عنصر HTML، تنها استفاده از React.Fragment نیست.

استفاده از فرم longhand در React fragments به ما اجازه می‌دهد تا کلید اصلی را برای هر عنصری که تکرار می‌کنیم، تهیه کنیم.

import React from 'react'

export default function App() {
  const users = [
    {
      id: 1,
      name: "Reed"
    },
    {
      id: 2,
      name: "John"
    },
    {
      id: 3,
      name: "Jane"
    }
  ];

  return users.map((user) => (
    <React.Fragment key={user.id}>{user.name}</React.Fragment>
  ));
}

توجه داشته باشید که ما نمی‌توانیم از پراپ key مورد نیاز برای مرنویسی fragmentها استفاده کنیم:

شما همچنین می‌توانید برای یادگیری کامل ری‌اکت، سری به دوره‌های آموزشی راکت بزنید.

منبع