สวัสดี React 16

เห็นข่าว React 16 ออกมาแล้ว สิ่งที่น่าสนใจมาก ๆ คือ การทำงานของ React เปลี่ยนไปใช้ Fiber นั่นคือการ rewrite core algorithm ของ React นั่นเอง โดยที่ Fiber นั้นจะช่วยปรับปรุงประสิทธิภาพและเพิ่ม feature ใหม่ ๆ ที่เกี่ยวกับ animation, layout และ gesture รวมทั้ง incremental rendering

สิ่งแรกที่สำคัญมาก ๆ ต่อการเปลี่ยนแปลงคือ

ชุดการทดสอบของ React ซึ่งเขียนด้วย Jest สำหรับทดสอบ feature ต่าง ๆ ทั้งหมด แน่นอนว่ามันต้องผ่านทั้งหมดดังรูป

เขียน Core Algorithm ของ React ใหม่ด้วย Fiber

โดย feature หลัก ๆ คือ asynchronous rendering (แต่ไม่มีใน) นั่นคือการส่วนการทำงานเล็ก ๆ แยกการทำงานออกไปหลาย ๆ frame จากเดิมที่ทำการแบบ single thread หรือทำงานแบบ synchronous แต่ของใหม่จะไม่ทำการ block main thread อีกต่อไป แต่ใน release แรกนี้จะปิด feature นี้ก่อนนะ เนื่องจากจะเน้นไปที่การ migrate ก่อน ดังนั้นต้องรอใน release ถัดไปครับ การ render ข้อมูลใน React 16 ใช้ลำดับความสำคัญเป็นหลัก นั่นคือ ถ้ามีการเปลี่ยนแปลงหรือเกิดเหตุการณ์ตรงไหน จะทำการ update ในส่วนนั้นก่อนเสมอ ทำให้ผู้ใช้งานเห็นการเปลี่ยนแปลงทันที ดังนั้นการเรียก method ใน Component Lifecycle ทั้ง componentWillUpdate, shouldComponentUpdate ก็อาจจะมีปัญหา โดยมีคนลองทำ performance test สำหรับการ render แล้ว พบว่าเวลาใน render ลดจาก 50 milliseconds เหลือเพียง 15 millisecond เท่านั้น ขนาดของ React 16 ก็เล็กลงจาก 15.6.1 ประมาณ 30% ซึ่ง React เองใช้ Rollup ในการ compile code

ใครที่ว่าง ๆ ลองไปค้นหาคำว่า useFiber ใน Github : React ดู

จะพบว่าการพัฒนายังคงมี code ทั้ง version เก่าและใหม่อยู่ด้วยกัน !! แต่ก็ช่วยลดปัญหาเมื่อต้องการสร้างของใหม่ โดยไม่ให้กระทบการทำงานปัจจุบันนั่นเอง

ส่วน feature หลักที่น่าสนใจ ประกอบไปด้วย

• มี Error boundary มาแก้ไขปัญหาถ้าเกิด error ขึ้นมาแล้ว app ไม่ควรพังทั้งหมด
• การจัดการเกี่ยวกับ error จะมี component stack trace ให้ ทำให้การ debug ง่ายขึ้น
• สามารถ return ข้อมูลชนิด string จาก method render() ได้
• สามารถ return ข้อมูลชนิด array ของ element จาก method render() ได้ แต่ต้องใส่ attribute ชื่อว่า key ด้วยนะ
• Server side render ที่เร็วขึ้น

ตัวอย่างการใช้งาน Error boundary ตัวอย่างการ return array ของ element [gist id="9561a49817893e39416a84600f24195a" file="key.js"]

สุดท้ายจะรออะไรครับ ติดตั้งเลย

[code] $yarn add react@^16.0.0 react-dom@^16.0.0 หรือ $npm install --save react@^16.0.0 react-dom@^16.0.0 [/code]

ส่วนถ้าใครใช้ Create React App สร้าง project ใหม่

ก็จะได้ React 16 มาใช้งานอยู่แล้ว ยังไม่พอนะ React Native Web ก็ยังสนับสนุน React 16 อีกด้วย ส่วนเรื่องของ license ที่ drama กัน ตอนนี้ทั้ง React, Jest, Flow และ Immutable.js เปลี่ยนเป็น MIT license แล้วนะ ขอให้สนุกกับการ coding ครับ