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

دو مفهوم کلیدی که توسعه دهندگان باید بدانند اجزای کنترل شده و کنترل نشده هستند. این مفاهیم نحوه مدیریت داده های فرم را در یک جزء React تعریف می کنند.

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

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

فهرست مطالب

اجزای کنترل شده چیست ؟

اجزای کنترل شده چگونه کار می کنند

مزایای استفاده از اجزای کنترل شده

نمونه هایی از اجزای کنترل شده

اجزای کنترل نشده چیست ؟

چگونه اجزای کنترل نشده کار می کنند

زمان استفاده از اجزای کنترل نشده

محدودیت های اجزای کنترل نشده

نمونه هایی از اجزای کنترل نشده

عواملی که باید هنگام انتخاب بین اجزای کنترل شده و کنترل نشده در نظر گرفت

نتیجه

اجزای کنترل شده چیست؟

کامپوننت های کنترل شده عناصر فرمی هستند (مانند input ، textarea یا select ) که توسط React State مدیریت می شوند. این بدان معنی است که مقدار عنصر فرم از طریق React State تنظیم و به روز می شود و React را به "منبع منفرد حقیقت" برای داده های فرم تبدیل می کند.

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

در اینجا یک مثال از یک جزء کنترل شده است:

 import React, { useState } from 'react'; function ControlledComponent() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); alert('A name was submitted: ' + value); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={value} onChange={handleChange} /> </label> <button type="submit">Submit</button> </form> ); } export default ControlledComponent;

در این مثال:

وضعیت value ، مقدار فعلی فیلد ورودی را نگه می‌دارد.

هر زمان که کاربر در فیلد ورودی تایپ کند، تابع handleChange وضعیت را به روز می کند.

تابع handleSubmit ارسال فرم را با استفاده از مقدار فعلی مدیریت می کند.

اجزای کنترل شده چگونه کار می کنند

کامپوننت های کنترل شده در React اطمینان حاصل می کنند که داده های فرم توسط حالت React مدیریت می شود و روشی سازگار و قابل پیش بینی برای مدیریت ورودی کاربر ارائه می دهد.

در اینجا نحوه عملکرد این مؤلفه‌ها، از جمله مدیریت حالت در مؤلفه والد، ارسال مقادیر به‌عنوان لوازم جانبی به مؤلفه‌های فرزند، مدیریت ورودی کاربر با کنترل‌کننده‌های رویداد، و به‌روزرسانی وضعیت در مؤلفه والد، توضیح داده شده است.

مدیریت دولتی در مولفه مادر

مدیریت حالت اغلب در مؤلفه والد انجام می شود، به ویژه زمانی که چندین مؤلفه فرزند نیاز به تعامل یا اشتراک وضعیت دارند. مولفه والد حالت را حفظ می کند و آن را از طریق props به اجزای فرزند منتقل می کند.

 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [inputValue, setInputValue] = useState(''); return ( <div> <h1>Controlled Component Example</h1> <ChildComponent value={inputValue} setValue={setInputValue} /> </div> ); } export default ParentComponent;

انتقال ارزش ها به عنوان لوازم جانبی به یک جزء کودک

مؤلفه والد مقدار state و یک تابع به روز رسانی حالت را به عنوان props به مؤلفه فرزند منتقل می کند. این به مولفه فرزند اجازه می دهد تا وضعیت فعلی را نمایش دهد و در صورت نیاز آن را به روز کند.

 import React from 'react'; function ChildComponent({ value, setValue }) { const handleChange = (event) => { setValue(event.target.value); }; return ( <form> <label> Name: <input type="text" value={value} onChange={handleChange} /> </label> </form> ); } export default ChildComponent;

مدیریت ورودی کاربر با رویداد Handlers

کنترل کننده رویداد برای مدیریت ورودی کاربر استفاده می شود. هنگامی که کاربر در فیلد ورودی تایپ می کند، رویداد onChange تابع handleChange را فعال می کند که وضعیت را در مؤلفه والد به روز می کند.

 function ChildComponent({ value, setValue }) { const handleChange = (event) => { setValue(event.target.value); }; return ( <form> <label> Name: <input type="text" value={value} onChange={handleChange} /> </label> </form> ); }

به روز رسانی حالت در یک جزء والد

