پس از بررسی بیش از 500 کامپوننت React، در اینجا چیزی است که من یاد گرفتم

Summarize this content to 400 words in Persian Lang
در چند سال گذشته، من این امتیاز را داشته ام که بیش از 500 مؤلفه React را برای پروژه های مختلف، از جمله استارتاپ ها، بنویسم و ​​بررسی کنم. و از طریق این فرآیند بررسی گسترده، برخی از بینش های مهم را کشف کرده ام. چه مبتدی یا یک توسعه‌دهنده باتجربه باشید، این دستورالعمل‌ها به شما کمک می‌کند اجزای React قابل فهم، قابل نگهداری و کارآمدتری بنویسید.

1. ساختار سازگار کلید است

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

✅ انجام دهید:هنگام ساختاربندی اجزای خود همیشه از یک نظم ثابت پیروی کنید. به طور معمول، این دستور به خوبی کار می کند:

بیانیه های وارداتی
اعلام مولفه
ایالت و مراجع
قلاب های افکت
گردانندگان رویداد
رندر منطقی

import React, { useState, useEffect } from ‘react’;

const MyComponent = () => {
// State hooks
const [data, setData] = useState(null);

// Effect hooks
useEffect(() => {
fetchData();
}, []);

// Event handlers
const fetchData = async () => {
const result = await fetch(‘https://api.example.com/data’);
setData(await result.json());
};

return (

{data ? {data} : Loading…}

);
};

export default MyComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. اجزاء را کوچک و متمرکز نگه دارید

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

✅ انجام دهید:اجزای خود را به قطعات کوچکتر و قابل استفاده مجدد تقسیم کنید. یک قانون کلی خوب، اصل مسئولیت واحد است: هر جزء باید یک کار را انجام دهد و آن را به خوبی انجام دهد.

const UserProfile = ({ user }) => {
return (

);
};

const UserAvatar = ({ avatarUrl }) => ;
const UserDetails = ({ name, email }) => (

);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. از PropTypes برای بررسی نوع استفاده کنید

🛑 نکن:نادیده گرفتن انواع prop می تواند منجر به اشکالات شود و اجزای شما را کمتر قابل پیش بینی کند.

✅ انجام دهید:از PropTypes برای مستندسازی انواع پیش‌بینی‌شده‌ها و تشخیص زودهنگام اشکالات استفاده کنید.

import PropTypes from ‘prop-types’;

const UserProfile = ({ user }) => {
return (

);
};

UserProfile.propTypes = {
user: PropTypes.shape({
avatarUrl: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired
}).isRequired
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. بهینه سازی عملکرد با Memoization

🛑 نکن:رندر کردن مجدد اجزای گران قیمت غیر ضروری می تواند منجر به مشکلات عملکرد شود.

✅ انجام دهید:از React.memo و useMemo برای بهینه سازی عملکرد با به خاطر سپردن اجزا و مقادیر استفاده کنید.

import React, { memo, useMemo } from ‘react’;

const ExpensiveComponent = ({ data }) => {
const computedValue = useMemo(() => computeExpensiveValue(data), [data]);

return {computedValue};
};

export default memo(ExpensiveComponent);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. برای اجزای خود تست بنویسید

🛑 نکن:غفلت از آزمایش اجزای خود می تواند منجر به رگرسیون و باگ های سخت شود.

✅ انجام دهید:تست های واحد را برای اجزای خود بنویسید تا مطمئن شوید که مطابق انتظار کار می کنند.

import { render, screen } from ‘@testing-library/react’;
import UserProfile from ‘./UserProfile’;

test(‘renders user profile’, () => {
const user = { avatarUrl: ‘avatar.png’, name: ‘John Doe’, email: ‘john@example.com’ };
render();

expect(screen.getByText(‘John Doe’)).toBeInTheDocument();
expect(screen.getByText(‘john@example.com’)).toBeInTheDocument();
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

برای امروز کافی است.

و همچنین، منابع توسعه دهنده وب مورد علاقه خود را برای کمک به مبتدیان در اینجا به اشتراک بگذارید!

با من ارتباط برقرار کنید:@ LinkedIn و نمونه کارها را بررسی کنید.

کانال یوتیوب من را کاوش کنید! اگر به نظر شما مفید است.

لطفاً به پروژه های GitHub من ستاره بدهید ⭐️

با تشکر از 26959! 🤗

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  // State hooks
  const [data, setData] = useState(null);

  // Effect hooks
  useEffect(() => {
    fetchData();
  }, []);

  // Event handlers
  const fetchData = async () => {
    const result = await fetch('https://api.example.com/data');
    setData(await result.json());
  };

  return (
    

      {data ? 
{data}
 : 
Loading...
}
    
  );
};

export default MyComponent;

const UserProfile = ({ user }) => {
  return (
    
  );
};

const UserAvatar = ({ avatarUrl }) => ;
const UserDetails = ({ name, email }) => (
  
);

import PropTypes from 'prop-types';

const UserProfile = ({ user }) => {
  return (
    
  );
};

UserProfile.propTypes = {
  user: PropTypes.shape({
    avatarUrl: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired
  }).isRequired
};

import React, { memo, useMemo } from 'react';

const ExpensiveComponent = ({ data }) => {
  const computedValue = useMemo(() => computeExpensiveValue(data), [data]);

  return 
{computedValue}
;
};

export default memo(ExpensiveComponent);

import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';

test('renders user profile', () => {
  const user = { avatarUrl: 'avatar.png', name: 'John Doe', email: 'john@example.com' };
  render();

  expect(screen.getByText('John Doe')).toBeInTheDocument();
  expect(screen.getByText('john@example.com')).toBeInTheDocument();
});