کد نویسی تمیز در React: ترفند ها و نکات با مثال

به‌عنوان توسعه‌دهندگان React، همه ما می‌خواهیم کد تمیزتری بنویسیم که ساده‌تر و خواناتر باشد. در این مقاله، به 12 روش برتر که می‌توانید از امروز شروع به نوشتن کد تمیز در React کنید تا ساخت پروژه‌های React و بررسی کدتان را بسیار آسان‌تر کنید. به طور کلی، یادگیری نحوه نوشتن کد React تمیزتر، شما را به یک توسعه‌دهنده React با ارزش‌تر و در کل خوشحال‌تر تبدیل می‌کند، پس بیایید وارد عمل شویم!

دقت کنید که نوشتن کد React تمیز مهم است زیرا نشان دهنده یک طرز فکر دقیق و اختصاصی است. وقتی برای نوشتن کدهای تمیز و منظم وقت می گذاریم، تعهد خود را به صنعت توسعه نرم افزار نشان می دهیم. کد تمیز ثابت می کند که ما برای کیفیت کار خود ارزش قائل هستیم و حاضریم زمان و تلاش لازم را برای تولید چیزی واقعا استثنایی سرمایه گذاری کنیم.

برای آشنایی با ویژگی های جدید در React 19 می توانید این مقاله را بررسی کنید.

1. از کوتاه نویسی JSX استفاده کنید

چگونه یک مقدار true را به یک پراپس داده شده منتقل می کنید؟

در مثال زیر، ما از prop showTitle برای نمایش عنوان برنامه خود در یک کامپوننت Navbar استفاده می کنیم.

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle={true} />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  )
}

آیا باید به صراحت showTitle را روی true بولی تنظیم کنیم؟ خیر! یک کوتاه نویسی سریع که باید به خاطر بسپارید این است که هر پراپس ای که روی یک کامپوننت ارائه می شود دارای مقدار پیش فرض true است.

بنابراین اگر prop showTitle را در Navbar اضافه کنیم، المنت عنوان ما نشان داده خواهد شد:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>} // title shown!
    </div>
  )
}

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

اگر عنوان نوار Navbar خود را با عنوان prop تنظیم می کنیم، فقط می توانیم مقدار آن را در دو “” قرار دهیم:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

2. کدهای نامرتبط را به یک کامپوننت جداگانه منتقل کنید

مسلماً ساده‌ترین و مهم‌ترین راه برای نوشتن کد React تمیزتر این است که در انتزاع کد خود به کامپوننت جداگانه React مهارت داشته باشیم.

بیایید به مثال زیر نگاه کنیم. کد ما چه کار می کند؟

برنامه ما یک کامپوننت Navbar را نمایش می دهد. ما روی آرایه ای از پست ها با ()map. تکرار می کنیم و title آنها را در صفحه نمایش می دهیم.

// src/App.js

export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <main>
      <Navbar title="My Special App" />
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

چگونه می توانیم این کد را تمیزتر بنویسیم؟

چرا ما کدی را که روی آن حلقه می زنیم، پست هایمان انتزاع نمی کنیم و آنها را در یک کامپوننت جداگانه نمایش نمی دهیم که به آن FeaturedPosts می گوییم.

بیایید این کار را انجام دهیم و به نتیجه نگاه کنیم:

// src/App.js

