Refs மூலம் DOM-ஐ கையாளுதல்

DOM node-க்கு ref பெறுதல்

React நிர்வகிக்கும் DOM node-ஐ அணுக, முதலில் useRef Hook-ஐ import செய்யுங்கள்:

import { useRef } from 'react';

பிறகு, உங்கள் component-க்குள் ref declare செய்ய அதை பயன்படுத்துங்கள்:

const myRef = useRef(null);

இறுதியாக, DOM node பெற விரும்பும் JSX tag-க்கு உங்கள் ref-ஐ ref attribute ஆக pass செய்யுங்கள்:

<div ref={myRef}>

useRef Hook current என்ற single property கொண்ட object ஒன்றை return செய்கிறது. ஆரம்பத்தில் myRef.current null ஆக இருக்கும். React இந்த <div>-க்காக DOM node உருவாக்கும்போது, அந்த node-க்கு reference-ஐ myRef.current-க்கு வைக்கும். பிறகு உங்கள் event handlers-இலிருந்து இந்த DOM node-ஐ access செய்து, அதில் defined செய்யப்பட்ட built-in browser APIs-ஐ பயன்படுத்தலாம்.

// You can use any browser APIs, for example:
myRef.current.scrollIntoView();

உதாரணம்: Text input-ஐ focus செய்தல்

இந்த உதாரணத்தில், button-ஐ click செய்தால் input focus ஆகும்:

இதை implement செய்ய:

1. useRef Hook மூலம் inputRef declare செய்யுங்கள்.
2. அதை <input ref={inputRef}> ஆக pass செய்யுங்கள். இது இந்த <input>-ன் DOM node-ஐ inputRef.current-க்குள் வைக்க React-க்கு சொல்கிறது.
3. handleClick function-இல், input DOM node-ஐ inputRef.current-இலிருந்து read செய்து, inputRef.current.focus() மூலம் அதில் focus() call செய்யுங்கள்.
4. handleClick event handler-ஐ onClick மூலம் <button>-க்கு pass செய்யுங்கள்.

DOM manipulation என்பது refs-க்கான மிகவும் பொதுவான use case என்றாலும், useRef Hook timer IDs போன்ற React-க்கு வெளியிலுள்ள பிற விஷயங்களை store செய்யவும் பயன்படுத்தப்படலாம். State போலவே, refs renders இடையே நிலைத்திருக்கும். Refs என்பது set செய்தால் re-renders trigger செய்யாத state variables போன்றவை. Refs பற்றி Refs மூலம் Values-ஐ Refer செய்தல்-இல் வாசிக்கவும்.

உதாரணம்: Element-க்கு scroll செய்தல்

ஒரு component-இல் ஒன்றுக்கு மேற்பட்ட refs இருக்கலாம். இந்த உதாரணத்தில், மூன்று images கொண்ட carousel உள்ளது. ஒவ்வொரு button-மும் தொடர்புடைய DOM node-இல் browser scrollIntoView() method-ஐ call செய்வதன் மூலம் ஒரு image-ஐ center செய்கிறது:

