مفهوم Refs در ری اکت

امید کیانی 1253 بازدید 1398/07/19
مفهوم Refs در ری اکت

در ری اکت Refs کوتاه شده کلمه ی references است و آن شبیه به key ها در ری اکت است.آن attribute ی است که امکان ذخیره یک مرجع خاص را برای گره های DOM یا عناصر react و نجوه ی تعامل با آن را فراهم می کند.هنگامی که می خواهیم مقدار یک کامپوننت فرزند را بدون استفاده از props تغییر دهیم از آن استفاده می کنیم.

چه موقع باید از Refs استفاده کنیم؟

Refs ها می توانند در موارد زیر استفاده شوند:

  • هنگامی که نیاز به اندازه گیری DOM داریم مانند: مدیریت تمرکز،انتخاب متن یا پخش رسانه.
  • در راه اندازی انیمیشن های ضروری استفاه می شود.
  • هنگامی که با کتابخانه های شخص ثالث DOM ادغام می شود.
  • همچنین آن در فراخوانی ها می تواند استفاده شود.

چه موقع باید از Refs استفاده نکنیم؟

  • از استفاده ی آن برای هر کاری که به صورت اعلامی انجام می شود،جلوگیری شود.برای مثال به جای استفاده از متدهای ()open و ()close روی یک کامپوننت،ما نیاز داریم تا یک prop ی تحت عنوان isOpen را ارسال کنیم.
  • ما باید از استفاده بیش از حد Refs ها پرهیز کنیم.

نحوه ی ساخت یک Refs

در ری اکت Refs ها می توانند با استفاده از ()React.createRef ساخته شوند.آن می تواند با استفاده از صفت ref به عناصر ری اکت اختصاص داده شود. آن معمولاً هنگامی که یک کامپوننت ایجاد می شود،به یک ویژگی خاص اختصاص می یابد و سپس می تواند در سراسر کامپوننت ارجاع داده شود.

class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
  }  
  render() {  
    return <div ref={this.callRef} />;  
  }  
}

 

نحوه ی دسترسی به Refs

در react هنگامی که یک ref به عنصر درون متد render ارسال می شود،مرجع یک node می تواند از طریق صفت فعلی ref در دسترس باشد.

const node = this.callRef.current; 

 

ویژگی های رایج Refs

مقدار ref بسته به نوع گره(node) متفاوت است:

  • هنگامی که یک صفت ref در عنصر html استفاده می شود،ref ایجاد شده توسط ()React.createRef،عنصر اصلی DOM را به عنوان ویژگی جاری یا فعلی آن دریافت می کند.
  • اگر صفت ref بر روی کامپوننت شخصی سازی شده استفاده شود، شیء ref نمونه نصب شده از این کامپوننت را به عنوان ویژگی فعلی آن دریافت می کند.
  • صفت ref نمی تواند بر روی function components تعریف شود زیرا آنها نمونه(instance) ندارند.

 

اضافه کردن Ref به عناصر DOM

