789 งานเร่งกับ React Native (003)

สำหรับบทความนี้จะมาทำเข้าใจกับ state กับ props แบบสั้นๆ ซึ่ง state กับ props นี้จะถูกใช้เยอะมากกกในRN

state

state นั้นจะใช้อยู่ภายใน component โดยใช้เก็บค่าต่างๆ เมื่อค่าเหล่านั้นถูกเปลี่ยนแปลง จะทำให้ component ทำการเรียก render ใหม่ ดังตัวอย่างด้านล่าง

เริ่มต้น state ของ count มีค่าเป็น 0 แต่เมื่อมีการกดปุ่ม ปุ่นนั้นจะไปเรียก function onButtonPress ซึ่งใน function จะมีการเปลี่ยนแปลง state ของ count โดย +1 ขึ้นไปทุกครั้งที่กดปุ่ม ดังภาพ

Props

นั้นใช้ส่งค่าจาก component หนึ่งไปอีก componentหนึ่ง ซึ่งค่านั้นไม่สามารถแก้ไขได้

ในCodeด้านบน มีการเรียกใช้ component ที่ชื่อGenText โดยส่งค่า senttext ที่เก็บข้อมูล Hello All. ไว้

ต่อมาที่ component GenText มีการเรียกใช้งานค่า senttext ที่ส่งมาผ่าน props มาแสดงผล

เมื่อทำการRun ก็จะได้ผลดังนี้