การแสดงผลของ Element (อีลีเมนท์)
React Element เป็น JavaScript Object ที่เก็บข้อมูลของสิ่งที่จะเอาไปแสดงผลบนหน้าจอ โดยมีข้อมูลสำคัญอยู่สองอย่าง คือ Type และ Props
- Type มีค่าเป็น String หรือ Component Class | Function
- Props เป็น JavaScript Objects ที่เก็บค่าต่างๆของ Element ไว้
การแสดงผลของ Element ใน DOM
สมมติถ้ามี <div> อยู่ในโค้ด HTML ของเรา
<div id="root'></div>
เราเรียกเจ้าสิ่งนี้ว่า root ของ DOM เพราะ ทุกอย่างที่อยู่ภายใต้ root จะได้รับการจัดการโดย React DOM
Example : เมื่อเราต้องการแสดงผลผ่าน root เราจะใช้ ReactDOM.render()
const element = <h1>Hello, world !!</h1>;
ReactDOM.render(
element, document.getElementById('root');
);
ผลลัพท์ คือ แสดงค่า "Hello, world !!"
การอัพเดทการแสดงผลของ Element
เมื่อเราสร้าง Element ขึ้นมา เราจะไม่สามารถเปลี่ยนแปลง Attibute หรือ Children ได้ วิธีเดียวที่จะแก้ไข คือ สร้าง Element ใหม่ขึ้นมาและส่งผ่านไปยัง ReactDOM.render()
Example : โค้ดนาฬิกา
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString( )}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
ผลลัพท์ คือ มันจะเรียก ReactDOM.render() ทุกๆวินาที จาก setInterval()
ข้อมูลอ้างอิง : https://reactjs.org/