remix React: 4 اشتباه رایج که می تواند کد شما را خراب کند + نحوه صاف نگه داشتن ویب ها

به عنوان مهندس نرم افزار و دی جی، من یاد گرفته ام که نوشتن تمیز واکنش/کد نسخه مانند مخلوط کردن یک مجموعه عالی است – اشتباهات کوچک می تواند کل جریان را از بین ببرد. درست مانند یک انتقال بد می تواند واقعاً احساس را در طبقه رقص از بین ببرد (اگر جمعیت آن را جلب کند) ، برخی از اشتباهات در واکنش می تواند منجر به کد حشره دار ، آهسته و غیرقابل تحمل شود.

اما بیایید به آن برسیم! در اینجا من چهار اشتباه رایج را که توسعه دهندگان در React ایجاد می کنند و البته چند راه برای جلوگیری از آنها را تجزیه می کنم. من از چند قیاس djing استفاده می کنم تا حتی بیشتر سرگرم کننده باشد!

🎵

1. دولت را به درستی مدیریت نکنید (با نام مستعار ضرب و شتم خیلی زود)

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

✅این را امتحان کنید

🎛

2. بیش از حد استفاده useEffect(فاجعه حلقه بازخورد)

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

🚫 این کار را نکنید

const Playlist: React.FC = () => {
  const [tracks, setTracks] = React.useState([]);

  React.useEffect(() => {
    fetch("/api/tracks") // Runs on every render 😱
      .then((res) => res.json())
      .then((data) => setTracks(data));
  });

  return ;
};

✅این را امتحان کنید

const Playlist: React.FC = () => {
  const [tracks, setTracks] = React.useState([]);

  React.useEffect(() => {
    fetch("/api/tracks")
      .then((res) => res.json())
      .then((data) => setTracks(data));
  }, []); // Runs only once when the component mounts

  return ;
};

🔗 3.

در کنار کسی که به تجهیزات من می پردازد (این قبلاً اتفاق افتاده است) زمانی است که جلوه های زیادی در همان زمان اجرا می شوند و آهنگ شما عقب می ماند. همان با کد اگر مؤلفه مجدداً مجموعه ای از داده ها را در مورد هر رندر محاسبه می کند ، UI شما را کند می کند.

🚫 این کار را نکنید

type BPMAnalyzerProps = {
  beats: number[];
};

const BPMAnalyzer: React.FC = ({ beats }) => {
  const avgBPM = beats.reduce((sum, bpm) => sum + bpm, 0) / beats.length; // Runs on every render 😭

  return 
Average BPM: {avgBPM}
;
};

✅ این را امتحان کنید

const BPMAnalyzer: React.FC = ({ beats }) => {
  const avgBPM = React.useMemo(
    () => beats.reduce((sum, bpm) => sum + bpm, 0) / beats.length,
    [beats]
  ); // Only recalculates when 'beats' changes

  return 
Average BPM: {avgBPM}
;
};

🔊 نکته: استفاده کنید useCallbackبرای کارکردهای داخل رویداد برای جلوگیری از بازگرداندن مجدد غیر ضروری در اجزای کودک.

🎚 4. نادیده گرفتن ترکیب مؤلفه (انتقال کثیف جریان را از بین می برد)

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

🚫 این کار را نکنید

✅ این را امتحان کنید

const PlayButton: React.FC = () => Play;
const PauseButton: React.FC = () => Pause;

const Mixer: React.FC = () => (
  
);

🔊 نکته: یک درخت مؤلفه خوب ساختار یافته باعث می شود برنامه شما برای اشکال زدایی ، مقیاس و حفظ آن آسان تر شود.

code کد را به راحتی جریان دهید

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

✅ حالت مورد نیاز خود را حفظ کنید
✅ از تماس های غیر ضروری استفاده کنید
✅ محاسبات گران قیمت را به یاد بیاورید
✅ از ترکیب مؤلفه عاقلانه استفاده کنید

امیدوارم این راهنما به شما کمک کند تا کد React (و TypeScript) پاک کننده و کارآمدتر بنویسید – و حتی ممکن است در مورد کدگذاری نحوه ترکیب موسیقی فکر کنید! 🎛

🔥 بزرگترین اشتباه واکنش شما را مرتکب شده اید؟ نظر زیر را رها کنید! دوست دارم بشنوم!

یکی از مخلوط های من را در اینجا بررسی کنید ، در حالی که می خوانید:
🔊 https://on.soundcloud.com/nvxeowkbk25wz3wm8