[React Guide ฉบับย่อ] ทำความเข้าใจก่อนเริ่มต้นเขียนเว็บด้วย React

หลังจากที่ผมได้ลองใช้ React มาได้สักอาทิตย์กว่าๆ ก็ได้บรรลุขั่นต้นแล้ว สามารถมาเขียนอธิบายให้เพื่อนๆ ได้ฟังกันได้ปกติผมเขียนแต่ AngularJS เป็นหลัก

สำหรับแนวคิดในการเขียนบทความนี้ง่ายมากครับ ยกตัวอย่าง่ายๆ ถ้าวันนึงคุณอยากจะลองเขียนอะไรใหม่ๆ ต้องศึกษาเทคโนโลยีใหม่ๆ มันยากมากตอนต้นที่เราจะจับจุดมันได้และไปต่อในก้าวถัดไป แต่กับ React นั่นมันนรกกว่านั่นเพราะ Doc และ tutorial นั่นกระจัดกระจายมาก ไม่เหมือน AngularJS ที่ Doc และ Tutorial หาได้ง่ายมากๆ ดังนั่นบทความนี้จะไม่สอนเขียนโปรแกรมอะไรมากมาย แต่เขียนเพียงไกด์ไลน์ให้เท่านั่นครับ

 

Concept และองค์ประกอบของ React

React elements พูดง่ายๆ มันคือ JavaScrip Object ธรรมดาๆ ที่สร้างมาให้เปรียบเสมือนว่ามันคือ HTML Elements และ Element พวกนี้มันไม่ได้มีหน้าที่ทำงานบนบราวเซอร์แต่แค่เป็นตัวแทนของ HTML Tags เท่านั่นเองเช่น h1, div อะไรทำนองนั่น

Components คือ React elements ที่เราทำการสร้างขึ้นมานั่นเองซึ่งจริงๆ แล้วมันคือ UI นั่นเองที่ประกอบด้วยโครงสร้าง(HTML tags) กับฟังก์ชัน (พวก events ต่างๆ)

JSX คือ JavaScript ที่เอาไปร่วมร่างกับ XML ให้สามารถเขียน Tags ลงไปใน JavaScript ได้ครับ โดยไฟล์ก็จะมีนามสกุลเป็น .jsx อยากรู้เพิ่มเติมอ่าจากบล๊อก Facebook(link) ได้เลยครับ

The Virtual DOM อันนี้แหละพระเอกของ React ที่มันรวมเอา JavaScript Object (React elements, Components) มาทำงานด้วยกัน ยังไง ?

 

DOM คืออะไร

ก่อนจะไปพูดเรื่อง Virtual DOM ต้องเข้าใจ DOM และปัญหาของการใช้ DOM ก่อน, DOM (Document Object Model) มันคือการเก็บ Document หรือในรูปแบบของ Object เป็นโครงต้นไม้ (Tree) คงเจอกันในวิชา Data Structure and Algorithm กันมาแล้ว ซึ่งในการเก็บ Document พวก HTML, XML มันก็จะใช้วิธีการนี้เก็บ เวลาเราจะไปจัดการกับ HTML แต่ละจุด เช่นการลบ, เพิ่ม, เปลี่ยนแปลงก็ต้องใช้ JavaScript เข้าไปทำแทนซึ่ง DOM มันมี API ให้เข้าไปจัดการแต่ละโหนด (Nodes) ได้ตัวอย่างเช่นการใช้คำสั่ง getElementById ของ JavaScript ตัวอย่างโค้คง่ายๆ เพื่อค้นหาและลบโหนด

var item = document.getElementById(“item”);

item.parentNode.removeChild(item);

ปัญหาของ DOM

เมื่อมันคือ DOM มันก็คือ Tree-Structure เวลาเราไล่โค้ดค้นหาแท๊ก มันก็มองหาที่เราต้องการถูกไหม? หาจาก parent ไปหา child หรืออะไรก็ตามแต่ สมุติให้ว่าเรามี div  อยู่ 1000 อันในเว็บ ปัญหาคือไร ?

  1. ถ้าเราต้องการจัด Event บนหน้าเว็บปัญหาคือถ้ามัน 1000 div มันก็ต้องค้นหาในทุกๆ อันหรือบางอันก็แล้วแต่เพื่อเข้าไปจัดการกับ Event เสียเวลาแถมบักมาอีกต่างหาก และช้าด้วย
  2. ถ้าเราต้องไล่โค้ดเพื่อแก้ไขละ 1000 div นรกชัดๆ

 

Virtual DOM

มันคือการสร้าง Tree-Object ซึ่งมันคือมันคือตัวแทนของ Real DOM ก็หมายความง่ายว่าแทนที่เราจะสร้าง div จริงๆ ไว้ใน Browser เราก็สร้างมันไม่เก็บไว้ใน Memory แทนไงละ ที่เป็น React UI Object และแทนที่มันจะไปจัดการกับ Real DOM ด้วยการใช้ DOM API แบบเก่าๆ มันก็ใช้วิธีการ patch จากนั่นก็ Render UI ส่วนที่ถูกกระทำใหม่ และแทนที่จะต้องไปไล่ DOM ที่ว่านั่นอยู่ส่วนไหน มันก็ใช้ ref มาทำแทน (อ่านใน Doc ได้) และใน Virtual DOM จะมีแอทริบิวต์ 3 ตัวตามที่ Document Facbook บอกคือ key, ref และ dangerouslySetInnerHTML ไปอ่านต่อกันเองนะครับมันเยอะ ดังนั่นเข้าใจหรือยังว่า ทำไมหลายๆ คนบอกว่า React ทำไมถึงไวกว่า AngularJS (อ้าวว!! พาดพิงสะงั่น ฮ่าาๆ) เพราะมันทำงานผ่าน Memory แทน

S1vng

Image: stackoverflow

 

เริ่มการ Guideline จริงๆ สักที (เอ๊ะ!? ที่ผ่านแค่แนะนำตัวเฉยๆ ครับ ฮ่าๆ)

 

Rendering

เริ่มต้นระบบเลยสำหรับการเขียน React เราต้องเขียนให้มันสร้าง UI นั่นเอง ซึ่ง UI ไม่ได้สร้างไว้ใน browser แต่สร้าง Virtual DOM ไปเก็บใน JavaScript Memory นะครับ ตัวอย่างโค้ดนะครับ โฟกัสไปที่คำสั่ง  render พอนะครับ

เขียนด้วยJSX และ JavaScript ES5

เขียน ด้วย JSX และ JavaScript ES5

เขียนด้วย JSX และ JavaScript ES2015 (ES6) 

กระบวนการตรงนี้ก็คือการให้ระบบ render Virtual DOM นั่นเอง เวลาเราเขียน React ก็อย่าลืม render ไม่งั่นระบบจะไม่แสดง UI ให้เรานะครับ

ReactDOM.render(
<Hello />,
document.getElementById(‘container’)
);

 

Components

มันคือส่วนสำคัญที่สุดของ React มันคือส่วนที่คุณจะต้องสร้าง UI เข้าไปเพื่อให้มัน Render นั่นเอง

เขียน ด้วย JSX และ JavaScript ES5

เขียนด้วย JSX และ JavaScript ES2015 (ES6) 

คือแนวคิดในการเขียน React เราจะแยก ส่วนต่างๆ ออกเป็นส่วนๆ เรียกว่า Component แล้วค่อยเอามารวมกันตอนที่ระบบ render ครับ เช่นแยก Header, Footer ออกไปคนละไฟล์ คนละ Business logic ไปเลยครับ ซึ่ง AngularJS 2 ก็เอาประโยชน์ตรงนี้มาใช้ทำระบบเหมือนกัน และก็เพิ่งมาให้ Angular 1.5 ครับ หลักๆ คือการสร้าง function object (Class) ว่าต้องการทำอะไร และประกอบด้วยอะไร จากนั่น render ครับ

 

 

Props

เราสามารถส่ง parameter เข้าไปได้ ตอน Render ครับ ซึ่งจะผ่าน props นั่นเอง

เขียน ด้วย JSX และ JavaScript ES5

เขียนด้วย JSX และ JavaScript ES2015 (ES6) 

แนวคิดนี้เป็นแค่การส่งค่าบางอย่างตอนที่ระบบ render UI เข้าไปใน UI แต่ละ Component โดยจะเรียกค่าผ่าน this.prop.[nameOfParam] แล้วนำไปใช้งานต่อครับ แบบตัวอย่างบน render ส่ง name แล้วก็ไปเอาใช้ในของ Component

 

 

State

มันคือส่วนประกอบการทำงานภายในของ Components และก็เก็บข้อมูลและยังสามารเปลี่ยนแปลงระหว่างการทำงานได้อีกด้วย

เขียน ด้วย JSX และ JavaScript ES5

เขียนด้วย JSX และ JavaScript ES2015 (ES6) 

ตัวนี้จะเป็นการส่งค่า เก็บค่า เปลี่ยนแปลงค่าครับ โดยคีย์หลักๆ อยู่ตรง getInitialState (ES5) ทุกครั่งที่จะทำ state ต้องมีการเรียก init ก่อน และระหว่างการทำงานมีการเปลี่ยนแปลงอะไร state ก็จะเป็นตัวทำหน้าที่ต่อ จากนั่นระบบจึงทำ patch UI ให้ครับ การเรียกค่าจะผ่าน this.state.[nameOfParam] สำหรับ ES6 จะออก งงๆ ไปหน่อย เพราะมันจะมีเรื่องการทำ constructor เข้ามา อ่าน ES5 ไปก่อนนะครับ ผมไม่ขออธิบายส่วนของ  ES6

 

 

Composition

ก็คือการที่เราสามารถเอา Components หลายๆ ตัวมาประกอบกันได้นั่นเองครับ

เขียน ด้วย JSX และ JavaScript ES5

เขียนด้วย JSX และ JavaScript ES2015 (ES6) 

ตรงนี้ไม่มีเทคนิคพิเศษอะไร แต่เป็นความสามารถของ React ที่ให้เราเอา Component มาประกอบกันได้ เหมือนเขียน HTML ครับ

 

จุดๆ หลักของ React จะมีเท่านี้ครับ ในขั่นต้นของการหัดเขียนตามคีย์ที่ผมอธิบายไป เท่านี้ก็สามารทำเว็บด้วย React ได้แล้วนะครับ เพราะมันมีเท่านี้จริงๆ ซึ่งเป็นจุดหลักของ Framework ตัวนี้ แต่จะมีเรื่องที่ถ้าเราทำเว็บไปสักพักจะมีการพูดถึงเรื่อง Life cycle คือกระบวนการของระบบในการทำกับ Render ซึ่งมีหลายตัวผมยกมาคราวๆ เช่น

  • การก่อน render
  • หลังการ render
  • ก่อนการ init state
  • หลังการ init state

ยังมีอีกหลายแบบเยอะเหมือนกัน และอีกเรื่องทีแยกออกไปคือการ จัดการเรื่อง Business Logic และ State แต่ละ Component ซึ่งจะได้ยินกันบ่อยคือ Flux คือแนวคิดมาจัดการเรื่องนี้ที่ Facebook ได้ให้ไว้ (มันคือแค่แนวคิดไว้ทำการ implement เฉยๆ) และก็มีคนเอา Flux ไปต่อยอดเป็น Redex นั่นเอง แต่สำหรับคนเริ่มต้นยังไม่ต้องถึงอ่านเรื่องนี้ครับ เราสามารถเขียนแอพเล็กๆ จากหัวข้อ Render, Coponent, Prop, State, Composition ได้เลยครับ อ่านต่อนิดหน่อยรับรองเข้าใจได้แน่นอน

สิ่งที่ผมจะแนะนำเพิ่มคือให้เขียน React ด้วย JSX ดีกว่าครับโค้ดจะสั่นและอ่านง่ายกว่า และลดขั่นตอนการทำงานไปได้เยอะครับ อีกอย่างนึงถ้าเป็นไปได้ควรใช้ JavaScript ES2015 (ES6) ก็ดีครับ หรือใครยังอยากเขียน ES5 ก็ได้เหมือนกันครับ

ก็จากที่ผมสอนมาด้านบนเป็นแค่การสร้าง Concept ขั่นต้นเพื่อนำไปต่อยอดนะครับ หวังว่ารู้แนวทางแล้วจะไปไปต่อกันได้นะครับ ถ้าเขียนผิดพลาดตรงไหนก็ขออภัยพอดีผมก็เพิ่งหัดไม่นานนี้เอง เอามาบอกเล่าให้ฟังพอเป็นไกดไลน์นะครับ

 

 

Official : Facebook React

Facebook Comments