از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش به روز رسانی اجباری یک مؤلفه React در این مقاله به شما نشان خواهیم داد که چگونه یک مؤلفه را در React.js به اجبار به روز کنید. به طور خاص، ما یک معرفی کوتاه برای React Rerender ارائه خواهیم کرد، روش به‌روزرسانی را در مؤلفه‌های مبتنی بر کلاس و روش به‌روزرسانی اجباری در مؤلفه‌های عملکردی را نشان خواهیم داد. React Re-Renders خود React به طور خودکار رندر مجدد را کنترل می کند…
سرفصلهای مطلب
معرفی
در این مقاله به شما نشان خواهیم داد که چگونه یک کامپوننت را در React.js اجباری به روز کنید. به طور خاص، ما یک معرفی کوتاه برای React Rerender ارائه خواهیم کرد، روش به‌روزرسانی را در مؤلفه‌های مبتنی بر کلاس و روش به‌روزرسانی اجباری در مؤلفه‌های عملکردی را نشان خواهیم داد.
React Re-Renders
خود React در بیشتر موارد به طور خودکار مولفه‌های رندر مجدد را برای شما مدیریت می‌کند. علت این امر را می توان بر اساس روی هنگامی که props یا state به روز شده است. بنابراین هنگامی که یک حالت یا ویژگی تغییر می کند، کامپوننت دوباره رندر می شود. اما اگر مولفه شما وابسته باشد چه می شود روی چیز دیگری و نه لزوما روی ایالت یا ملک شما؟ در این صورت ممکن است لازم باشد کامپوننت را به اجبار به روز کنید زیرا React ممکن است این تغییر را شناسایی نکرده باشد.
بیایید نگاهی به روش استفاده از این به روز رسانی اجباری بیندازیم روی یک جزء React برای نشان دادن این موضوع، قصد داریم یک برنامه کاربردی ساده برای اهداف نمایشی ایجاد کنیم.
توجه داشته باشید: ما چند مفهوم React را پوشش خواهیم داد، بنابراین داشتن دانش اولیه از React توصیه می شود.
به روز رسانی اجباری روی اجزای کلاس محور
کامپوننت کلاس دارای یک متد داخلی برای رندر مجدد یک جزء است که نامیده می شود forceUpdate()، که برای وادار کردن یک جزء به رندر مجدد استفاده می شود. می توانید در مورد آن بیشتر بخوانید forceUpdate() روش روی واکنش نشان دهید وب سایت رسمی.
handleForceupdateMethod() {
// Force a render without state change...
this.forceUpdate();
}
توجه داشته باشید: اتکاء به صلاح نیست روی به روز رسانی کامپوننت ها با استفاده از forceUpdate() روش. وقتی متوجه شدید که به این روش نیاز دارید، ابتدا باید سعی کنید کد خود را تجزیه و تحلیل کنید و بفهمید که آیا دلیل دیگری وجود دارد که React کامپوننت را به روز نمی کند. ممکن است متوجه شوید که یک باگ باعث ایجاد این مشکل شده است یا می توانید کد خود را به گونه ای بازسازی کنید که به React اجازه دهد تا به درستی کامپوننت را دوباره رندر کند. روی خودش
در اینجا مثالی از روش به روزرسانی اجباری آورده شده است روی یک جزء مبتنی بر کلاس:
import React from 'react'
class App extends React.Component {
constructor() {
super();
this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
};
handleForceupdateMethod() {
this.forceUpdate();
};
render() {
return (
<div>
<h1>Hello rasanegar</h1>
<h3>Random Number: { Math.random() }</h3>
<button onClick={this.handleForceupdateMethod}>
Force re-render
</button>
</div>
);
}
}
export default App
خیلی چیزهای بیشتری در راه است روی در این روش از آنچه ممکن است به نظر برسد. مثلا تماس گرفتن forceUpdate() روش های چرخه عمر را برای اجزای کودک نیز راه اندازی می کند. و همانطور که با React می دانیم، DOM را فقط در صورتی به روز می کند که نشانه گذاری واقعاً تغییر کرده باشد.
می توانید به کد زنده اینجا.
به روز رسانی اجباری روی اجزای عملکردی
کامپوننت‌های تابعی هیچ روش داخلی برای رندر کردن مجدد مؤلفه‌ها مانند همتایان مبتنی بر کلاس آنها ندارند. این به این معنی است که ما آن را نداریم forceUpdate() روش در دسترس ما با این حال، به یاد داشته باشید که در React کامپوننت‌ها معمولاً به دلیل تغییرات حالت یا پروپ، دوباره رندر می‌شوند. با استفاده از این، می‌توانیم به راه‌هایی برای به‌روزرسانی اجباری دست پیدا کنیم.
از نسخه 16.8+، React مفهومی به نام Hooks دارد که می‌تواند در کامپوننت‌های کاربردی برای به‌روزرسانی وضعیت، انجام عوارض جانبی و غیره استفاده شود.
در اینجا چند نمونه از روش اجباری به روز رسانی در یک مؤلفه عملکردی آورده شده است:
با استفاده از useReducer hook
const (ignored, forceUpdate) = useReducer(x => x + 1, 0);
function handleClick() {
forceUpdate();
}
یک کاهنده در React معمولاً زمانی استفاده می‌شود که منطق و اقدامات پیچیده حالت دارید. در اینجا ما از آن به سادگی برای راه اندازی به روز رسانی با به روز رسانی یک متغیر حالت ساختگی استفاده می کنیم. x. وضعیت باید در واقع تغییر کند تا به‌روزرسانی آغاز شود، به همین دلیل است که افزایش می‌یابد روی هر تماس
استفاده کنید useState hook
import React, { useState } from "react";
// Create your forceUpdate hook
function useForceUpdate() {
let (value, setState) = useState(true);
return () => setState(!value);
}
export default function App() {
// Call your hook here
const handleForceupdateMethod = useForceUpdate();
return (
<div className="App">
<h1>Hello rasanegar </h1>
<h3>Random Number: { Math.random() }</h3>
{/*
Clicking روی the button will force to re-render like force update does
*/}
<button onClick={handleForceupdateMethod}>Force re-render</button>
</div>
);
}
ایده پشت این نوع به روز رسانی نیرو بسیار شبیه به useReducer به این صورت که ما دائماً در حال به روز رسانی وضعیت هستیم تا تغییر را مجبور کنیم. به جای افزایش شمارنده، مانند روش قبلی، در اینجا به سادگی یک مقدار بولی را تغییر می دهیم تا نفی شود. روی هر تماس
با استفاده از useState و useCallback قلاب ها
import React, { useState , useCallback} from "react";
export default function App() {
const (, updateState) = useState();
const handleForceupdateMethod = useCallback(() => updateState({}), ());
// Check your console
console.log("Rendering...");
return (
<div className="App">
<h1>Hello rasanegar</h1>
<h3>Random Number: { Math.random() }</h3>
{/*
Clicking روی the button will force to re-render like force update does
*/}
<button onClick={handleForceupdateMethod}>Force re-render</button>
</div>
);
}
باز هم، این استراتژی با تغییر وضعیت کار می کند. در این مورد، اگرچه ما از نظر فنی تغییری در آن نداریم ارزش از دولت، ما هستند ارسال یک شی جدید، که توسط React جدید در نظر گرفته می شود زیرا بررسی های برابری “عمیق” را انجام نمی دهد. روی حالت.
همانطور که می بینید، چندین راه برای رسیدن به همان هدف در اینجا وجود دارد. به خاطر داشته باشید که اینها همه از نظر فنی ضد الگو هستند و در صورت امکان باید از آنها اجتناب شود. اما اگر نمی‌توانید مشکل اساسی را حل کنید و نیاز به به‌روزرسانی اجباری یک مؤلفه دارید، هر یک از روش‌هایی که در اینجا نشان داده‌ایم باید کار کند.
نتیجه
در این مقاله روش به روزرسانی را به صورت اجباری مشاهده کردیم روی اجزای واکنش ما همچنین دیدیم که چگونه می توان به این امر در هر دو مؤلفه عملکردی و مبتنی بر کلاس دست یافت. اگرچه لزوماً تمرین خوبی نیست، اما درک روش عملکرد آن در مواردی که نیاز به استفاده از آن در موارد خاص داریم مفید است.
منتشر شده در 1403-01-06 10:11:03