هنگامی که تابع به روز رسانی حالت ( setValue ) در مؤلفه فرزند فراخوانی می شود، وضعیت را در مؤلفه والد به روز می کند. این باعث می شود مولفه والد دوباره رندر شود، که به نوبه خود مولفه فرزند را با مقدار حالت جدید دوباره رندر می کند.

 function ParentComponent() { const [inputValue, setInputValue] = useState(''); return ( <div> <h1>Controlled Component Example</h1> <ChildComponent value={inputValue} setValue={setInputValue} /> </div> ); }

همه اش را بگذار کنار هم

در اینجا مثال کاملی است که نشان می دهد چگونه اجزای کنترل شده با مدیریت حالت در مولفه والد کار می کنند:

 // ParentComponent.jsx import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [inputValue, setInputValue] = useState(''); return ( <div> <h1>Controlled Component Example</h1> <ChildComponent value={inputValue} setValue={setInputValue} /> </div> ); } export default ParentComponent; // ChildComponent.jsx import React from 'react'; function ChildComponent({ value, setValue }) { const handleChange = (event) => { setValue(event.target.value); }; return ( <form> <label> Name: <input type="text" value={value} onChange={handleChange} /> </label> </form> ); } export default ChildComponent;

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

این روش رفتار فرم سازگار و قابل پیش بینی را تضمین می کند و اجرای اعتبارسنجی، رندر شرطی و سایر ویژگی های تعاملی را آسان تر می کند.

مزایای استفاده از اجزای کنترل شده

کامپوننت‌های کنترل‌شده چندین مزیت را ارائه می‌کنند که می‌تواند تجربه توسعه و عملکرد برنامه‌های React را به طور قابل توجهی بهبود بخشد. در اینجا مزایای کلیدی وجود دارد:

مدیریت دولتی قابل پیش بینی

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

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

مثال:

 import React, { useState } from 'react'; function PredictableForm() { const [name, setName] = useState(''); const handleChange = (event) => { setName(event.target.value); }; return ( <div> <input type="text" value={name} onChange={handleChange} /> <p>Current value: {name}</p> </div> ); }

در این مثال، فیلد ورودی و متن نمایش داده شده همیشه همگام هستند و یک رفتار قابل پیش بینی ارائه می دهند.

اعتبار سنجی فرم آسان تر

اجزای کنترل شده اجرای اعتبار سنجی فرم را ساده می کند. از آنجایی که داده‌های فرم در حالت مؤلفه ذخیره می‌شوند، می‌توانید به راحتی آن را قبل از به‌روزرسانی وضعیت یا هنگام ارسال فرم تأیید کنید. این رویکرد به شما این امکان را می‌دهد که در زمان تعامل کاربران با فرم، بازخورد بلادرنگ ارائه دهید.

مثال:

 import React, { useState } from 'react'; function ValidatedForm() { const [email, setEmail] = useState(''); const [error, setError] = useState(''); const handleChange = (event) => { const value = event.target.value; setEmail(value); if (!value.includes('@')) { setError('Invalid email address'); } else { setError(''); } }; return ( <div> <input type="email" value={email} onChange={handleChange} /> {error && <p style={{ color: 'red' }}>{error}</p>} </div> ); }

در اینجا، منطق اعتبارسنجی روی هر تغییری اجرا می‌شود و در صورت نامعتبر بودن ورودی، بازخورد فوری به کاربر ارائه می‌کند.

ادغام با کتابخانه های UI پیچیده

اجزای کنترل‌شده به‌طور یکپارچه با کتابخانه‌ها و چارچوب‌های UI پیچیده، مانند Redux برای مدیریت حالت یا Formik برای مدیریت فرم‌ها، یکپارچه می‌شوند.

با مدیریت داده‌های فرم در حالت جزء، می‌توانید فرم‌های خود را به راحتی به این کتابخانه‌ها متصل کنید و از آپشن های پیشرفته آن‌ها مانند مدیریت حالت جهانی، واکشی داده‌های ناهمزمان و غیره بهره‌مند شوید.

مثال با فرمیک:

 import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const SignupForm = () => ( <Formik initialValues={{ email: '' }} validationSchema={Yup.object({ email: Yup.string().email('Invalid email address').required('Required'), })} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ isSubmitting }) => ( <Form> <label htmlFor="email">Email</label> <Field type="email" name="email" /> <ErrorMessage name="email" component="div" /> <button type="submit" disabled={isSubmitting}> Submit </button> </Form> )} </Formik> ); export default SignupForm;

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

اجزای کنترل شده، مدیریت حالت قابل پیش بینی، اعتبارسنجی فرم آسان تر و ادغام یکپارچه با کتابخانه های UI پیچیده را ارائه می دهند.

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

نمونه هایی از اجزای کنترل شده

