ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

การแสดงผลของ 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/

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวแปรชนิด Tuple
โดย Four พฤ 18 ม.ค. 2018 5:18 pm บอร์ด Python Knowledge
0
10
พฤ 18 ม.ค. 2018 5:18 pm โดย Four
Smart Slider 3(สมาร์ทสไลด์ 3)-Extension สำหรับสร้างแถบเลื่อนและบล็อคภาพเคลื่อนไหวที่สวยงาม
โดย Parichat พฤ 18 ม.ค. 2018 5:02 pm บอร์ด Joomla Extension Review
0
6
พฤ 18 ม.ค. 2018 5:02 pm โดย Parichat
ขอสอบถามเรื่องความแตกต่างของฟังก์ชั่นvariant_pow()กับฟังก์ชั่น pow()
โดย Parichat พฤ 18 ม.ค. 2018 1:58 pm บอร์ด Programming - PHP
0
11
พฤ 18 ม.ค. 2018 1:58 pm โดย Parichat
อยากได้โปรแกรม command แบบ cmd ที่เก็บ history ได้ค่ะช่วยเเนะนำหน่อย
โดย thatsawan พฤ 18 ม.ค. 2018 11:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
25
พฤ 18 ม.ค. 2018 7:18 pm โดย thatsawan
0vsNULL
โดย Before Dong พฤ 18 ม.ค. 2018 10:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
19
พฤ 18 ม.ค. 2018 2:51 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Parichat พฤ 18 ม.ค. 2018 9:38 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
13
พฤ 18 ม.ค. 2018 7:16 pm โดย Parichat
งานประจำวันที่ 18 มกราคม 2561
โดย Jom07 พฤ 18 ม.ค. 2018 9:27 am บอร์ด MT23 - สุพรรษา พูลตา
2
27
พฤ 18 ม.ค. 2018 6:49 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Four พฤ 18 ม.ค. 2018 9:24 am บอร์ด MT22 - อิษยา งามสอาด
1
21
พฤ 18 ม.ค. 2018 11:44 am โดย Four
VDO สอนพัฒนา Componet Joomla ภาษาอังกฤษ By Mindphp Developer Team
โดย mindphp พฤ 18 ม.ค. 2018 6:21 am บอร์ด Joomla Development
0
13
พฤ 18 ม.ค. 2018 6:21 am โดย mindphp
Ozio Gallery-Components & Plugins สำหรับช่วยให้ดูภาพที่เผยแพร่บน Googleและวีดีโอจาก Youtube ที่ละเอียด
โดย Parichat พ 17 ม.ค. 2018 7:30 pm บอร์ด Joomla Extension Review
0
23
พ 17 ม.ค. 2018 7:30 pm โดย Parichat
ตัวดำเนินการของตัวแปร List
โดย Four พ 17 ม.ค. 2018 4:35 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 4:35 pm โดย Four
การใช้ Del statement
โดย Four พ 17 ม.ค. 2018 4:03 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 4:03 pm โดย Four
Review Applications 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 3:44 pm บอร์ด MT23 - สุพรรษา พูลตา
1
18
พ 17 ม.ค. 2018 6:19 pm โดย Jom07
การใช้ Precedence
โดย Four พ 17 ม.ค. 2018 3:36 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 3:36 pm โดย Four
โครงสร้าง Module
โดย tsukasaz พ 17 ม.ค. 2018 3:08 pm บอร์ด Joomla Dev
0
8
พ 17 ม.ค. 2018 3:08 pm โดย tsukasaz
Index VDO Reenigne – คุณวีรศักดิ์ - odoo 10
โดย Four พ 17 ม.ค. 2018 2:33 pm บอร์ด MT22 - อิษยา งามสอาด
0
8
พ 17 ม.ค. 2018 2:33 pm โดย Four
งานประจำวันที่ 17 มกราคม 2561
โดย Four พ 17 ม.ค. 2018 9:56 am บอร์ด MT22 - อิษยา งามสอาด
3
32
พ 17 ม.ค. 2018 4:36 pm โดย Four
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
52
พ 17 ม.ค. 2018 10:51 am โดย Parichat
งานประจำวันที่ 17 มกราคม 2561
โดย Parichat พ 17 ม.ค. 2018 9:47 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
11
60
พ 17 ม.ค. 2018 7:31 pm โดย Parichat
ไอเดียในการออกแบบ iphone8
โดย Before Dong พ 17 ม.ค. 2018 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 17 ม.ค. 2018 10:29 am โดย Before Dong