<ul>
  {items.map((item) => {
    // Doesn't work!
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef, useState } from "react";

export default function CatFriends() {
  const itemsRef = useRef(null);
  const [catList, setCatList] = useState(setupCatList);

  function scrollToCat(cat) {
    const map = getMap();
    const node = map.get(cat);
    node.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // Initialize the Map on first usage.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToCat(catList[0])}>Neo</button>
        <button onClick={() => scrollToCat(catList[5])}>Millie</button>
        <button onClick={() => scrollToCat(catList[8])}>Bella</button>
      </nav>
      <div>
        <ul>
          {catList.map((cat) => (
            <li
              key={cat.id}
              ref={(node) => {
                const map = getMap();
                map.set(cat, node);

                return () => {
                  map.delete(cat);
                };
              }}
            >
              <img src={cat.imageUrl} />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

function setupCatList() {
  const catCount = 10;
  const catList = new Array(catCount)
  for (let i = 0; i < catCount; i++) {
    let imageUrl = '';
    if (i < 5) {
      imageUrl = "https://placecats.com/neo/320/240";
    } else if (i < 8) {
      imageUrl = "https://placecats.com/millie/320/240";
    } else {
      imageUrl = "https://placecats.com/bella/320/240";
    }
    catList[i] = {
      id: i,
      imageUrl,
    };
  }
  return catList;
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    // Add to the Map
    map.set(cat, node);

    return () => {
      // Remove from the Map
      map.delete(cat);
    };
  }}
>

மற்றொரு component-ன் DOM nodes-ஐ அணுகுதல்

Parent component-இலிருந்து child components-க்கு refs-ஐ மற்ற prop போலவே pass செய்யலாம்.

import { useRef } from 'react';

function MyInput({ ref }) {
  return <input ref={ref} />;
}

function MyForm() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />
}

மேலுள்ள example-இல், parent component ஆன MyForm-இல் ref உருவாக்கப்பட்டு, child component ஆன MyInput-க்கு pass செய்யப்படுகிறது. பிறகு MyInput ref-ஐ <input>-க்கு pass செய்கிறது. <input> ஒரு built-in component என்பதால், React ref-ன் .current property-ஐ <input> DOM element-க்கு set செய்கிறது.

MyForm-இல் உருவாக்கப்பட்ட inputRef இப்போது MyInput return செய்த <input> DOM element-ஐ point செய்கிறது. MyForm-இல் உருவாக்கப்பட்ட click handler, inputRef-ஐ access செய்து <input>-இல் focus set செய்ய focus() call செய்ய முடியும்.

import { useRef, useImperativeHandle } from "react";

function MyInput({ ref }) {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input ref={realInputRef} />;
};

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Input-ஐ focus செய்</button>
    </>
  );
}

React refs-ஐ attach செய்யும் நேரம்

React-இல், ஒவ்வொரு update-மும் இரண்டு phases ஆக split செய்யப்படுகிறது:

• Render போது, screen-இல் என்ன இருக்க வேண்டும் என்பதை கண்டுபிடிக்க React உங்கள் components-ஐ call செய்கிறது.
• Commit போது, React changes-ஐ DOM-க்கு பயன்படுத்துகிறது.

பொதுவாக, rendering போது refs access செய்ய விரும்பமாட்டீர்கள். DOM nodes hold செய்யும் refs-க்கும் இதே பொருந்தும். First render போது, DOM nodes இன்னும் உருவாக்கப்படவில்லை; எனவே ref.current null ஆக இருக்கும். Updates render செய்யும்போதும் DOM nodes இன்னும் update செய்யப்படவில்லை. எனவே அவற்றை read செய்ய இது மிக விரைவாகும்.

React commit போது ref.current set செய்கிறது. DOM update செய்வதற்கு முன், பாதிக்கப்பட்ட ref.current values-ஐ React null ஆக set செய்கிறது. DOM update செய்த பிறகு, அவற்றை உடனடியாக corresponding DOM nodes-க்கு set செய்கிறது.

பொதுவாக, refs-ஐ event handlers-இலிருந்து access செய்வீர்கள். Ref-ஐ வைத்து ஏதாவது செய்ய வேண்டும், ஆனால் அதற்கான particular event எதுவும் இல்லையெனில், Effect தேவைப்படலாம். Effects பற்றி அடுத்த pages-இல் பேசுவோம்.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        சேர்
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        சேர்
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Refs மூலம் DOM-ஐ கையாளும் சிறந்த நடைமுறைகள்

Refs ஒரு escape hatch. “React-க்கு வெளியே step” செய்ய வேண்டியபோது மட்டுமே அவற்றை பயன்படுத்த வேண்டும். Focus manage செய்தல், scroll position manage செய்தல், அல்லது React expose செய்யாத browser APIs call செய்தல் ஆகியவை இதற்கான பொதுவான examples.

Focusing மற்றும் scrolling போன்ற non-destructive actions-க்கு மட்டும் கட்டுப்பட்டால், பிரச்சினைகள் வரக்கூடாது. ஆனால் DOM-ஐ manually modify செய்ய முயன்றால், React செய்யும் changes-உடன் conflict ஏற்படும் risk உண்டு.

இந்த பிரச்சினையை விளக்க, இந்த example-இல் welcome message மற்றும் இரண்டு buttons உள்ளன. முதல் button, React-இல் வழக்கமாக செய்வது போல conditional rendering மற்றும் state பயன்படுத்தி அதன் presence-ஐ toggle செய்கிறது. இரண்டாவது button, React control-க்கு வெளியே DOM-இலிருந்து அதை forcefully remove செய்ய remove() DOM API-ஐ பயன்படுத்துகிறது.

”setState மூலம் toggle செய்” என்பதை சில முறை அழுத்திப் பாருங்கள். Message மறைந்து மீண்டும் தோன்ற வேண்டும். பிறகு “DOM-இலிருந்து remove செய்” அழுத்துங்கள். இது அதை forcefully remove செய்யும். இறுதியாக, “setState மூலம் toggle செய்” அழுத்துங்கள்:

DOM element-ஐ manually remove செய்த பிறகு, அதை மீண்டும் காட்ட setState பயன்படுத்த முயன்றால் crash ஏற்படும். ஏனெனில் நீங்கள் DOM-ஐ மாற்றியுள்ளீர்கள், அதை சரியாக தொடர்ந்து manage செய்வது எப்படி என்று React-க்கு தெரியாது.

React நிர்வகிக்கும் DOM nodes-ஐ மாற்றுவதைத் தவிர்க்கவும். React நிர்வகிக்கும் elements-ஐ மாற்றுதல், children சேர்த்தல், அல்லது children remove செய்தல் inconsistent visual results அல்லது மேலுள்ளதைப் போன்ற crashes-க்கு வழிவகுக்கும்.

ஆனால் இதனால் அதை ஒருபோதும் செய்ய முடியாது என்று பொருளில்லை. இதற்கு caution தேவை. React update செய்ய காரணமே இல்லாத DOM பகுதிகளை நீங்கள் safe ஆக modify செய்யலாம். உதாரணமாக, JSX-இல் ஏதாவது <div> எப்போதும் empty ஆக இருந்தால், அதன் children list-ஐ touch செய்ய React-க்கு reason இருக்காது. எனவே அங்கே elements-ஐ manually add அல்லது remove செய்வது safe.