در مثال زیر ما یک ref را برای ذخیره ی مرجع به گره یا عنصر DOM اضافه می کنیم.

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
    this.addingRefInput = this.addingRefInput.bind(this);  
  }  
   
  addingRefInput() {  
    this.callRef.current.focus();  
  }  
   
  render() {  
    return (  
      <div>  
        <h2>Adding Ref to DOM element</h2>  
        <input  
          type="text"  
          ref={this.callRef} />  
        <input  
          type="button"  
          value="Add text input"  
          onClick={this.addingRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;

خروجی:

 

اضافه کردن Ref به Class component

 در مثال زیر ما یک ref را برای ذخیره ی مرجع به class component اضافه می کنیم.

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
function CustomInput(props) {  
  let callRefInput = React.createRef();  
   
  function handleClick() {  
    callRefInput.current.focus();  
  }  
   
  return (  
    <div>  
      <h2>Adding Ref to Class Component</h2>  
      <input  
        type="text"  
        ref={callRefInput} />  
      <input  
        type="button"  
        value="Focus input"  
        onClick={handleClick}  
      />  
    </div>  
  );  
}  
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRefInput = React.createRef();  
  }  
   
  focusRefInput() {  
    this.callRefInput.current.focus();  
  }  
   
  render() {  
    return (  
      <CustomInput ref={this.callRefInput} />  
    );  
  }  
}  
export default App;

خروجی:

 

Callback refs

در react یک راه دیگر برای استفاده از refs ها وجود دارد که "callback refs" نامیده می شود و آن کنترل بیشتری هنگام set و unset کردن refs ها به ما می دهد.به جای ایجاد یک refs توسط متد ()createRef، ری اکت اجازه می دهد تا راهی برای انتقال یک callback function به ویژگی ref یک کامپوننت ایجاد کنید.

آن شبیه به کد زیر است:

<input type="text" ref={element => this.callRefInput = element} />  

callback function برای ذخیره ی مرجع به عنصر DOM در یک نمونه استفاده می شود و می تواند قابل دسترس در هر جایی باشد.

آن به صورت زیر در دسترس است:

this.callRefInput.value

مثال زیر کمک می کند تا کار کردن با callback refs ها را بهتر بفهمیم:

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
    constructor(props) {  
    super(props);  
  
    this.callRefInput = null;  
  
    this.setInputRef = element => {  
      this.callRefInput = element;  
    };  
  
    this.focusRefInput = () => {  
      //Focus the input using the raw DOM API  
      if (this.callRefInput) this.callRefInput.focus();  
    };  
  }  
  
  componentDidMount() {  
    //autofocus of the input on mount  
    this.focusRefInput();  
  }  
  
  render() {  
    return (  
      <div>  
    <h2>Callback Refs Example</h2>  
        <input  
          type="text"  
          ref={this.setInputRef}  
        />  
        <input  
          type="button"  
          value="Focus input text"  
          onClick={this.focusRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;

 در مثال بالا ری اکت callback ref را برای ذخیره ی مرجع در ورودی عنصر DOM هنگامی که کامپوننت mount شده است،فرا خوانی می کند.و هنگامی که کامپوننت unmount شده است،آن را با null فراخوانی می کند.

Refs ها همیشه بروز هستند قبل از اینکه componentDidMount یا componentDidUpdate اجرا شوند.callback refs ها در بین کامپوننت ها همان کاری است که می توانید با مراجعه به شیء ref انجام دهید که با ()React.createRef ایجاد شده است.

خروجی:

 

 ارسال Ref از یک کامپوننت به کامپوننت دیگر

Ref forwarding روشی است که برای انتقال یک ref از طریق یک کامپوننت به کامپوننت فرزند استفاده می شود.آن می تواند با استفاده از متد ()React.forwardRef ایجاد شود.

این تکنیک در مورد کامپوننت های higher-order(مرتبه بالاتر) مفید است و مخصوصا در کتابخانه های کامپوننت های reusable مورد استفاده قرار می گیرد.

به رایج ترین مثال در این مورد توجه کنید:

مثال:

import React, { Component } from 'react';  
import { render } from 'react-dom';  
  
const TextInput = React.forwardRef((props, ref) => (  
  <input type="text" placeholder="Hello World" ref={ref} />  
));  
  
const inputRef = React.createRef();  
  
class CustomTextInput extends React.Component {  
  handleSubmit = e => {  
    e.preventDefault();  
    console.log(inputRef.current.value);  
  };  
  render() {  
    return (  
      <div>  
        <form onSubmit={e => this.handleSubmit(e)}>  
          <TextInput ref={inputRef} />  
          <button>Submit</button>  
        </form>  
      </div>  
    );  
  }  
}  
export default App; 

در مثال بالا کامپوننت TextInput که دارای یک فرزند به عنوان یک قسمت ورودی است،وجود دارد.اکنون برای انتقال ref به ورودی:

ابتدا یک ref ایجاد کرده و سپس آن را به ref پایین <{TextInput ref={inputRef> انتقال می دهیم.بعد از آن ref را به عنوان پارامتر دوم متد ()forwardRef ارسال می کنیم.سپس این پارامتر را به پایین <{input ref={ref> ارسال می کنیم.اکنون مقدار عنصر DOM در inputRef.current قابل دسترس است.

 

متد ()useRef در ری اکت

آن در ورژن ۱۶.۷ و بالاتر ری اکت معرفی شد.آن کمک می کند تا به عناصر DOM دسترسی پیدا کنید و سپس می توانیم با عناصر DOM تعامل داشته باشیم مانند focussing بر روی عنصر ورودی یا دسترسی به مقدار عنصر ورودی.

آن شیء ref را که ویژگی فعلی در پارامتر ارسال شده قرار گرفته است را بر می گرداند.

سینتکس

const refContainer = useRef(initialValue);  

در مثال زیر useRef تابعی است که به متغیر inputRef اختصاص می یابد و سپس یک attribute به نام ref درون عنصر html که می خواهید به آن مراجعه کنید،قرار دهید.

مثال:

function useRefExample() {  
  const inputRef= useRef(null);  
  const onButtonClick = () => {  
    inputRef.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputRef} type="text" />  
      <button onClick={onButtonClick}>Submit</button>  
    </>  
  );  
}

 

امیداریم با مفاهیم Ref در ری اکت به طور کامل آشنا شده باشید.

برای بهتر شدن منتظر نظرات شما هستیم.

 

دیگر مقالات
امید کیانی 1247 بازدید 1398/07/10
امید کیانی 545 بازدید 1398/06/17
حمید تیموری 590 بازدید 1399/03/16
حمید تیموری 1731 بازدید 1397/12/22
حمید تیموری 1431 بازدید 1398/03/02


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید