20 ترفند ضروری React که هر توسعه دهنده ای باید بداند

Summarize this content to 400 words in Persian Lang
واکنش نشان دهید فوق العاده قدرتمند است، اما تسلط بر آن به معنای فراتر رفتن از اصول اولیه و یادگیری برخی از ترفندهای کمتر شناخته شده برای ساده سازی توسعه است. در اینجا خلاصه ای از شخصی من است favourite 20 React tricks که می تواند بهره وری شما را افزایش دهد و به شما در نوشتن کدهای تمیزتر و موثرتر کمک کند. بیایید مستقیماً به مثالها بپردازیم!
1. ارزیابی مدار کوتاه برای رندر شرطی
پرهیز از پرحرفی if عبارات برای رندر شرطی با ارزیابی اتصال کوتاه.
{isLoading && <Spinner />}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
این رندر می کند تنها زمانی که isLoading درست است، تمیز نگه داشتن JSX خود.
2. نام کلاس های پویا با classnames کتابخانه
این classnames کتابخانه، اعمال مشروط کلاس ها را آسان می کند.
npm install classnames
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
import classNames from ‘classnames’;
const buttonClass = classNames({
‘btn’: true,
‘btn-primary’: isPrimary,
‘btn-secondary’: !isPrimary,
});
<button className={buttonClass}>Click Mebutton>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
3. به خاطر سپردن محاسبات گران قیمت با useMemo
اگر یک محاسبات پرهزینه است، آن را به خاطر بسپارید تا React بی جهت دوباره محاسبه نکند.
const sortedData = useMemo(() => data.sort(), [data]);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
این دوباره محاسبه می کند sortedData تنها زمانی که data تغییر می کند.
4. حذف ورودی ها با useEffect
با حذف تغییرات ورودی، از رندرهای مجدد دائمی خودداری کنید.
const [value, setValue] = useState(”);
const [debouncedValue, setDebouncedValue] = useState(”);
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), 500);
return () => clearTimeout(handler);
}, [value]);
<input value={value} onChange={(e) => setValue(e.target.value)} />
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
5. قلاب های سفارشی برای منطق قابل استفاده مجدد
منطق را در یک قلاب سفارشی کپسوله کنید تا از آن در بین اجزاء استفاده مجدد کنید.
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}
const Component = () => {
const data = useFetch(‘/api/data’);
return <div>{data ? JSON.stringify(data) : ‘Loading…’}div>;
};
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
6. Lazy Loading Components با React.lazy
با تقسیم اجزای خود زمان بارگذاری را بهینه کنید.
const LazyComponent = React.lazy(() => import(‘./LazyComponent’));
function App() {
return (
<React.Suspense fallback={<div>Loading…div>}>
<LazyComponent />
React.Suspense>
);
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
7. دسترسی به Props یا State با useRef
برای دسترسی به مقادیر حالت قبلی، استفاده کنید useRef.
const [count, setCount] = useState(0);
const prevCount = useRef(count);
useEffect(() => {
prevCount.current = count;
}, [count]);
console.log(`Previous: ${prevCount.current}, Current: ${count}`);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
8. با ارسال توابع به رندر مجدد خودداری کنید useCallback
اگر تابعی نیازی به تغییر ندارد، آن را با حافظه ذخیره کنید useCallback.
const increment = useCallback(() => setCount(count + 1), [count]);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
9. تجهیزات تخریبی برای کد تمیزتر
پایه ها را درست در پارامترهای تابع تخریب کنید.
const User = ({ name, age }) => (
<div>{name} is {age} years olddiv>
);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
10. React.Fragment برای گروه بندی عناصر بدون Div های اضافی
عناصر را بدون اضافه کردن یک گره DOM اضافی بپیچید.
<>
<p>Paragraph 1p>
<p>Paragraph 2p>
>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
11. مرزهای خطا برای یافتن خطاهای جاوا اسکریپت
برای جلوگیری از خراب شدن کل برنامه، خطاها را در مؤلفههای فرزند تشخیص دهید.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) return <h1>Something went wrong.h1>;
return this.props.children;
}
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
👨💻 توسعه دهنده Full Stack | 🤖 توسعه دهنده یادگیری ماشین | 🤝 Dev Relations Pro – 💼 موجود برای استخدام – Jagroop2001
github.com
12. با استفاده از PropTypes برای اعتبار سنجی Prop
با تعریف انواع پایه، اشکالات را زودتر تشخیص دهید.
import PropTypes from ‘prop-types’;
function MyComponent({ name }) {
return <div>{name}div>;
}
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
};
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
13. کاهنده های ایالتی با useReducer
برای منطق پیچیده حالت، useReducer می تواند کارآمدتر باشد.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case ‘increment’: return { count: state.count + 1 };
case ‘decrement’: return { count: state.count – 1 };
default: return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
14. useLayoutEffect برای دستکاری های DOM
افکت ها را بعد از به روز رسانی DOM اما قبل از رنگ اجرا کنید.
useLayoutEffect(() => {
console.log(“Layout effect”);
}, []);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
15. Logic State را با Context و کپسوله کنید useContext
ایجاد حالت جهانی بدون حفاری پایه.
const ThemeContext = React.createContext();
function MyComponent() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme }}>Hello!div>;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
16. از تعاریف توابع درون خطی در JSX اجتناب کنید
تعریف توابع درون خطی باعث رندرهای مجدد می شود. در عوض، آنها را در خارج تعریف کنید.
const handleClick = () => console.log(“Clicked”);
<button onClick={handleClick}>Click Mebutton>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
17. برای دسترسی ایمن به اموال، از Chaining اختیاری در JSX استفاده کنید
مقادیر تهی یا تعریف نشده را به خوبی مدیریت کنید.
<p>{user?.name}p>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
18. استفاده کنید key برای جلوگیری از مشکلات رندر مجدد
همیشه هنگام رندر کردن لیست ها از کلیدهای منحصر به فرد استفاده کنید.
{items.map(item => (
<div key={item.id}>{item.name}div>
))}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
19. برای کنترل بهتر واردات، قطعات را با صادرات نامگذاری شده صادر کنید
صادرات نامگذاری شده واردات قطعات خاص را آسان تر می کند.
export const ComponentA = () => <div>Adiv>;
export const ComponentB = () => <div>Bdiv>;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
سپس در صورت نیاز وارد کنید:
import { ComponentA } from ‘./Components’;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
20. الگوهای اجزای قابل استفاده مجدد: اجزای مرتبه بالاتر (HOC)
اجزاء را با HOC بپیچید تا منطق اضافی را اضافه کنید.
function withLogging(WrappedComponent) {
return function Wrapped(props) {
console.log(‘Component Rendered’);
return <WrappedComponent {…props} />;
};
}
const MyComponentWithLogging = withLogging(MyComponent);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
تسلط بر این ترفندها به شما کمک می کند تا کد React مختصر، خوانا و کارآمدتر بنویسید! کد نویسی مبارک!
واکنش نشان دهید فوق العاده قدرتمند است، اما تسلط بر آن به معنای فراتر رفتن از اصول اولیه و یادگیری برخی از ترفندهای کمتر شناخته شده برای ساده سازی توسعه است. در اینجا خلاصه ای از شخصی من است favourite 20 React tricks
که می تواند بهره وری شما را افزایش دهد و به شما در نوشتن کدهای تمیزتر و موثرتر کمک کند. بیایید مستقیماً به مثالها بپردازیم!
1. ارزیابی مدار کوتاه برای رندر شرطی
پرهیز از پرحرفی if
عبارات برای رندر شرطی با ارزیابی اتصال کوتاه.
{isLoading && <Spinner />}
این رندر می کند
تنها زمانی که isLoading
درست است، تمیز نگه داشتن JSX خود.
2. نام کلاس های پویا با classnames
کتابخانه
این classnames
کتابخانه، اعمال مشروط کلاس ها را آسان می کند.
npm install classnames
import classNames from 'classnames';
const buttonClass = classNames({
'btn': true,
'btn-primary': isPrimary,
'btn-secondary': !isPrimary,
});
<button className={buttonClass}>Click Mebutton>
3. به خاطر سپردن محاسبات گران قیمت با useMemo
اگر یک محاسبات پرهزینه است، آن را به خاطر بسپارید تا React بی جهت دوباره محاسبه نکند.
const sortedData = useMemo(() => data.sort(), [data]);
این دوباره محاسبه می کند sortedData
تنها زمانی که data
تغییر می کند.
4. حذف ورودی ها با useEffect
با حذف تغییرات ورودی، از رندرهای مجدد دائمی خودداری کنید.
const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), 500);
return () => clearTimeout(handler);
}, [value]);
<input value={value} onChange={(e) => setValue(e.target.value)} />
5. قلاب های سفارشی برای منطق قابل استفاده مجدد
منطق را در یک قلاب سفارشی کپسوله کنید تا از آن در بین اجزاء استفاده مجدد کنید.
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}
const Component = () => {
const data = useFetch('/api/data');
return <div>{data ? JSON.stringify(data) : 'Loading...'}div>;
};
6. Lazy Loading Components با React.lazy
با تقسیم اجزای خود زمان بارگذاری را بهینه کنید.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...div>}>
<LazyComponent />
React.Suspense>
);
}
7. دسترسی به Props یا State با useRef
برای دسترسی به مقادیر حالت قبلی، استفاده کنید useRef
.
const [count, setCount] = useState(0);
const prevCount = useRef(count);
useEffect(() => {
prevCount.current = count;
}, [count]);
console.log(`Previous: ${prevCount.current}, Current: ${count}`);
8. با ارسال توابع به رندر مجدد خودداری کنید useCallback
اگر تابعی نیازی به تغییر ندارد، آن را با حافظه ذخیره کنید useCallback
.
const increment = useCallback(() => setCount(count + 1), [count]);
9. تجهیزات تخریبی برای کد تمیزتر
پایه ها را درست در پارامترهای تابع تخریب کنید.
const User = ({ name, age }) => (
<div>{name} is {age} years olddiv>
);
10. React.Fragment
برای گروه بندی عناصر بدون Div های اضافی
عناصر را بدون اضافه کردن یک گره DOM اضافی بپیچید.
<>
<p>Paragraph 1p>
<p>Paragraph 2p>
>
11. مرزهای خطا برای یافتن خطاهای جاوا اسکریپت
برای جلوگیری از خراب شدن کل برنامه، خطاها را در مؤلفههای فرزند تشخیص دهید.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) return <h1>Something went wrong.h1>;
return this.props.children;
}
}
12. با استفاده از PropTypes
برای اعتبار سنجی Prop
با تعریف انواع پایه، اشکالات را زودتر تشخیص دهید.
import PropTypes from 'prop-types';
function MyComponent({ name }) {
return <div>{name}div>;
}
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
};
13. کاهنده های ایالتی با useReducer
برای منطق پیچیده حالت، useReducer
می تواند کارآمدتر باشد.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);
14. useLayoutEffect
برای دستکاری های DOM
افکت ها را بعد از به روز رسانی DOM اما قبل از رنگ اجرا کنید.
useLayoutEffect(() => {
console.log("Layout effect");
}, []);
15. Logic State را با Context و کپسوله کنید useContext
ایجاد حالت جهانی بدون حفاری پایه.
const ThemeContext = React.createContext();
function MyComponent() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme }}>Hello!div>;
}
16. از تعاریف توابع درون خطی در JSX اجتناب کنید
تعریف توابع درون خطی باعث رندرهای مجدد می شود. در عوض، آنها را در خارج تعریف کنید.
const handleClick = () => console.log("Clicked");
<button onClick={handleClick}>Click Mebutton>
17. برای دسترسی ایمن به اموال، از Chaining اختیاری در JSX استفاده کنید
مقادیر تهی یا تعریف نشده را به خوبی مدیریت کنید.
<p>{user?.name}p>
18. استفاده کنید key
برای جلوگیری از مشکلات رندر مجدد
همیشه هنگام رندر کردن لیست ها از کلیدهای منحصر به فرد استفاده کنید.
{items.map(item => (
<div key={item.id}>{item.name}div>
))}
19. برای کنترل بهتر واردات، قطعات را با صادرات نامگذاری شده صادر کنید
صادرات نامگذاری شده واردات قطعات خاص را آسان تر می کند.
export const ComponentA = () => <div>Adiv>;
export const ComponentB = () => <div>Bdiv>;
سپس در صورت نیاز وارد کنید:
import { ComponentA } from './Components';
20. الگوهای اجزای قابل استفاده مجدد: اجزای مرتبه بالاتر (HOC)
اجزاء را با HOC بپیچید تا منطق اضافی را اضافه کنید.
function withLogging(WrappedComponent) {
return function Wrapped(props) {
console.log('Component Rendered');
return <WrappedComponent {...props} />;
};
}
const MyComponentWithLogging = withLogging(MyComponent);
تسلط بر این ترفندها به شما کمک می کند تا کد React مختصر، خوانا و کارآمدتر بنویسید! کد نویسی مبارک!