11 هک مفید React.js که هر برنامه نویسی باید بداند

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

1. از اجزای کاربردی با قلاب استفاده کنید

با معرفی React Hooks، اجزای کاربردی قدرتمندتر از همیشه شده اند. Hooks به شما امکان می دهد بدون نوشتن کلاس از حالت و سایر ویژگی های React استفاده کنید. این باعث می شود کد شما تمیزتر و درک آن آسان تر شود.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
};

export default Counter;

2. کامپوننت ها را با React.memo

برای بهینه سازی عملکرد، می توانید استفاده کنید React.memo برای به خاطر سپردن اجزای عملکردی این کار از رندرهای مجدد غیرضروری با مقایسه قطعات و تنها در صورت تغییر رندر مجدد جلوگیری می کند.

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}div>;
});

export default MemoizedComponent;

3. استفاده کنید useEffect برای عوارض جانبی

را useEffect قلاب برای ایجاد عوارض جانبی در اجزای عملکردی استفاده می شود. می توان از آن برای واکشی داده ها، اشتراک ها یا تغییر دستی DOM استفاده کرد.

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}pre> : 'Loading...'}
    div>
  );
};

export default DataFetcher;

4. قلاب های سفارشی برای منطق قابل استفاده مجدد

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

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetch;

5. رندر شرطی با ارزیابی مدار کوتاه

رندر شرطی را می توان با استفاده از ارزیابی اتصال کوتاه ساده کرد. این باعث می شود JSX شما تمیزتر و خواناتر شود.

const ConditionalRender = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!p>}
      {!isLoggedIn && <p>Please log in.p>}
    div>
  );
};

export default ConditionalRender;

6. استفاده کنید React.lazy برای تقسیم کد

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

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => (
  <div>
    <Suspense fallback={<div>Loading...div>}>
      <LazyComponent />
    Suspense>
  div>
);

export default App;

7. مرزهای خطا برای مدیریت برازنده خطا

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

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

8. استفاده کنید React.Fragment برای گروه بندی عناصر

React.Fragment به شما این امکان را می دهد که لیستی از کودکان را بدون اضافه کردن گره های اضافی به DOM گروه بندی کنید. این به ویژه زمانی مفید است که شما نیاز به برگرداندن چندین عنصر از یک جزء دارید.

const List = () => {
  return (
    <React.Fragment>
      <li>Item 1li>
      <li>Item 2li>
      <li>Item 3li>
    React.Fragment>
  );
};

export default List;

9. اجزای مرتبه بالاتر (HOC) برای استفاده مجدد از کد

کامپوننت های مرتبه بالاتر (HOC) الگویی در React برای استفاده مجدد از منطق کامپوننت هستند. HOC تابعی است که یک جزء را می گیرد و یک جزء جدید را برمی گرداند.

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withLogger;

10. استفاده کنید React.Context برای مدیریت دولتی جهانی

React.Context راهی برای انتقال داده ها از طریق درخت مؤلفه بدون نیاز به ارسال props به صورت دستی در هر سطح ارائه می دهد. این برای مدیریت دولت جهانی مفید است.

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

export { ThemeProvider, useTheme };

11. بهینه سازی عملکرد با React.PureComponent

React.PureComponent مشابه است React.Component، اما اجرا می کند shouldComponentUpdate با مقایسه سطحی و حالت. این می تواند عملکرد را با کاهش رندرهای غیر ضروری بهبود بخشد.

import React from 'react';

class PureComponentExample extends React.PureComponent {
  render() {
    console.log('Rendering...');
    return <div>{this.props.value}div>;
  }
}

export default PureComponentExample;

نتیجه گیری

React.js یک کتابخانه قدرتمند است که طیف گسترده ای از ویژگی ها و بهترین شیوه ها را برای کمک به توسعه دهندگان در ساخت برنامه های کاربردی کارآمد و قابل نگهداری ارائه می دهد. با استفاده از این 11 هک، می توانید فرآیند توسعه خود را ساده کنید، عملکرد را بهبود بخشید و کدهای تمیزتر و قابل استفاده مجددتر بنویسید. چه تازه کار خود را با React شروع کرده باشید و چه به دنبال افزایش مهارت های خود باشید، این نکات به شما کمک می کند توسعه دهنده React ماهرتری باشید.

کد نویسی مبارک!