ข้อมูลของคอมโพเนนต์ใน React

ข้อมูลของคอมโพเนนต์สามารถเก็บไว้ได้ในสามแห่ง: ใน props ในตัวแปรและค่าคงที่ของคอมโพเนนต์ และใน state ใน props จะเก็บข้อมูลที่คอมโพเนนต์ได้รับจากภายนอกโดยคอมโพเนนต์แม่ โดยที่ภายในคอมโพเนนต์ props ต้องคงที่ไม่เปลี่ยนแปลง

ควรเก็บข้อมูลท้องถิ่นซึ่งสำคัญต่อตัวคอมโพเนนต์เองและคอมโพเนนต์แม่ไม่จำเป็นต้องรู้ไว้ในตัวแปร ค่าคงที่ และ state ใน state ควรเก็บข้อมูลที่อาจเปลี่ยนแปลงได้ในเหตุการณ์ต่างๆ และคุณต้องการให้การเปลี่ยนแปลงนั้นมีผลแบบ reactive

ให้คอมโพเนนต์หนึ่ง:

function Test() {
	// การกำหนดค่า isEdit, elem และ data
	
	if (isEdit) {
		elem = <input value={data} />;
	} else {
		elem = <span>{data}</span>;
	}
	
	return <div>
		{elem}
	</div>;
}

กำหนดว่า isEdit, elem และ data อาจเป็นอะไรได้บ้าง: prop, state, ตัวแปร หรือค่าคงที่