بخش 4: نوشتن کد واکنش پاک و کارآمد – بهترین روش ها و تکنیک های بهینه سازی

به قسمت 4 مجموعه ما در “خوش آمدید”به بهترین شیوه ها در سال 2023 واکنش نشان دهید“! در این بخش، تکنیک ها و استراتژی های مختلفی را برای نوشتن کدهای تمیز و کارآمد در برنامه های React شما بررسی می کنیم. با پیروی از این بهترین روش ها، می توانید بهبود بخشید قابلیت نگهداری، کارایی، و خوانایی از پایگاه کد شما

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

1. مرزهای خطا را اجرا کنید تا خطاهای مؤلفه را به خوبی مدیریت کنید

اجزای خود یا بخش های خاصی از برنامه خود را با مرزهای خطا بپیچید گرفتن و رسیدگی به خطاها به صورت کنترل شده

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

جزء بالاتر (HOC) – withErrorBoundary:

// HOC for error boundary
const withErrorBoundary = (WrappedComponent) => {
  return (props) => {
    const [hasError, setHasError] = useState(false);
    const [errorInfo, setErrorInfo] = useState(null);

    useEffect(() => {
      const handleComponentError = (error, errorInfo) => {
        setHasError(true);
        setErrorInfo(errorInfo);
        // You can also log the error to an error reporting service here
      };

      window.addEventListener('error', handleComponentError);

      return () => {
        window.removeEventListener('error', handleComponentError);
      };
    }, []);

    if (hasError) {
      // You can customize the fallback UI or error message here
      return <div>Something went wrong. Please try again later.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

استفاده:

// HOC for error boundary
import withErrorBoundary from './withErrorBoundary';

const Todo = () => {
  // Component logic and rendering
}

const WrappedComponent = withErrorBoundary(Todo);

2. از React.memo برای اجزای کاربردی استفاده کنید

React.memo یک مؤلفه مرتبه بالاتر است که نتیجه یک مؤلفه عملکردی را حفظ می کند. جلوگیری از رندرهای غیر ضروری.

با قرار دادن اجزای عملکردی خود با React.memo، می توانید عملکرد را بهینه کنید پرش از رندرهای مجدد زمانی که اجزای مؤلفه تغییر نکرده باشند.

به عنوان مثال،

// ❌ 
const TodoItem = ({text}) => {
  return <div> {text} </div>
} 

// Todo

const Todo = () => {
 //... Component logic

return <div>
 //.. Other elements
   <TodoItem //.. />
</div>
}

در این مثال، ما یک مؤلفه تابعی به نام TodoItem داریم که یک نام prop دریافت می کند و یک متن todo را ارائه می دهد.

به‌طور پیش‌فرض، مؤلفه هر زمان که باشد دوباره رندر می‌شود مولفه والد Todo رندر مجدد

برای بهینه سازی عملکرد، می توانیم بسته بندی کنیم TodoItem با React.memo، یک نسخه حفظ شده از مؤلفه ایجاد می کند. این جزء حفظ شده خواهد بود فقط در صورتی که پایه های آن تغییر کرده باشد دوباره رندر شود.

// ✅ Memoized version of TodoItem using React.memo
const TodoItem = React.memo(({text}) => {
  return <div> {text} </div>
}) 

با استفاده از React.memo می‌توانیم از رندرهای غیرضروری جلوگیری کنیم و عملکرد اجزای عملکردی را بهینه کنیم.

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

3. از Linting برای کیفیت کد استفاده کنید

استفاده از ابزار Linter، مانند ESLint، می‌تواند کیفیت و ثبات کد را در پروژه‌های React شما بسیار بهبود بخشد.

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

• از سبک کد یکنواخت اطمینان حاصل کنید

• خطاها و الگوهای مشکل ساز را بگیرید

• بهبود خوانایی و قابلیت نگهداری کد

• اجرای استانداردها و کنوانسیون های کدگذاری

4. از صادرات پیش فرض خودداری کنید

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

// ❌ Avoid default export
const Todo = () => {
  // component logic...
};

export default Todo;  

در عوض، توصیه می‌شود از صادرات با نام در React استفاده کنید:

// ✅ Use named export
const Todo = () => {

}

export { Todo };

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

• واردات نامبرده به خوبی کار می کند تکان درخت.

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

5. از تخریب شی استفاده کنید

وقتی استفاده می کنیم دسترسی مستقیم به ملک استفاده كردن علامت نقطه برای دسترسی به خصوصیات فردی یک شی، برای موارد ساده به خوبی کار خواهد کرد.

// ❌ Avoid direct property access using dot notation
const todo = {
   id: 1,
   name: "Morning Task",
   completed: false
}

const id = todo.id;
const name = todo.name;
const completed = todo.completed;

این رویکرد می تواند برای موارد ساده خوب کار کند، اما می تواند تبدیل شود دشوار و تکراری هنگامی که با اشیاء بزرگتر سروکار دارید یا زمانی که فقط به زیر مجموعه ای از ویژگی ها نیاز است.

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

// ✅ Use object destructuring
const { id, name = "Task", completed } = todo; 

• این نیاز را کاهش می دهد تکراری دسترسی به ویژگی شی

• از انتساب پشتیبانی می کند مقادیر پیش فرض.

• متغیر اجازه می دهد تغییر نام و نام مستعار.

6. از قطعات استفاده کنید

قطعات با اجتناب از div‌های پوشاننده غیرضروری هنگام رندر کردن چندین عنصر، کد پاک‌تر را امکان‌پذیر می‌کنند.

// ❌ Avoid unnecessary wrapper div
const Todo = () => (
  <div>
    <h1>Title</h1>
    <ul>
      // ...
    </ul>
  </div>
);

در کد بالا، Unnecessary wrapper div می تواند پیچیدگی غیر ضروری را به ساختار DOM اضافه کند و به طور بالقوه بر دسترسی صفحه وب شما تأثیر بگذارد.

// ✅ Use fragments
const Todo = () => (
  <>
    <h1>Title</h1>
    <ul>
      // ...
    </ul>
  </>
);

7. اشیاء عبوری را به جای وسایل متعدد ترجیح دهید

هنگامی که از چندین آرگومان استفاده می کنیم یا برای انتقال اطلاعات مربوط به کاربر به مؤلفه یا تابع استفاده می شود، به خاطر سپردن آن می تواند چالش برانگیز باشد. نظم و هدف از هر آرگومان، به خصوص زمانی که تعداد آرگومان ها افزایش می یابد.

// ❌ Avoid passing multiple arguments
const updateTodo = (id, name, completed) => {
 //...
}

// ❌ Avoid passing multiple props
const TodoItem = (id, name, completed) => {
  return(
    //...
  )
}

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

// ✅ Use object arguments
const updateTodo = (todo) => {
 //...
}

const todo = {
   id: 1,
   name: "Morning Task",
   completed: false
}

updateTodo(todo);

• عملکرد بیشتر می شود خود توصیفی و راحت تر قابل درک است.

• کاهش احتمال خطاهای ناشی از ترتیب آرگومان نادرست.

• آسان به اضافه کردن یا تغییر خصوصیات بدون تغییر امضای تابع

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

8. از توابع جهت دار استفاده کنید

توابع پیکان، نحو مختصر و محدوده واژگانی را ارائه می دهند و نیاز به صریح را از بین می برند. this اتصال و بهبود خوانایی کد

// ❌
function sum(a, b) {
  return a + b;
}

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

// ✅ Use arrow function
const sum = (a, b) => a + b;

• توابع پیکان کد را بیشتر می کند فشرده – جمع و جور و رسا.

• آی تی به طور خودکار زمینه را متصل می کند، کاهش شانس this اشکالات مرتبط

• کد را بهبود می بخشد قابلیت نگهداری.

9. به جای اعداد یا رشته ها از enums استفاده کنید

// ❌ Avoid Using numbers or strings
switch(status) {
  case 1:
    return //...
  case 2:
    return //...
  case 3:
    return //...
}

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

// ✅ Use Enums
const Status = {
  NOT_STARTED: 1,
  IN_PROGRESS: 2,
  COMPLETED: 3
}

const { NOT_STARTED, IN_PROGRESS COMPLETED } = Status;

switch(status) {
  case NOT_STARTED:
    return //...
  case IN_PROGRESS:
    return //...
  case COMPLETED:
    return //...
}

• Enums دارند معنی دار و خود توصیفی ارزش های.

• بهتر کردن خوانایی کد.

• کاهش شانس غلط املایی یا مقادیر نادرست.

• بهتر بررسی نوع، تکمیل خودکار ویرایشگر، و مستندات.

10. از کوتاه نویسی برای پروپوزال های بولی استفاده کنید

// ❌
<Dropdown multiSelect={false} />

// ✅ Use shorthand
<Dropdown multiSelect />

نحو اختصار برای props بولی کد را بهبود می بخشد خوانایی با کاهش پرحرفی های غیرضروری و روشن کردن مقصود.

11. از استفاده از شاخص ها به عنوان ابزار کلیدی خودداری کنید

// ❌ Avoid index as key
const renderItem = (todo, index) => {
  const {name} = todo;
  return <li key={index}> {name} </>
}

استفاده از شاخص ها به عنوان ابزارهای کلیدی می تواند منجر به *رندر نادرست * مخصوصاً هنگام افزودن، حذف یا مرتب کردن مجدد موارد لیست.

می تواند منجر شود عملکرد ضعیف و به روز رسانی نادرست کامپوننت.

// ✅ Using unique and stable identifiers
const renderItem = (todo, index) => {
  const {id, name} = todo;
  return <li key={id}> {name} </>
}

• به روز رسانی موثر و ترتیب مجدد اجزاء در لیست ها.

• کاهش مشکلات احتمالی رندر.

• از بروز رسانی نادرست مؤلفه جلوگیری می کند.

12. از بازگشت ضمنی در توابع کوچک استفاده کنید

// ❌ Avoid using explicit returns 
const square = value => {
  return value * value;
}

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

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

// ✅ Use implicit return
const square = value => value * value;

• بازگشت ضمنی پرگویی کد را کاهش می دهد.

• کد را بهبود می بخشد خوانایی.

• این می تواند قابلیت نگهداری کد را با تمرکز بر روی افزایش دهد منطق اصلی به جای بازگرداندن اظهارات

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

// ❌ Bad Code
const Button = ({ text, enabled }) => 
      <button enabled>{text}</button>;

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

// ✅ Use PropTypes
import PropTypes from 'prop-types';

const Button = ({ enabled, text }) => 
      <button enabled> {text} </button>;

Button.propTypes = {
  enabled: PropTypes.bool
  text: PropTypes.string.isRequired,
};

• به تشخیص خطا کمک می کند زمان کامپایل.

• فراهم می کند درک بهتر و نوع مورد انتظار قطعه

• PropType به عنوان یک عمل می کند مستندات برای توسعه دهندگان دیگری که با کامپوننت کار می کنند.

14. استفاده از الفبای الگو را ترجیح دهید

// ❌ Bad Code
const title = (seriesName) => 
      "Welcome to " + seriesName + "!";

کد بالا می تواند منجر به پر حرف کد و درون یابی یا الحاق رشته ها را دشوارتر می کند.

// ✅ Use template literals
const title = (seriesName) => 
      `Welcome to ${seriesName}!`;

• ساده می کند دستکاری رشته با اجازه دادن به درونیابی متغیر در رشته.

• کد را بیشتر می کند رسا و خواندن راحت تر.

• از رشته های چند خطی بدون راه حل اضافی پشتیبانی می کند.

• بهبود قالب بندی کد

15. اجتناب از اجزای بزرگ

اجتناب از اجزای بزرگ در React برای حفظ کد تمیز، ماژولار و قابل نگهداری بسیار مهم است.

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

// ❌ Avoid huge component
const Todo = () => {
  // State Management
  const [text, setText] = useState("");
  const [todos, setTodos] = useState([])
  //... More states

  // Event Handlers
  const onChangeInput = () => //...
  // Other event handlers

  return (
   <div>
      <input //.. />
      <input //.. />   
      <button //.. />
      <list //... >
        <list-item //..>
      </list/>
   </div>
  )
};

export default Todo;  

در مثال بالا، کامپوننتی به نام داریم Todo، که شامل متغیرهای حالت چندگانه و گردانندگان رویداد و عناصر.

همانطور که جزء رشد می کند، تبدیل می شود مدیریت سخت تر، اشکال زدایی و فهمیدن.

برای پرداختن به این موضوع می‌توانید وبلاگ زیر را بررسی کنید، توصیه می‌شود چنین مؤلفه‌های عظیمی را به آن تقسیم کنید کوچکتر، قابل استفاده مجدد، و اجزای متمرکز.

منتظر وبلاگی باشید که به آن اختصاص داده شده است تکنیک های بهینه سازی در React. ما استراتژی‌های اضافی را برای افزایش عملکرد و کارایی در اجزای شما بررسی خواهیم کرد. این اطلاعات ارزشمند را از دست ندهید!

کد نویسی مبارک!😊👩‍💻👨‍💻