کامپوننت‌های کنترل‌شده در React برای مدیریت ورودی‌های فرم به روشی قابل پیش‌بینی و مدیریت، اساسی هستند.

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

فیلدهای ورودی (متن، ایمیل، رمز عبور)

ورودی متن

 import React, { useState } from 'react'; function TextInput() { const [text, setText] = useState(''); const handleChange = (event) => { setText(event.target.value); }; return ( <div> <label> Text: <input type="text" value={text} onChange={handleChange} /> </label> <p>Entered Text: {text}</p> </div> ); } export default TextInput;

ورودی ایمیل

 import React, { useState } from 'react'; function EmailInput() { const [email, setEmail] = useState(''); const handleChange = (event) => { setEmail(event.target.value); }; return ( <div> <label> Email: <input type="email" value={email} onChange={handleChange} /> </label> <p>Entered Email: {email}</p> </div> ); } export default EmailInput;

ورودی رمز عبور

 import React, { useState } from 'react'; function PasswordInput() { const [password, setPassword] = useState(''); const handleChange = (event) => { setPassword(event.target.value); }; return ( <div> <label> Password: <input type="password" value={password} onChange={handleChange} /> </label> <p>Entered Password: {password}</p> </div> ); } export default PasswordInput;

منوها را انتخاب کنید

 import React, { useState } from 'react'; function SelectMenu() { const [option, setOption] = useState('option1'); const handleChange = (event) => { setOption(event.target.value); }; return ( <div> <label> Choose an option: <select value={option} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> </label> <p>Selected Option: {option}</p> </div> ); } export default SelectMenu;

چک باکس ها

 import React, { useState } from 'react'; function Checkbox() { const [isChecked, setIsChecked] = useState(false); const handleChange = (event) => { setIsChecked(event.target.checked); }; return ( <div> <label> Accept Terms: <input type="checkbox" checked={isChecked} onChange={handleChange} /> </label> <p>Checked: {isChecked ? 'Yes' : 'No'}</p> </div> ); } export default Checkbox;

دکمه های رادیویی

 import React, { useState } from 'react'; function RadioButton() { const [selectedOption, setSelectedOption] = useState('option1'); const handleChange = (event) => { setSelectedOption(event.target.value); }; return ( <div> <label> <input type="radio" value="option1" checked={selectedOption === 'option1'} onChange={handleChange} /> Option 1 </label> <label> <input type="radio" value="option2" checked={selectedOption === 'option2'} onChange={handleChange} /> Option 2 </label> <label> <input type="radio" value="option3" checked={selectedOption === 'option3'} onChange={handleChange} /> Option 3 </label> <p>Selected Option: {selectedOption}</p> </div> ); } export default RadioButton;

کامپوننت های کنترل شده روشی واضح و ثابت برای مدیریت ورودی های فرم در React ارائه می دهند. با استفاده از React State برای مدیریت مقادیر فیلدهای ورودی، انتخاب منوها، چک باکس‌ها و دکمه‌های رادیویی، اطمینان حاصل می‌کنید که رابط کاربری با حالت همگام باقی می‌ماند.

این رویکرد اعتبار سنجی را ساده می کند، مدیریت داده ها را قابل پیش بینی می کند و ادغام با کتابخانه های UI پیچیده را تسهیل می کند.

اجزای کنترل نشده چیست؟

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

