10 بهترین روش استفاده از React که باید در سال 2023 دنبال کنید

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

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

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

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

جزء کلاس زیر را در نظر بگیرید که داده های API ناسا را ​​نمایش می دهد.

class NasaData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
  }

  render() {
    const { data } = this.state;

    if (!data.length)
      return (
        <div>
          <h1> Fetching data.... </h1>{" "}
        </div>
      );

    return (
      <>
        <h1> Fetch data using Class component </h1>{" "}
        {data.map((item) => (
          <div key={item.id}>{item.title}</div>
        ))}
      </>
    );
  }
}

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

const NasaData = () => {
  const [data, setdata] = useState(null);

  useEffect(() => {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        setdata(json);
      });
  }, [data]);

  return (
    <>
      <h1> Fetch data using Class component </h1>{" "}
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </>
  );
};

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

2. اجتناب از استفاده از حالت (در صورت امکان)

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

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

به جای انجام این کار:

const [username, setusername] = useState('')
const [password, setpassword] = useState('')

این کار را انجام دهید:

const [user, setuser] = useState({})

3. فایل های مربوط به یک جزء را در یک پوشه سازماندهی کنید

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

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

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

سایر بهترین روش های پوشه React عبارتند از:

از فایل های فهرست برای انتزاع جزئیات پیاده سازی فایل کامپوننت خود استفاده کنید. با در نظر گرفتن مثال Navbar، یک پوشه Navbar ایجاد کنید و در این پوشه یک فایل جزء به نام فایل index.js (یا .ts) اضافه کنید.

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

توابع ابزار را در یک پوشه جداگانه مانند پوشه lib یا helpers نگه دارید. این کار مدیریت و استفاده مجدد از این توابع را در آینده آسان تر می کند.

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

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

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

const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={index}>{elem}</li>;
      })}
    </>
  );
};

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

const arr = ["item1", "item2", "item3", "item4", "item5"];

در حال حاضر، اولین مورد لیست، “Item1” در شاخص صفر است، اما اگر آیتم دیگری را در ابتدای لیست اضافه کنید، شاخص “Item1” به 1 تغییر می کند که رفتار آرایه شما را تغییر می دهد.

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

5. در صورت امکان به جای Divs، Fragments را انتخاب کنید

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

const Button = (props) => {
  return <button>{props.text}</button>;
};

const List = () => {
  return (
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  );
};