Skip to content
CodingThailand's Blog
CodingThailand's Blog

by โค้ชเอก

  • Home
  • About Me
  • CodingThailand.com
CodingThailand's Blog

by โค้ชเอก

มีอะไรใหม่ใน React 16.9.0

25/02/202025/02/2020

มาดูกันว่า React เวอร์ชันนี้ มีอะไรน่าสนใจบ้าง 🙂

.
1. กำลังจะยกเลิกคำสั่ง javascript: ที่เราใส่ใน href ของ tag <a></a> ครับ เพราะอาจเสี่ยงต่อการถูกโจมตีและความปลอดภัย (cross-site scripting) หากใครอัปเดตเวอร์ชันนี้จะมี warning ออกมาครับ อนาคตจะเอาออกแล้ว แน่นอนจะมี error แสดงเลย หากใครต้องการใช้อยู่ก็แนะนำให้ใช้ dangerouslySetInnerHTML แทนนะ

ดูเพิ่มเติมได้ที่ => http://bit.ly/2N0pJsc

.
2. ในอนาคต (เวอร์ชัน 17) จะมีการนำ lifecycle methods ออกไปทั้งหมด 3 methods ได้แก่ componentWillMount, componentWillReceiveProps, componentWillUpdate แล้วนะครับ

ถ้าในเวอร์ชันนี้ (16.9.0) ก็ยังใช้ได้แต่จะมีการแจ้งเตือนออกมา (warning) เค้าแนะนำให้เราเติมคำว่า UNSAFE_ เข้าไปด้านหน้าชื่อ methods ครับหากใครยังใช้อยู่

แต่ถ้าโปรเจคใหญ่จะมานั่งแก้เองคงไม่ไหว ก็แนะนำให้ติดตั้ง “codemod” ได้เลยครับ ด้วยคำสั่ง

npx react-codemod rename-unsafe-lifecycles

เดี๋ยวมันจัดการ rename ให้เราเอง

.
3. สามารถใช้ Profiler API สำหรับวัดประสิทธิภาพของ Web App ด้วยการเขียนโค้ดได้แล้วนะครับ (ปกติจะใช้ React DevTools) โดยต้องระบุ id และเขียน callback ที่ onRender เพื่อรับข้อมูลด้านประสิทธิภาพต่างๆ ได้

ดูเพิ่มเติมได้ที่ => http://bit.ly/2H5hzuV

.
4. ทำให้ฟังก์ชัน ReactTestUtils.act() สามารถใช้งานแบบ Asynchronous ได้ สำหรับใครที่เขียน test อยู่ก็ลองดูได้ครับ

.
อื่นๆ ลองตามไปอ่านได้ที่ blog ได้เลย => http://bit.ly/31yHnHB

.
จริงๆ แล้วใน React เวอร์ชัน 16 นี้มี features เพิ่มเข้ามาหลายอย่างครับ ไม่ว่าจะเป็น Hooks, context API, การทำ lazy loading ด้วย Suspense เป็นต้น ใครยังไม่ได้ลอง แนะนำให้ลองเอามาใช้ดูครับ

.
สุดท้ายใครอยากอัปเดตก็ง่ายๆ ครับ ลุยได้เลย

npm install –save react@^16.9.0 react-dom@^16.9.0

หรือ

yarn add react@^16.9.0 react-dom@^16.9.0

.
ลองดูนะครับ
โค้ชเอก

Views: 187

React Uncategorized

Post navigation

Previous post
Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Posts ล่าสุด

  • การใช้งาน Prefetching ใน Next.js
  • 14 ข้อคิด เพื่อการเป็น Developer ที่ดีขึ้น จาก “Lee Robinson”
  • เคยเจอ “TypeError: Cannot read property ‘x’ of undefined” หรือเปล่า
  • บันทึกการเขียนเว็บไซต์ใหม่ในรอบ 10 ปี ย้ายมาใช้ Next.js
  • ทำไมการจัดการ Error ใน JavaScript ถึงเป็นเรื่องท้าทาย?

Recent Comments

    หมวดหมู่

    • .NET
    • AI
    • Android
    • Angular
    • Angular 2
    • Coding
    • CSS
    • Database
    • Editor
    • Flutter
    • Git
    • HTML5
    • Ionic 2
    • Ionic 4
    • Ionic Framwork
    • JavaScript
    • Laravel
    • Laravel 5
    • Next.js
    • Node.js
    • PHP
    • PHP 7
    • Plugins
    • React
    • React Native
    • Template
    • Tools
    • TypeScript
    • UI
    • Uncategorized
    • Vue.js
    • XAMPP
    • Yii
    • คอร์สเรียน
    • แรงบันดาลใจ

    Archives

    • July 2025
    • April 2025
    • November 2024
    • October 2024
    • April 2020
    • February 2020
    • August 2019
    • September 2018
    • August 2018
    • February 2018
    • November 2017
    • October 2017
    • August 2017
    • July 2017
    • April 2017
    • October 2016
    • August 2016
    • May 2016

    Tags

    .NET android Angular Angular 2 Atom Coding Coding Standard CSS CSS 3 Datepicker Express.js extensions Git HTML HTML5 Ionic2 JavaScript Laravel5 laravel 5.5 MariaDB Material Design MySQL Node.js npm PHP PHP7 plugins PouchDB recaptcha Restful sail.js template typescript typscript XAMPP Yii2

    ผู้เยี่ยมชม

    • 0
    • 1,818,181
    • 547,566
    • 187
    ©2025 CodingThailand's Blog | WordPress Theme by SuperbThemes