React

React.StrictMode คืออะไร? มาทำความรู้จักกัน

เรื่องที่เกี่ยวข้อง - ,
react-v1

จะเห็นว่าช่วงหลังๆ React มีการเพิ่ม Component ใหม่เข้ามาในโปรเจค โดยเฉพาะคนที่ใช้ createi-react-app ในการสร้างโปรเจค จะเห็นเลยว่าในไฟล์ index.js มีการเพิ่ม Component ประหลาดเข้ามาชื่อ <React.StrictMode>

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

มันมีความสำคัญยังไง? ทำไมถึงเอามาครอบตั้งแต่ App Component?

มาทำความเข้าใจกับมันกันครับ

คุณครูมาตรวจแล้ว!

หน้าที่หลักของ <React.StrictMode> คือการช่วยเราตรวจสอบการใช้งาน React ที่ไม่เหมาะสมครับ คล้ายๆ กับคุณครูฝ่ายปกครองมาเดินตรวจความเรียบร้อยของพวกเรานี่แหละ

และเพื่อตรวจจับวิธีการเขียนโค้ดใน React แบบเก่าบางตัวที่ไม่เหมาะสม และแนะนำการปรับโค้ดเป็นแบบใหม่เพื่อรองรับการมาถึงของกลไกการทำงานของ React ในอนาคตอันใกล้ โดยมีการแจ้งเตือนเป็น Warning หรือ Error ขณะรันใช้งาน

React.StrictMode เป็นตัวตรวจสอบการใช้งาน code ของเราว่าเหมาะสมหรือไม่ และให้คำแนะนำ แถมทำงานเฉพาะในโหมดพัฒนา (Development Mode) และไม่ทำงานใน Production จ้า

โดยหน้าที่หลักในปัจจุบันของ <React.StrictMode> มีดังนี้

ตรวจจับการใช้งาน Context API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน Context API แบบใหม่ที่นี่)

ตรวจจับผลของ Side-effect ที่ไม่เหมาะสมจากการเขียนใช้งาน Lifecycle Method

แจ้งเตือน หากตรวจจับการใช้งาน findDOMNode ที่กำลังจะปลดระวางการใช้งาน และให้คำแนะนำในการแก้ไข

แจ้งเตือน หากตรวจจับการใช้งาน String Ref API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน createRef API แทนที่นี่)

ตรวจจับการใช้งาน Lifecycle ที่ไม่เหมาะสม

วิธีใช้ React.StrictMode

ดังนั้นหากต้องการตรวจสอบการทำงานของโค้ดเรา เพื่อปรับปรุงให้ทันสมัยขึ้น เราก็ใส่ React.StrictMode ในครอบ Component ที่เราต้องการได้ เช่น

 <React.StrictMode>
    <NextflowComponent />
  </React.StrictMode>,

หรือถ้าเกิดเราสร้างโปรเจคใหม่โดยใช้ create-react-app มันก็จะใส่มาที่ตั้งแต่ ReactDOM.render() ในไฟล์ index.js เลย

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ติดตามเทคนิคดีๆ แบบนี้ ได้ทางช่องทางด้านล่าง และดูคอร์สเรียนโปรแกรมที่น่าสนใจได้เลยจ้า

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – React Documentation

Loading Facebook Comments ...
Menu