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

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

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

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