React හි state භාවිතය

නිෂ්පාදනයක නම අඩංගු state එකක් නිර්මාණය කිරීම සඳහා useState ශ්‍රිතය භාවිතා කරමු:

const state = useState('prod');

එහි ප්‍රතිඵලයක් ලෙස state නම් නියතය අරාවක් නියෝජනය කරයි. එහි පළමු මූලද්‍රව්‍යයේ නිෂ්පාදන නම ගබඩා වන අතර, දෙවන මූලද්‍රව්‍යයේ නම වෙනස් කිරීම සඳහා වන ශ්‍රිතය ගබඩා වේ:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

සංක්ෂිප්ත බව සඳහා සාමාන්‍යයෙන් අරාව සඳහා අතරමැදි නියතයක් භාවිතා නොකර, වෙනුවට destructuring භාවිතා කරයි:

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

දැන් අපගේ නිෂ්පාදන නම සහිත state එක යම් අලංකරණයක් තුළ ප්‍රදර්ශනය කරමු:

return <p>
	<span>{name}</span>
</p>;

සියල්ල එකට එකතු කර ලබාගන්නේ පහත කේතයයි:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

මෙම කේතය දිවහරින විට, මුලින් div එක තුළ state එකේ ආරම්භක අගය ප්‍රදර්ශනය වේ, අපගේ නඩුවේදී 'prod' වේ. setName ශ්‍රිතය තුළින් state එක වෙනස් කිරීමේදී අලංකරණය තුළ ස්වයංක්‍රීයව state එකේ නව අගය දිස්වේ.

ඔබට තිරය මත පරිශීලක දත්ත ප්‍රදර්ශනය කිරීමට අවශ්‍ය යැයි සිතන්න: ඔහුගේ නම, අනුනම, වයස. මෙය සඳහා අදාළ ආරම්භක අගයන් සහිත state සාදන්න.