مثال:

 import React, { Component } from 'react'; class UncontrolledComponent extends Component { constructor(props) { super(props); // Create a ref to hold the input DOM element this.inputRef = React.createRef(); } handleSubmit = () => { // Access the input value using the ref console.log(this.inputRef.current.value); } render() { return ( <div> {/* Use ref attribute to attach the ref to the input element */} <input type="text" ref={this.inputRef} /> <button onClick={this.handleSubmit}>Submit</button> </div> ); } }

Ref Usage: در کامپوننت های کنترل نشده، از ویژگی ref برای ایجاد یک مرجع ( this.inputRef ) به گره DOM فیلد ورودی استفاده می کنیم.

Handling Input: وقتی کاربر داده‌ها را وارد می‌کند و روی «Submit» کلیک می‌کند، this.inputRef.current.value به ما امکان می‌دهد مستقیماً به مقدار فعلی فیلد ورودی بدون درگیر کردن React State دسترسی داشته باشیم.

مزایا: اجزای کنترل نشده می توانند برای مدیریت فرم های اولیه ساده تر و سریع تر باشند. آنها اغلب زمانی استفاده می شوند که داده های فرم در حالت React برای پردازش یا اعتبارسنجی مورد نیاز نباشد.

امتیاز کلیدی:

وضعیت داخلی: کامپوننت های کنترل نشده وضعیت خود را به صورت داخلی با کمک refs مدیریت می کنند، نه با به روز رسانی های React State.

دسترسی مستقیم DOM: دسترسی به داده‌های فرم مستقیماً از طریق ref‌های DOM ( this.inputRef.current.value ) انجام می‌شود.

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

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

چگونه اجزای کنترل نشده کار می کنند

کامپوننت های کنترل نشده با استفاده از ref های DOM (قلاب useRef در کامپوننت های تابعی یا React.createRef() در اجزای کلاس) وضعیت خود را به صورت داخلی مدیریت می کنند تا مستقیماً به مقادیر عناصر فرم دسترسی پیدا کنند.

برخلاف کامپوننت‌های کنترل‌شده، که در آن داده‌های فرم از طریق React State مدیریت و از طریق setState به‌روزرسانی می‌شوند، کامپوننت‌های کنترل‌نشده مدیریت وضعیت React را برای مدیریت ورودی‌های فرم دور می‌زنند.

دسترسی مستقیم DOM با useRef Hook

در کامپوننت‌های کاربردی، قلاب useRef به ما اجازه می‌دهد یک مرجع قابل تغییر ایجاد کنیم که در رندرها باقی بماند. ما می توانیم از این ref برای دسترسی مستقیم به گره های DOM مانند فیلدهای ورودی استفاده کنیم.

مثال:

 import React, { useRef } from 'react'; function UncontrolledComponent() { const inputRef = useRef(null); // Create a ref to hold the input DOM element const handleSubmit = () => { // Access the input value using the ref console.log(inputRef.current.value); }; return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleSubmit}>Submit</button> </div> ); } export default UncontrolledComponent;

دسترسی به مقدار یک عنصر در ارسال

در مثال بالا:

ایجاد Ref: const inputRef = useRef(null); یک مرجع به نام inputRef را برای نگه داشتن ارجاع به عنصر DOM ورودی مقداردهی می کند.

Handling Submit: هنگامی که دکمه "Submit" کلیک می شود ( onClick={handleSubmit} )، تابع handleSubmit مقدار فعلی فیلد ورودی را با استفاده از inputRef.current.value بازیابی می کند.

امتیاز کلیدی:

دسترسی DOM: قلاب useRef امکان دسترسی مستقیم به عناصر DOM را فراهم می‌کند و ما را قادر می‌سازد تا بدون به‌روزرسانی وضعیت React با آنها تعامل داشته باشیم.

ارسال فرم: هنگام ارسال فرم ( onClick={handleSubmit} )، تابع از طریق inputRef.current.value به مقدار فعلی فیلد ورودی دسترسی پیدا می کند.

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

استفاده از مؤلفه‌های کنترل‌نشده با useRef مخصوصاً برای رسیدگی به فرم‌هایی که اعتبارسنجی بلادرنگ یا تعاملات پیچیده لازم نیست، به‌جای آن روی سادگی و عملکرد تمرکز می‌کند، مفید است.

زمان استفاده از اجزای کنترل نشده

اجزای کنترل نشده در سناریوهای خاص که در آن سادگی و دستکاری مستقیم DOM نسبت به مدیریت حالت با React سودمند است، ایده آل هستند.

در اینجا شرایط کلیدی وجود دارد که هنگام استفاده از اجزای کنترل نشده مفید است:

1. فرم های ساده با تعاملات محدود

اجزای کنترل نشده در سناریوهایی که:

The Forms Arent' That Complex: فرم ساده با حداقل فیلدهای ورودی است و نیازی به اعتبارسنجی پیچیده یا به روز رسانی پویا بر اساس ورودی های دیگر فرم ندارد.

عملکرد مهم است: دسترسی مستقیم به مقادیر فرم از طریق ref‌های DOM ( useRef یا React.createRef() ) می‌تواند عملکرد بیشتری نسبت به به‌روزرسانی وضعیت React برای هر تغییر ورودی داشته باشد، به خصوص در فرم‌های بزرگ.

شما Simplicity را می‌خواهید: وقتی پیاده‌سازی ساده‌تر را بدون مدیریت به‌روزرسانی‌های حالت و رندرهای مجدد برای ورودی‌های فرم ترجیح می‌دهید.

2. مدیریت تمرکز (انتخاب متن)

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

اجزای کنترل نشده به شما امکان می دهد:

مستقیماً DOM را دستکاری کنید: از روش‌های DOM مانند select() در عنصر ورودی مستقیماً از طریق refs برای مدیریت فوکوس یا انتخاب متن استفاده کنید.

مدیریت فوکوس و انتخاب متن به‌طور مستقیم با refs : این می‌تواند در مقایسه با راه‌اندازی به‌روزرسانی‌های حالت و مدیریت حالت فوکوس در مؤلفه‌های React کارآمدتر و ساده‌تر باشد.

مثال مورد استفاده:

 import React, { useRef } from 'react'; function UncontrolledComponent() { const inputRef = useRef(null); // Create a ref to hold the input DOM element const handleFocus = () => { inputRef.current.select(); // Selects all text in the input field }; return ( <div> <input type="text" ref={inputRef} defaultValue="Initial Value" /> <button onClick={handleFocus}>Select Text</button> </div> ); } export default UncontrolledComponent;

در این مثال، با کلیک بر روی دکمه "Select Text" inputRef.current.select() را فراخوانی می کند تا تمام متن های موجود در فیلد ورودی را مستقیماً انتخاب کنید، بدون اینکه به روز رسانی های React مربوط شود. این یک استفاده ساده و در عین حال موثر از اجزای کنترل نشده برای مدیریت تمرکز و انتخاب متن است.

محدودیت های اجزای کنترل نشده

استفاده از کامپوننت‌های کنترل نشده در React می‌تواند مزایای سادگی و عملکرد را در سناریوهای خاص ارائه دهد، اما آنها همچنین با محدودیت‌هایی همراه هستند که باید در نظر گرفته شوند:

مشکل در اعتبار سنجی فرم:

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

منطق اعتبارسنجی اغلب شامل دسترسی و تحلیل مقدار هر ورودی مستقیماً از طریق refs ( ref.current.value ) است. این رویکرد می تواند منجر به کدهای اعتبار سنجی دستی و مستعد خطا، به خصوص در فرم هایی با الزامات اعتبار سنجی پیچیده شود.

مدیریت دولتی کمتر قابل پیش بینی:

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

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

ادغام اکوسیستم React محدود:

اجزای کنترل نشده ممکن است به طور کامل از آپشن های اکوسیستم React مانند پایداری حالت، اشکال‌زدایی در سفر در زمان (با Redux)، یا یکپارچه‌سازی یکپارچه با کتابخانه‌های شخص ثالث طراحی‌شده برای مؤلفه‌های کنترل‌شده استفاده نکنند.

اجزای متکی به React State از این ویژگی ها بهره می برند و بهره وری توسعه دهندگان و قابلیت نگهداری برنامه را افزایش می دهند.

نمونه هایی از اجزای کنترل نشده

اجزای کنترل نشده در React به ویژه برای مدیریت فیلدهای ورودی و عناصر textarea که دستکاری مستقیم DOM کافی است و مدیریت وضعیت React ضروری نیست، مفید هستند.

در اینجا نمونه هایی از نحوه اعمال اجزای کنترل نشده آورده شده است:

1. فیلدهای ورودی (داده‌های فقط خواندنی یا از پیش پر شده)

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

مثال:

 import React, { useRef } from 'react'; function UncontrolledInput() { const initialValue = 'Hello, World!'; const inputRef = useRef(null); // Create a ref to hold the input DOM element const handleFocus = () => { inputRef.current.select(); // Selects all text in the input field on focus }; return ( <div> {/* Using defaultValue for pre-filled data */} <input type="text" ref={inputRef} defaultValue={initialValue} readOnly /> <button onClick={handleFocus}>Select Text</button> </div> ); } export default UncontrolledInput;

در این مثال:

ویژگی defaultValue مقدار اولیه فیلد ورودی را تنظیم می کند.

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

قلاب useRef با استفاده از inputRef.current تمرکز و انتخاب متن را در فیلد ورودی مدیریت می کند.

2. عناصر Textarea

مؤلفه‌های کنترل‌نشده نیز برای عناصر ناحیه متنی قابل استفاده هستند، به‌ویژه زمانی که با ورودی متن چند خطی سروکار داریم، جایی که به‌روزرسانی‌های حالت فوری ضروری نیست.

مثال:

 import React, { useRef } from 'react'; function UncontrolledTextarea() { const initialText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; const textareaRef = useRef(null); // Create a ref to hold the textarea DOM element const handleClear = () => { textareaRef.current.value = ''; // Clear textarea content directly }; return ( <div> {/* Using defaultValue for pre-filled content */} <textarea ref={textareaRef} defaultValue={initialText} rows={4} cols={50} /> <button onClick={handleClear}>Clear Text</button> </div> ); } export default UncontrolledTextarea;

در این مثال:

ویژگی defaultValue محتوای اولیه ناحیه متنی را تنظیم می کند.

قلاب useRef با استفاده از textareaRef.current دستکاری مستقیم محتوای textarea را مدیریت می کند.

صفات rows و cols ابعاد textarea را مشخص می کنند.

امتیاز کلیدی:

دسترسی مستقیم DOM: اجزای کنترل نشده از useRef برای دستکاری مستقیم عناصر DOM برای مدیریت فیلدهای ورودی و محتوای ناحیه متنی استفاده می کنند.

عملکرد: مناسب برای سناریوهایی که در آن به‌روزرسانی‌های بلادرنگ یا مدیریت وضعیت پیچیده مورد نیاز نیست، با اجتناب از به‌روزرسانی‌های غیرضروری وضعیت، عملکرد را بهبود می‌بخشد.

Simplicity: یک رویکرد ساده برای مدیریت عناصر فرم با مقادیر پیش‌فرض یا فقط خواندنی، با حفظ سادگی در منطق مؤلفه ارائه می‌کند.

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

عواملی که باید هنگام انتخاب بین اجزای کنترل شده و کنترل نشده در نظر گرفت

هنگام تصمیم‌گیری بین مؤلفه‌های کنترل‌شده و کنترل‌نشده در React، باید چندین فاکتور را در نظر گرفت تا مشخص شود کدام رویکرد به بهترین وجه با نیازهای برنامه شما مطابقت دارد. در اینجا ملاحظات کلیدی برای هر عامل وجود دارد:

1. پیچیدگی فرم

اجزای کنترل شده:

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

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

اجزای کنترل نشده:

مزایا: پیاده سازی را برای فرم های پایه با حداقل تعامل یا جاهایی که دستکاری مستقیم DOM کافی است، ساده کنید.

استفاده: ایده آل برای فرم های ساده بدون اعتبار سنجی پیچیده یا زمانی که مدیریت حالت فرم در React برای مورد استفاده شما ضروری نیست.

2. نیاز به اعتبار سنجی فرم

اجزای کنترل شده:

مزایا: ادغام آسان‌تر با کتابخانه‌های اعتبارسنجی فرم (مثلاً Formik، Yup) زیرا حالت فرم در حالت React مدیریت می‌شود.

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

اجزای کنترل نشده:

چالش ها: رسیدگی به اعتبار فرم می تواند بیشتر دستی و کمتر یکپارچه باشد، زیرا داده های فرم مستقیماً از طریق دستکاری DOM مدیریت می شوند.

استفاده: مؤلفه‌های کنترل‌نشده را برای فرم‌های ساده در نظر بگیرید که در آن‌ها الزامات اعتبارسنجی حداقل است یا می‌توان منطق اعتبارسنجی سفارشی را بدون اتکا به به‌روزرسانی‌های React مدیریت کرد.

3. ادغام با کتابخانه های خارجی

اجزای کنترل شده:

مزایا: به طور یکپارچه با راه حل های مدیریت حالت خارجی مانند Redux یا React's Context API برای مدیریت وضعیت برنامه جهانی یکپارچه می شود.

استفاده: هنگامی که برنامه شما نیاز به ادغام با کتابخانه های شخص ثالث دارد یا هنگام استفاده از ویژگی های پیشرفته اکوسیستم React (مثلاً اشکال زدایی در سفر در زمان با Redux) اجزای کنترل شده را ترجیح دهید.

اجزای کنترل نشده:

ملاحظات: ممکن است برای ادغام با کتابخانه های خارجی که رفتار جزء کنترل شده را فرض می کنند، به تلاش بیشتری نیاز داشته باشد.

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

ملاحظات اضافی:

کارایی:

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

اولویت توسعه دهنده:

هنگام تصمیم گیری بین اجزای کنترل شده و کنترل نشده، آشنایی و ترجیحات تیم را با الگوهای مدیریت React State در نظر بگیرید.

خلاصه:

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

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

نتیجه

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

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

با ارزیابی دقیق این عوامل، می توانید موثرترین استراتژی مدیریت فرم را در React پیاده سازی کنید که عملکرد، عملکرد و سهولت نگهداری را متعادل می کند.

در لینکدین با من ارتباط برقرار کنید.

خبرکاو