React හි state ප්‍රතික්‍රියාශීලීතාව

දැන් අපි බලමු ප්‍රතික්‍රියාශීලීතාව වැඩ කරන ආකාරය. එය state වෙනස් වන විට වෙනස්කම් ක්ෂණිකව තිරයේ පෙනෙන ආකාරයට සලස්වයි.

අපි උදාහරණයක් බලමු. අපට නිෂ්පාදන නාමය සහිත state එකක් ඇතැයි සිතමු:

jsxconst [name, setName] = useState('prod');

නිෂ්පාදනයේ නම markup තුළ ප්‍රදර්ශනය කරමු:

jsxreturn <div>
  <span>{name}</span>
</div>;

දැන් අපි බොත්තමක් සාදමු, එය ක්ලික් කළ විට අපගේ state වෙනස් වේ:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

ක්ලික් සැකසලය තුළ අපි setName ශ්‍රිතය භාවිතා කරමු, නිෂ්පාදනයට නව නම සැකසීමට:

jsxfunction clickHandler() {
  setName('xxxx');
}

අපගේ සියලුම කේතය එකට එකතු කරමු. ප්‍රතිඵලය වන්නේ බොත්තම ක්ලික් කිරීමෙන් පසු ලෙඛනය ක්ෂණිකව නව අගයකට වෙනස් වනු ඇත:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

වෙනම සැකසල ශ්‍රිත භාවිතා කිරීම අනිවාර්ය නොවේ. නිර්නාමික ඊතල ශ්‍රිතයක් භාවිතා කළ හැකිය:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}