export default function App() {
 return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

همانطور که می بینید، اکنون می توانیم فقط به کامپوننت App خود نگاه کنیم. با خواندن نام کامپوننت های داخل آن، Navbar و FeaturedPosts، دقیقاً می بینیم که برنامه ما چه چیزی را نمایش می دهد.

3. برای هر کامپوننت فایل های جداگانه ایجاد کنید

از مثال قبلی خود، همه کامپوننت خود را در یک فایل واحد، فایل app.js قرار می دهیم.

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

این، دوباره، به ما کمک می کند تا نگرانی ها را در برنامه خود جدا کنیم. این بدان معنی است که هر فایل فقط مسئول یک کامپوننت است و اگر بخواهیم یک کامپوننت را در برنامه خود مجدداً استفاده کنیم، هیچ سردرگمی وجود ندارد:

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

// src/components/Navbar.js

export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

// src/components/FeaturedPosts.js

export default function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

علاوه بر این، با گنجاندن هر یک از کامپوننت‌ها در فایل خاص خود، از پر شدن بیش از حد یک فایل جلوگیری می‌کنیم. اگر بخواهیم همه کامپوننت خود را به آن فایل اضافه کنیم، به راحتی می‌توانیم بزرگ شدن فایل app.js خود را مشاهده کنیم.

4. قابلیت های مشترک را به هوک های React منتقل کنید

با نگاهی به کامپوننت FeaturedPosts، فرض کنید به جای نمایش داده های پست های ثابت، می خواهیم داده های پست خود را از یک API واکشی کنیم.

ممکن است این کار را با fetch API انجام دهیم. برای آن می توانید نتیجه را در زیر مشاهده کنید:

// src/components/FeaturedPosts.js

import React from 'react';

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

با این حال، اگر بخواهیم این درخواست برای داده را در چندین کامپوننت انجام دهیم، چه؟

فرض کنید علاوه بر یک کامپوننت FeaturedPosts می‌خواستیم کامپوننت‌ای به نام «فقط پست‌ها» با داده‌های مشابه ایجاد کنیم. ما باید منطقی را که برای واکشی داده‌هایمان استفاده می‌کردیم کپی کنیم و آن‌ها را در آن کامپوننت نیز جای‌گذاری کنیم.

برای اجتناب از انجام این کار، چرا از یک هوک React جدید که می‌توانیم آن را useFetchPosts بنامیم استفاده نکنیم:

// src/hooks/useFetchPosts.js

import React from 'react';

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}

هنگامی که این هوک را در یک پوشه اختصاصی 'hooks' ایجاد کردیم، می‌توانیم آن را در هر کامپوننت‌ای که دوست داریم، از جمله کامپوننت FeaturedPosts خود، دوباره استفاده کنیم:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

چه زمانی نباید از هوک useMemo استفاده کرد؟

پیاده سازی معماری میکروفرانت اند در React

ایجاد یک پروژه ری اکت با Vite و TypeScript 

Vite.js چیست؟

5. تا حد امکان جاوا اسکریپت را از JSX خود حذف کنید

یکی دیگر از راه‌های بسیار مفید، اما اغلب نادیده گرفته شده برای پاکسازی کامپوننت ما این است که تا حد امکان جاوا اسکریپت را از JSX خود حذف کنیم.

بیایید به مثال زیر نگاهی بیندازیم:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={event => {
          console.log(event.target, 'clicked!');
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

ما در حال تلاش برای مدیریت یک رویداد کلیک روی یکی از پست‌هایمان هستیم. می بینید که خواندن JSX ما بسیار سخت تر می شود. با توجه به اینکه تابع ما به عنوان یک تابع درون خطی گنجانده شده است، هدف این کامپوننت و همچنین توابع مرتبط با آن را مبهم می کند.

برای رفع این مشکل چه کنیم؟ ما می‌توانیم تابع درون خطی متصل به onClick را در یک هندلر جداگانه استخراج کنیم که می‌توانیم نام مناسبی مانند handlePostClick به آن بدهیم.

پس از انجام این کار، JSX ما یک بار دیگر قابل خواندن می شود:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()
  
  function handlePostClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

6. استایل های درون خطی را برای کدهای کمتر متورم قالب بندی کنید

یک الگوی رایج برای توسعه دهندگان React این است که سبک های درون خطی را در JSX خود بنویسند. اما بار دیگر، این کار خواندن کد ما را سخت‌تر و نوشتن JSX اضافی را سخت‌تر می‌کند:

// src/App.js

export default function App() {
  return (
    <main style={{ textAlign: 'center' }}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: '20px' }}>
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1>
    </div>
  )
}

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

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

// src/App.js

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    <main style={styles.main}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

7. prop drilling را با ری اکت Context کاهش دهید

یکی دیگر از الگوهای ضروری برای استفاده از پروژه‌های React خود (به خصوص اگر ویژگی‌های مشترکی دارید که می‌خواهید از آن‌ها مجدداً در کامپوننت خود استفاده کنید، و متوجه می‌شوید که کارهای تکراری زیادی می‌نویسید) استفاده از React Context است.

