React හි refs සමඟ වැඩ කිරීම සඳහා useRef Hook

මෙම පාඩමෙන් අපි refs සමඟ වැඩ කරමු. පැහැදිලිව තේරුම් ගැනීමට අපි useRef hook එකේ ක්‍රියාකාරිත්වය useState hook එක සමඟ සංසන්දනය කරමු.

අපි බොත්තමක් සහිත සංරචකයක් සාදමු:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

අපි සංරචකයට useState ආයාත කරමු:

App.jsximport { useState } from 'react';

අපි state state එකක් සාදමු:

App.jsxconst [state, setState] = useState(0);

දැන් අපි බොත්තම ක්ලික් කළ විට අපගේ state 1 කින් වැඩි වන පරිදි කරමු. state එකේ අගය අපි කෙලින්ම බොත්තමේ ලිපිය තුළ පෙන්වමු:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

අපි බොත්තම ක්ලික් කිරීම සැකසීම සඳහා handleStateClick ශ්‍රිතය ලියමු:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

බොත්තම ක්ලික් කර බලමු, state අගය වැඩි වන ආකාරය.

දැන් අපි App සංරචකය නැවත සාදමු, නමුත් state එක භාවිතා නොකර ref එකක් භාවිතා කරමු.

පළමුව, අපි සංරචකයට useRef ආයාත කරමු:

App.jsximport { useRef } from 'react';

අපි ref ref එකක් සාදමු. useRef hook එකේ ප්‍රතිඵලය වන්නේ තනි දේපලක් සහිත ref වස්තුවකි current, එය පසුව අපට අවශ්‍ය වනු ඇත. අපි එහි ආරම්භක අගය 0 ලෙස සකසමු:

App.jsxconst ref = useRef(0);

අපි බොත්තමට ක්ලික් සැකසුම්කරු එකක් යොදමු. මතක තබා ගන්න, අපි කියවිය/වෙනස් කළ යුත්තේ ref වස්තුවම නොව එහි දේපල current:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

අපගේ බොත්තම ක්ලික් කිරීම සැකසීම සඳහා ශ්‍රිතය එක් කරමු. මෙහිදී අපි current 1 කින් වැඩි කරමු, state සමඟ කල පෙර උදාහරණයේ මෙනි. State වලින් වෙනස්ව, එහි අගය වෙනස් කිරීමට ශ්‍රිතයක් setState අවශ්‍ය වන අතර, ref වස්තුවේ දේපල සමඟ අපි කෙලින්ම වැඩ කරමු:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

දැන් අපගේ බොත්තම ක්ලික් කර බලමු. අපි මොනවා දකිමුද? එය ක්ලික් කළ විට, ආරම්භයේ 0 වූ අගය වෙනස් නොවේ.

ඇත්ත වශයෙන්ම, අගය සම්පූර්ණයෙන්ම වෙනස් වේද යන සැකයක් ඇති විය හැකිය. අපි එය පරීක්ෂා කර බලමු. මේ සඳහා ශ්‍රිතය සැකසුම්කරු තුළ current අගය console එකට ප්‍රතිදානය කරන කේත පේලිය තව එකක් එකතු කරමු:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

දැන්, බ්‍රවුසරයේ console එක විවෘත කර නැවතත් බොත්තම ක්ලික් කර බලමු සහ අගය සැබවින්ම සෑම ක්ලිකයකම වෙනස් වන බවට විශ්වාස කරමු.

දැන් අපට පෙනෙන්නේ state එකට වඩා, ref එකේ අගය වෙනස් කිරීමෙන් සංරචකය නැවත තැනීමක් (render) සිදු නොවන බවයි. එබැවින් අපි සෑම විටම බොත්තමේ ලිපිය තුළ ආරම්භක අගය 0 පමණක් දකිමු.

එබැවින්, ඔබගේ දත්ත නැවත තැනීම (render) සඳහා භාවිතා වන්නේ නම්, ඒවා state එකේ ගබඩා කරන්න, නැවත තැනීම අවශ්‍ය නැති නම්, එවැනි අවස්ථාවන්හිදී refs භාවිතා කිරීම වඩාත් කාර්යක්ෂම විය හැකිය.