به عنوان مثال، اگر می‌خواهیم داده‌های کاربر را در چندین کامپوننت به اشتراک بگذاریم، به‌جای چندین بار تکرار (الگویی به نام prop drilling)، می‌توانیم از ویژگی Context که در کتابخانه React تعبیه شده است استفاده کنیم.

در مورد ما، اگر می‌خواهیم از داده‌های کاربر در قسمت‌های Navbar و FeaturedPosts خود استفاده مجدد کنیم، تنها کاری که باید انجام دهیم این است که کل برنامه خود را در یک کامپوننت Provider قرار دهیم.

در مرحله بعد، ما می‌توانیم داده‌های کاربر را روی مقدار پراپ ارسال کنیم و با کمک هوک useContext، آن Context را در کامپوننت های فرزند استفاده کنیم:

// src/App.js

import React from "react";

const UserContext = React.createContext();

export default function App() {
  const user = { name: "Reed" };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar title="My Special App" />
        <FeaturedPosts />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js

function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/FeaturedPosts.js

function FeaturedPosts() {
  const posts = useFetchPosts();
  const user = React.useContext(UserContext);

  if (user) return null;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

8. نامگذاری توصیفی

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

در اینجا چند دستورالعمل برای استفاده از نامگذاری توصیفی در کد React آورده شده است:

کامپوننت ها: نام کامپوننت هایی را انتخاب کنید که دقیقاً هدف یا نقش آنها را در برنامه نشان دهد. از اسم های توصیفی یا عبارات اسمی استفاده کنید که به وضوح آنچه را که کامپوننت انجام می دهد، بیان می کند.

// Good: Descriptive component name
<UserProfile />

// Avoid: Vague or unclear component name
<Component1 />

متغیرها و توابع: نام متغیرها و توابعی را انتخاب کنید که هدف آنها یا داده هایی را که نگه می دارند/دستکاری می کنند توضیح دهد. از camelCase برای متغیرها و از حروف کوچک برای توابع استفاده کنید.

// Good: Descriptive variable and function names

const userDisplayName = 'John Doe';

function calculateTotalPrice(items) {

  // ...

}


// Avoid: Unclear or abbreviated names

const uName = 'John Doe';

function calc(items) {

  // ...

}

فایل ها و دایرکتوری ها: نام فایل ها و دایرکتوری های خود را به گونه ای نام گذاری کنید که محتویات آنها را منعکس کند. برای بهبود خوانایی از حروف کوچک، خط تیره و زیرخط استفاده کنید.

// Good: Descriptive file and directory names
UserProfile.js
user-profile/

Props و State: هنگام ارسال props یا تعریف استیت کامپوننت، نام‌هایی را به آن‌ها بدهید که نشان دهنده هدف و داده‌هایی است که دارند.

// Good: Descriptive props and state names
<ProfileCard name={user.name} />

class UserProfile extends React.Component {
  state = {
    isLoading: true,
    userData: null,
  };
  // ...
}

// Avoid: Generic or unclear names
<ProfileCard n={user.name} />

class UserProfile extends React.Component {
  state = {
    flag: true,
    data: null,
  };
  // ...
}

رویداد Handler: هنگام تعریف توابع کنترل کننده رویداد، از نام هایی استفاده کنید که عملکردی را که انجام می دهند یا رویدادی را که مدیریت می کنند، توصیف می کند.

// Good: Descriptive event handler name
function handleButtonClick() {
  // ...
}

// Avoid: Generic event handler name
function handleClick() {
  // ...
}

کامنت: در صورت لزوم، از نظرات برای ارائه زمینه یا توضیح اضافی برای کد پیچیده استفاده کنید. با این حال، نوشتن کدی را که خود توضیحی است و بدون اظهار نظر زیاد در اولویت قرار دهید.

نامگذاری توصیفی باعث ارتقای ارتباطات واضح می شود و به توسعه دهندگان آینده (از جمله خود آینده شما) کمک می کند تا هدف و عملکرد عناصر مختلف در برنامه React شما را درک کنند. هنگام نامگذاری عناصر، مزایای دراز مدت داشتن کدی که خواندن، نگهداری و همکاری در آن آسان است را در نظر بگیرید.

9. قالب بندی سازگار

قالب‌بندی ثابت در React شامل رعایت مجموعه‌ای از قوانین و قراردادها برای طرح‌بندی کد، تورفتگی، فاصله و سایر جنبه‌های سبکی در کل برنامه شما است. سازگاری در قالب‌بندی خوانایی کد، قابلیت نگهداری و همکاری بین توسعه‌دهندگان را بهبود می‌بخشد. در اینجا چند دستورالعمل برای حفظ قالب بندی سازگار در کد React آورده شده است:

تورفتگی: از تورفتگی ثابت برای هر سطح از تودرتو استفاده کنید. یک انتخاب رایج استفاده از دو یا چهار فضا برای هر سطح است. یک سبک را انتخاب کنید و در طول پروژه به آن پایبند باشید.

// Example using four-space indentation
function MyComponent() {
    return (
        <div>
            <p>Hello, world!</p>
        </div>
    );
}

قرار دادن بریس: { بازکننده را در همان خط بلوکی که با آن مرتبط هستند قرار دهید. این یک روش رایج در جاوا اسکریپت است.

// Good: Opening brace on the same line

function MyComponent() {

    // ...

}



// Avoid: Opening brace on a new line

function MyComponent()

{

    // ...

}

فضاهای خالی و قالب بندی: از فاصله ثابت در اطراف عملگرها، داخل حروف الفبای شی و پرانتزهای قبل و بعد استفاده کنید. بعد از کاما و دو نقطه فاصله اضافه کنید.

// Good: Consistent spacing around operators and objects
const user = { name: 'John', age: 30 };

// Avoid: Inconsistent spacing
const user={name:'John', age :30};

طول خط: سعی کنید خطوط را تا حد معقولی کوتاه نگه دارید (معمولاً حدود 80 تا 100 کاراکتر) برای بهبود خوانایی کد. اگر یک خط خیلی طولانی است، آن را به چند خط بشکنید.

// Good: Line breaks to keep line length manageable
<MyComponent prop1={value1} prop2={value2} prop3={value3} />

// Avoid: Long lines that reduce readability
<MyComponent prop1={value1} prop2={value2} prop3={value3} prop4={value4} prop5={value5} />

نام‌گذاری ثابت: از قراردادهای نام‌گذاری ثابت برای متغیرها، توابع، کامپوننت‌ها و سایر شناسه‌ها استفاده کنید. یک سبک نامگذاری (camelCase، PascalCase، و غیره) را انتخاب کنید و آن را به طور یکنواخت اعمال کنید.

نظرات: از سبک های نظر منسجم پیروی کنید. از نظرات تک خطی (//) برای توضیحات کوتاه و نظرات چند خطی (/* */) برای توضیحات طولانی تر یا مسدود کردن نظرات استفاده کنید.

سازماندهی ایمپورت ها: ایمپورت های خود را منظم و منطقی گروه بندی کنید. می توانید از ابزارهایی مانند ESLint یا Prettier برای قالب بندی خودکار ایمپورت خود استفاده کنید.

تراز کد: بلوک های کد مشابه را به صورت عمودی برای گروه بندی بصری و وضوح بهتر تراز کنید.

// Good: Aligned code for better readability

const firstName = 'John';

const lastName  = 'Doe';



// Avoid: Misaligned code

const firstName = 'John';

const lastName = 'Doe';

استفاده از کد قالب: استفاده از ابزارهای قالب‌بندی کد مانند Prettier را در نظر بگیرید تا به طور خودکار قالب‌بندی ثابت را در پایگاه کد خود اعمال کنید. این ابزارها می توانند در گردش کار توسعه شما ادغام شوند تا اطمینان حاصل شود که قالب بندی بدون تلاش دستی ثابت می ماند.

با حفظ شیوه‌های قالب‌بندی ثابت در سرتاسر پایگاه کد React خود، درک و مشارکت در کد را برای توسعه‌دهندگان آسان‌تر می‌کنید و خطر خطاها را کاهش می‌دهید و کیفیت کلی کد را بهبود می‌بخشید.

10. مدیریت استیت

مدیریت استیت در React به فرآیند مدیریت و کنترل داده هایی اشاره دارد که رفتار و ظاهر یک کامپوننت یا برنامه را مشخص می کند. کامپوننت‌های React می‌توانند حالت داخلی داشته باشند، یعنی داده‌هایی که می‌توانند در طول زمان تغییر کنند و هنگام به‌روزرسانی، رندر مجدد را آغاز کنند. با این حال، همانطور که برنامه شما رشد می کند، مدیریت وضعیت بین کامپوننت می تواند پیچیده شود. راه‌حل‌های مدیریت استیت با ارائه راه‌های ساختاریافته برای مدیریت، اشتراک‌گذاری و به‌روزرسانی وضعیت به مدیریت این پیچیدگی کمک می‌کنند.

چندین راه‌حل مدیریت استیت برای برنامه‌های React وجود دارد که هر کدام سطوح مختلفی از پیچیدگی و موارد استفاده را ارائه می‌کنند:

1. استیت کامپوننت محلی:

برای کامپوننت‌های ساده با تعامل محدود، مدیریت استیت درون کامپوننت با استفاده از متد های useState هوک یا this.state و this.setState (برای کامپوننت‌های کلاس) کافی است.

2. Context API:

Context API یک راه حل داخلی برای به اشتراک گذاشتن استیت بین چندین کامپوننت بدون نیاز به عبور پروپ ها از طریق کامپوننت های واسطه است. برای سطوح متوسط اشتراک گذاری استیت مناسب است.

3. Redux:

Redux یک کتابخانه مدیریت استیت محبوب است که یک فروشگاه متمرکز برای استیت برنامه فراهم می کند. این به ویژه برای برنامه های پیچیده با مقادیر زیادی استیت مشترک یا تعاملات مکرر بین کامپوننت مفید است. برای کار با ریداکس در ری اکت می توانید این مقاله را بررسی کنید.

4. MobX:

MobX یکی دیگر از کتابخانه های مدیریت استیت است که هدف آن ساده سازی مدیریت استیت با استفاده از اشیاء قابل مشاهده است. برای برنامه هایی که رویکرد واکنشی تری به مدیریت استیت ترجیح داده می شود، مناسب است.

5. React Query:

React Query بر مدیریت داده‌های ناهمزمان، مانند واکشی و ذخیره پاسخ‌های API تمرکز دارد. این به ویژه برای مدیریت داده های از راه دور و مدیریت واکشی داده ها، کش کردن، همگام سازی و موارد دیگر مفید است.

6. Apollo Client:

اگر برنامه شما با GraphQL API کار می کند، Apollo Client راه حل قدرتمندی برای مدیریت داده ها، کوئری ها و جهش ها ارائه می دهد. ابزارهایی برای ذخیره سازی، عادی سازی داده ها و پشتیبانی از اشتراک فراهم می کند.

یک راه حل مدیریت استیت بر اساس پیچیدگی برنامه خود و الزامات خاص پروژه خود انتخاب کنید. صرف نظر از راه حل، اهداف اصلی مدیریت استیت این است که داده های برنامه شما را ثابت، قابل نگهداری و برای کامپوننتی که به آن نیاز دارند در دسترس نگه دارد، در حالی که رندرهای غیر ضروری را به حداقل می رساند.

11. رسیدگی به خطا

مدیریت خطا در React شامل مدیریت و پاسخگویی به خطاهای غیرمنتظره ای است که ممکن است در حین اجرای برنامه شما رخ دهد. مدیریت صحیح خطا با ارائه بازخورد معنی دار و جلوگیری از خرابی، تجربه کاربر را افزایش می دهد. در اینجا یک یادداشت کوتاه در مورد مدیریت خطا در React آورده شده است:

مرزهای خطا Error Boundaries:

React مفهومی به نام "Error Boundaries" را برای رسیدگی به خطاهایی که در کامپوننت رخ می دهد ارائه می دهد. مرز خطا یک کامپوننت React است که خطاهای جاوا اسکریپت را در هر جایی از درخت کامپوننت فرزند خود می گیرد و به جای خراب کردن کل برنامه، یک رابط کاربری بازگشتی نمایش می دهد. می توانید با استفاده از روش چرخه حیات componentDidCatch مرزهای خطا را تعریف کنید.

class ErrorBoundary extends React.Component {

  constructor(props) {

    super(props);

    this.state = { hasError: false };

  }



  componentDidCatch(error, errorInfo) {

    this.setState({ hasError: true });

    // Log the error or send an error report

    console.error(error, errorInfo);

  }



  render() {

    if (this.state.hasError) {

      return <h1>Something went wrong.</h1>;

    }

    return this.props.children;

  }

}



// Usage

<ErrorBoundary>

  <MyComponent />

</ErrorBoundary>

بلوک‌های Try-Catch:

برای مدیریت خطاها در متدهای کامپوننت، می‌توانید از بلوک‌های try and catch استاندارد جاوا اسکریپت استفاده کنید. این به ویژه برای عملیات ناهمزمان مانند تماس های API مفید است.

class MyComponent extends React.Component {

  async fetchData() {

    try {

      const response = await fetch('https://api.example.com/data');

      const data = await response.json();

      // Process data

    } catch (error) {

      console.error('Error fetching data:', error);

      // Display an error message to the user

    }

  }



  render() {

    // ...

  }

}

نمایش پیام های خطا:

وقتی خطایی رخ می‌دهد، نمایش پیام‌های خطای واضح و کاربرپسند برای کمک به کاربران در درک اشتباهات مهم است. شما می توانید پیام های خطا را در کامپوننت خود بر اساس وضعیت رسیدگی به خطا ارائه دهید.

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = { error: null };

  }



  async fetchData() {

    try {

      // ...

    } catch (error) {

      console.error('Error fetching data:', error);

      this.setState({ error: 'An error occurred while fetching data.' });

    }

  }



  render() {

    const { error } = this.state;



    return (

      <div>

        {error ? <p>{error}</p> : <p>Data loaded successfully!</p>}

        {/* ... */}

      </div>

    );

  }

}

با پیاده‌سازی مرزهای خطا، استفاده از بلوک‌های try-catch و ارائه پیام‌های خطای آموزنده، می‌توانید یک برنامه React قوی‌تر و کاربرپسند ایجاد کنید که به‌خوبی خطاهای غیرمنتظره را مدیریت می‌کند و رضایت کلی کاربر را بهبود می‌بخشد.

چرا سازماندهی و نوشتن React Code تمیز مهم است؟

سازماندهی کد پاک در React به دلایل عملی و همچنین به دلیل تأثیر بصری آن مهم است. یک پایگاه کد خوب طراحی شده و سازماندهی شده می تواند از نظر بصری دلپذیر باشد و کار با آن و درک آن را آسان تر کند.

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

باز هم، زمانی که کد تمیز و منظم باشد، دیدن روابط بین عناصر مختلف، درک نحوه تناسب آنها با یکدیگر و ایجاد تغییرات در صورت لزوم آسان تر است.

نتیجه

امیدوارم زمانی که سعی می‌کنید کد React خود را بهبود ببخشید، این راهنما برای شما مفید باشد تا آن را تمیزتر، خواندن آسان‌تر و در نهایت لذت‌بخش‌تر برای ساختن پروژه‌های React خود انجام دهید. نوشتن کد React.js تمیز فقط جنبه زیبایی شناسی ندارد. این در مورد ایجاد پایه ای برای یک برنامه کاربردی قابل نگهداری و مقیاس پذیر است. با پیروی از این بهترین شیوه‌ها، نه تنها کدی ایجاد می‌کنید که کار می‌کند، بلکه کدی را ایجاد می‌کنید که درک، اصلاح و همکاری در آن آسان‌تر است. به خاطر داشته باشید که کد تمیز یک تلاش مداوم است و با ادامه بهبود مهارت های کدنویسی، برنامه های React شما از وضوح و قابلیت نگهداری بیشتر بهره مند خواهند شد.