6 กันยายน 2568ไทย

สำรวจ experimental_useFormState ของ React สำหรับการตรวจสอบฟอร์มขั้นสูง คู่มือนี้ครอบคลุมการใช้งาน ประโยชน์ และตัวอย่างจากโลกจริง

การตรวจสอบความถูกต้องของฟอร์มด้วย React experimental_useFormState: การยกระดับการตรวจสอบฟอร์ม

การตรวจสอบความถูกต้องของฟอร์ม (Form validation) เป็นส่วนสำคัญของการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ ซึ่งช่วยรับประกันความสมบูรณ์ของข้อมูล, เพิ่มประสบการณ์ของผู้ใช้, และป้องกันข้อผิดพลาดไม่ให้แพร่กระจายไปทั่วทั้งระบบของคุณ React ด้วยสถาปัตยกรรมแบบคอมโพเนนต์ ได้นำเสนอแนวทางมากมายในการจัดการฟอร์มและการตรวจสอบความถูกต้อง Hook ที่ชื่อว่า experimental_useFormState ซึ่งเปิดตัวมาเป็นฟีเจอร์ทดลองใน React นำเสนอวิธีการที่ทรงพลังและเรียบง่ายในการจัดการสถานะของฟอร์มและการตรวจสอบความถูกต้องโดยตรงภายใน server actions ซึ่งช่วยให้เกิด progressive enhancement และประสบการณ์ผู้ใช้ที่ราบรื่นยิ่งขึ้น

ทำความเข้าใจ experimental_useFormState

Hook experimental_useFormState ถูกออกแบบมาเพื่อทำให้กระบวนการจัดการสถานะของฟอร์มง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อมีการโต้ตอบกับ server actions ซึ่ง server actions เป็นอีกหนึ่งฟีเจอร์ทดลองที่อนุญาตให้คุณกำหนดฟังก์ชันบนเซิร์ฟเวอร์ที่สามารถเรียกใช้ได้โดยตรงจากคอมโพเนนต์ React ของคุณ experimental_useFormState มีกลไกในการอัปเดตสถานะของฟอร์มตามผลลัพธ์ของ server action ซึ่งช่วยอำนวยความสะดวกในการตรวจสอบความถูกต้องและให้ผลตอบรับแบบเรียลไทม์

ประโยชน์หลัก:

การจัดการฟอร์มที่ง่ายขึ้น: รวบรวมสถานะของฟอร์มและตรรกะการตรวจสอบไว้ในคอมโพเนนต์
การตรวจสอบฝั่งเซิร์ฟเวอร์: ทำให้สามารถตรวจสอบความถูกต้องบนเซิร์ฟเวอร์ได้ รับประกันความสมบูรณ์ของข้อมูลและความปลอดภัย
Progressive Enhancement: ทำงานได้อย่างราบรื่นแม้ในขณะที่ JavaScript ถูกปิดใช้งาน โดยยังคงให้ประสบการณ์การส่งฟอร์มขั้นพื้นฐานได้
ผลตอบรับแบบเรียลไทม์: ให้ผลตอบรับแก่ผู้ใช้ทันทีตามผลการตรวจสอบ
ลด Boilerplate: ลดจำนวนโค้ดที่ต้องเขียนสำหรับการจัดการสถานะของฟอร์มและการตรวจสอบความถูกต้อง

การนำ experimental_useFormState ไปใช้งาน

เรามาดูตัวอย่างการใช้งาน experimental_useFormState ในทางปฏิบัติกัน เราจะสร้างฟอร์มลงทะเบียนง่ายๆ พร้อมกฎการตรวจสอบพื้นฐาน (เช่น ฟิลด์ที่ต้องกรอก, รูปแบบอีเมล) ตัวอย่างนี้จะแสดงวิธีการผสาน hook เข้ากับ server action เพื่อตรวจสอบข้อมูลในฟอร์ม

ตัวอย่าง: ฟอร์มลงทะเบียน

ขั้นแรก เรามาสร้าง server action เพื่อจัดการการส่งฟอร์มและการตรวจสอบความถูกต้องกันก่อน action นี้จะรับข้อมูลฟอร์มและส่งคืนข้อความแสดงข้อผิดพลาดหากการตรวจสอบล้มเหลว

// server-actions.js (นี่เป็นเพียงตัวอย่าง การใช้งาน server actions จริงอาจแตกต่างกันไปขึ้นอยู่กับเฟรมเวิร์ก)
"use server";

export async function registerUser(prevState, formData) {
 const name = formData.get('name');
 const email = formData.get('email');
 const password = formData.get('password');

 // การตรวจสอบอย่างง่าย
 if (!name) {
 return { message: 'จำเป็นต้องระบุชื่อ' };
 }
 if (!email || !email.includes('@')) {
 return { message: 'รูปแบบอีเมลไม่ถูกต้อง' };
 }
 if (!password || password.length < 8) {
 return { message: 'รหัสผ่านต้องมีความยาวอย่างน้อย 8 ตัวอักษร' };
 }

 // จำลองการลงทะเบียนผู้ใช้
 await new Promise(resolve => setTimeout(resolve, 1000)); // จำลองการเรียก API

 return { message: 'ลงทะเบียนสำเร็จ!' };
}

ตอนนี้ เรามาสร้างคอมโพเนนต์ React ที่ใช้ experimental_useFormState เพื่อจัดการฟอร์มและโต้ตอบกับ server action กัน

// RegistrationForm.jsx
'use client';

import React from 'react';
import { experimental_useFormState as useFormState } from 'react-dom';
import { registerUser } from './server-actions';

function RegistrationForm() {
 const [state, formAction] = useFormState(registerUser, { message: null });

 return (
 
  
   ชื่อ:
   
  
  
   อีเมล:
   
  
  
   รหัสผ่าน:
   
  
  
  {state?.message && {state.message}}
 
 );
}

export default RegistrationForm;

คำอธิบาย:

เรา import experimental_useFormState และ server action registerUser
useFormState(registerUser, { message: null }) เริ่มต้นการทำงานของ hook อาร์กิวเมนต์ตัวแรกคือ server action และตัวที่สองคือสถานะเริ่มต้น (initial state) ในกรณีนี้ สถานะเริ่มต้นมี property message ที่ตั้งค่าเป็น null
Hook จะคืนค่าเป็นอาร์เรย์ที่ประกอบด้วยสถานะปัจจุบัน (state) และฟังก์ชันสำหรับเรียก server action (formAction)
แอตทริบิวต์ action ขององค์ประกอบ <form> ถูกตั้งค่าเป็น formAction ซึ่งจะบอกให้ React ใช้ server action เมื่อฟอร์มถูกส่ง
state?.message จะถูกเรนเดอร์ตามเงื่อนไขเพื่อแสดงข้อความข้อผิดพลาดหรือข้อความแสดงความสำเร็จที่ส่งกลับมาจาก server action

เทคนิคการตรวจสอบขั้นสูง

แม้ว่าตัวอย่างก่อนหน้านี้จะแสดงการตรวจสอบขั้นพื้นฐาน แต่คุณสามารถรวมเทคนิคการตรวจสอบที่ซับซ้อนยิ่งขึ้นได้ นี่คือกลยุทธ์ขั้นสูงบางส่วน:

Regular Expressions:ใช้นิพจน์ทั่วไป (Regular expressions) เพื่อตรวจสอบรูปแบบที่ซับซ้อน เช่น หมายเลขโทรศัพท์, รหัสไปรษณีย์, หรือหมายเลขบัตรเครดิต ควรพิจารณาความแตกต่างทางวัฒนธรรมในรูปแบบข้อมูล (เช่น รูปแบบหมายเลขโทรศัพท์แตกต่างกันอย่างมากในแต่ละประเทศ)
ฟังก์ชันการตรวจสอบที่กำหนดเอง: สร้างฟังก์ชันการตรวจสอบของคุณเองเพื่อใช้ตรรกะการตรวจสอบที่ซับซ้อนยิ่งขึ้น ตัวอย่างเช่น คุณอาจต้องตรวจสอบว่าชื่อผู้ใช้ถูกใช้ไปแล้วหรือไม่ หรือรหัสผ่านตรงตามเกณฑ์ที่กำหนด (เช่น ความยาวขั้นต่ำ, อักขระพิเศษ)
ไลบรารีการตรวจสอบจากภายนอก: ใช้ประโยชน์จากไลบรารีการตรวจสอบจากภายนอก เช่น Zod, Yup, หรือ Joi เพื่อการตรวจสอบที่แข็งแกร่งและมีฟีเจอร์หลากหลาย ไลบรารีเหล่านี้มักจะมีการตรวจสอบตามสกีมา (schema-based) ทำให้ง่ายต่อการกำหนดและบังคับใช้กฎการตรวจสอบ

ตัวอย่าง: การใช้ Zod สำหรับการตรวจสอบ

Zod เป็นไลบรารีการประกาศสกีมาและการตรวจสอบที่เน้น TypeScript เป็นหลักและได้รับความนิยม มาลองผสาน Zod เข้ากับตัวอย่างฟอร์มลงทะเบียนของเรากัน

// server-actions.js
"use server";

import { z } from 'zod';

const registrationSchema = z.object({
 name: z.string().min(2, { message: "ชื่อต้องมีความยาวอย่างน้อย 2 ตัวอักษร" }),
 email: z.string().email({ message: "ที่อยู่อีเมลไม่ถูกต้อง" }),
 password: z.string().min(8, { message: "รหัสผ่านต้องมีความยาวอย่างน้อย 8 ตัวอักษร" }),
});

export async function registerUser(prevState, formData) {
 const data = Object.fromEntries(formData);

 try {
 const validatedData = registrationSchema.parse(data);

 // จำลองการลงทะเบียนผู้ใช้
 await new Promise(resolve => setTimeout(resolve, 1000)); // จำลองการเรียก API

 return { message: 'ลงทะเบียนสำเร็จ!' };
 } catch (error) {
 if (error instanceof z.ZodError) {
 return { message: error.errors[0].message };
 } else {
 return { message: 'เกิดข้อผิดพลาดที่ไม่คาดคิด' };
 }
 }
}

คำอธิบาย:

เรา import อ็อบเจกต์ z จากไลบรารี zod
เรากำหนด registrationSchema โดยใช้ Zod เพื่อระบุกฎการตรวจสอบสำหรับแต่ละฟิลด์ ซึ่งรวมถึงข้อกำหนดความยาวขั้นต่ำและการตรวจสอบรูปแบบอีเมล
ภายใน server action registerUser เราใช้ registrationSchema.parse(data) เพื่อตรวจสอบข้อมูลในฟอร์ม
หากการตรวจสอบล้มเหลว Zod จะโยน ZodError ออกมา เราดักจับข้อผิดพลาดนี้และส่งคืนข้อความแสดงข้อผิดพลาดที่เหมาะสมไปยัง client

ข้อควรพิจารณาด้านการเข้าถึง (Accessibility)

เมื่อทำการตรวจสอบความถูกต้องของฟอร์ม สิ่งสำคัญคือต้องคำนึงถึงการเข้าถึง (accessibility) ตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถใช้งานได้โดยผู้พิการ นี่คือข้อควรพิจารณาที่สำคัญบางประการ:

ข้อความแสดงข้อผิดพลาดที่ชัดเจนและสื่อความหมาย: ระบุข้อความแสดงข้อผิดพลาดที่ชัดเจนและอธิบายว่าเกิดอะไรขึ้นและจะแก้ไขได้อย่างไร ใช้แอตทริบิวต์ ARIA เพื่อเชื่อมโยงข้อความแสดงข้อผิดพลาดกับฟิลด์ฟอร์มที่เกี่ยวข้อง
การนำทางด้วยคีย์บอร์ด: ตรวจสอบให้แน่ใจว่าองค์ประกอบฟอร์มทั้งหมดสามารถเข้าถึงได้ด้วยคีย์บอร์ด ผู้ใช้ควรสามารถเลื่อนไปตามฟอร์มโดยใช้ปุ่ม Tab ได้
ความเข้ากันได้กับโปรแกรมอ่านหน้าจอ: ใช้ HTML เชิงความหมายและแอตทริบิวต์ ARIA เพื่อให้ฟอร์มของคุณเข้ากันได้กับโปรแกรมอ่านหน้าจอ โปรแกรมอ่านหน้าจอควรสามารถประกาศข้อความแสดงข้อผิดพลาดและให้คำแนะนำแก่ผู้ใช้ได้
ความคมชัดที่เพียงพอ: ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างสีข้อความและสีพื้นหลังในองค์ประกอบฟอร์มของคุณ ซึ่งมีความสำคัญอย่างยิ่งสำหรับข้อความแสดงข้อผิดพลาด
ป้ายกำกับฟอร์ม: เชื่อมโยงป้ายกำกับ (label) กับแต่ละฟิลด์อินพุตโดยใช้แอตทริบิวต์ `for` เพื่อเชื่อมต่อป้ายกำกับกับอินพุตอย่างถูกต้อง

ตัวอย่าง: การเพิ่มแอตทริบิวต์ ARIA เพื่อการเข้าถึง

// RegistrationForm.jsx
'use client';

import React from 'react';
import { experimental_useFormState as useFormState } from 'react-dom';
import { registerUser } from './server-actions';

function RegistrationForm() {
 const [state, formAction] = useFormState(registerUser, { message: null });

 return (
 
  
   ชื่อ:
   
   {state?.message && {state.message}}
  
  
   อีเมล:
   
   {state?.message && {state.message}}
  
  
   รหัสผ่าน:
   
   {state?.message && {state.message}}
  
  
 
 );
}

export default RegistrationForm;

คำอธิบาย:

aria-invalid={!!state?.message}: ตั้งค่าแอตทริบิวต์ aria-invalid เป็น true หากมีข้อความแสดงข้อผิดพลาด เพื่อบ่งชี้ว่าอินพุตไม่ถูกต้อง
aria-describedby="name-error": เชื่อมโยงอินพุตกับข้อความแสดงข้อผิดพลาดโดยใช้แอตทริบิวต์ aria-describedby
aria-live="polite": แจ้งให้โปรแกรมอ่านหน้าจอประกาศข้อความแสดงข้อผิดพลาดเมื่อปรากฏขึ้น

ข้อควรพิจารณาด้านการทำให้เป็นสากล (i18n)

สำหรับแอปพลิเคชันที่มุ่งเป้าไปที่ผู้ใช้ทั่วโลก การทำให้เป็นสากล (internationalization - i18n) เป็นสิ่งจำเป็น เมื่อทำการตรวจสอบความถูกต้องของฟอร์ม ให้พิจารณาประเด็น i18n ต่อไปนี้:

ข้อความแสดงข้อผิดพลาดที่แปลแล้ว: แสดงข้อความแสดงข้อผิดพลาดในภาษาที่ผู้ใช้ต้องการ ใช้ไลบรารีหรือเฟรมเวิร์ก i18n เพื่อจัดการการแปล
รูปแบบวันที่และตัวเลข: ตรวจสอบความถูกต้องของอินพุตวันที่และตัวเลขตาม locale ของผู้ใช้ รูปแบบวันที่และตัวคั่นตัวเลขแตกต่างกันอย่างมากในแต่ละประเทศ
การตรวจสอบที่อยู่: ตรวจสอบความถูกต้องของที่อยู่ตามกฎรูปแบบที่อยู่เฉพาะของประเทศของผู้ใช้ รูปแบบที่อยู่มีความแตกต่างกันอย่างมากทั่วโลก
การรองรับภาษาจากขวาไปซ้าย (RTL): ตรวจสอบให้แน่ใจว่าฟอร์มของคุณแสดงผลอย่างถูกต้องในภาษา RTL เช่น ภาษาอาหรับและฮีบรู

ตัวอย่าง: การแปลข้อความแสดงข้อผิดพลาด

สมมติว่าคุณมีไฟล์แปล (เช่น en.json, th.json) ที่มีข้อความแสดงข้อผิดพลาดที่แปลแล้ว

// en.json
{
 "nameRequired": "Name is required",
 "invalidEmail": "Invalid email address",
 "passwordTooShort": "Password must be at least 8 characters"
}

// th.json (ตัวอย่าง)
{
 "nameRequired": "จำเป็นต้องระบุชื่อ",
 "invalidEmail": "ที่อยู่อีเมลไม่ถูกต้อง",
 "passwordTooShort": "รหัสผ่านต้องมีความยาวอย่างน้อย 8 ตัวอักษร"
}

// server-actions.js
"use server";

import { z } from 'zod';
// สมมติว่าคุณมีฟังก์ชันสำหรับดึงค่า locale ของผู้ใช้
import { getLocale } from './i18n';
import translations from './translations';

const registrationSchema = z.object({
 name: z.string().min(2, { message: "nameRequired" }),
 email: z.string().email({ message: "invalidEmail" }),
 password: z.string().min(8, { message: "passwordTooShort" }),
});

export async function registerUser(prevState, formData) {
 const data = Object.fromEntries(formData);
 const locale = getLocale(); // ดึงค่า locale ของผู้ใช้
 const t = translations[locale] || translations['en']; // ใช้ภาษาอังกฤษเป็นค่าเริ่มต้น

 try {
 const validatedData = registrationSchema.parse(data);

 // จำลองการลงทะเบียนผู้ใช้
 await new Promise(resolve => setTimeout(resolve, 1000)); // จำลองการเรียก API

 return { message: t['registrationSuccessful'] || 'Registration Successful!' };
 } catch (error) {
 if (error instanceof z.ZodError) {
 return { message: t[error.errors[0].message] || 'Validation Error' };
 } else {
 return { message: t['unexpectedError'] || 'An unexpected error occurred.' };
 }
 }
}

ประโยชน์ของการตรวจสอบฝั่งเซิร์ฟเวอร์

ในขณะที่การตรวจสอบฝั่ง client มีความสำคัญในการให้ผลตอบรับแก่ผู้ใช้ทันที แต่การตรวจสอบฝั่งเซิร์ฟเวอร์นั้นมีความสำคัญอย่างยิ่งต่อความปลอดภัยและความสมบูรณ์ของข้อมูล นี่คือประโยชน์หลักบางประการของการตรวจสอบฝั่งเซิร์ฟเวอร์:

ความปลอดภัย: ป้องกันผู้ใช้ที่ไม่หวังดีจากการข้ามผ่านการตรวจสอบฝั่ง client และส่งข้อมูลที่ไม่ถูกต้องหรือเป็นอันตราย
ความสมบูรณ์ของข้อมูล: รับประกันว่าข้อมูลที่จัดเก็บในฐานข้อมูลของคุณถูกต้องและสอดคล้องกัน
การบังคับใช้ตรรกะทางธุรกิจ: ช่วยให้คุณสามารถบังคับใช้กฎทางธุรกิจที่ซับซ้อนซึ่งไม่สามารถทำได้ง่ายๆ ที่ฝั่ง client
การปฏิบัติตามข้อกำหนด: ช่วยให้คุณปฏิบัติตามกฎระเบียบด้านความเป็นส่วนตัวของข้อมูลและมาตรฐานความปลอดภัย

ข้อควรพิจารณาด้านประสิทธิภาพ

เมื่อใช้งาน experimental_useFormState ให้พิจารณาถึงผลกระทบด้านประสิทธิภาพของ server actions การใช้ server actions ที่มากเกินไปหรือไม่มีประสิทธิภาพอาจส่งผลต่อประสิทธิภาพของแอปพลิเคชันของคุณ นี่คือเคล็ดลับบางประการในการเพิ่มประสิทธิภาพ:

ลดการเรียก Server Action: หลีกเลี่ยงการเรียก server actions โดยไม่จำเป็น ใช้ Debounce หรือ throttle กับเหตุการณ์อินพุตเพื่อลดความถี่ของคำขอการตรวจสอบ
ปรับปรุงตรรกะของ Server Action: ปรับปรุงโค้ดภายใน server actions ของคุณเพื่อลดเวลาในการประมวลผล ใช้อัลกอริทึมและโครงสร้างข้อมูลที่มีประสิทธิภาพ
การแคช: แคชข้อมูลที่เข้าถึงบ่อยเพื่อลดภาระของฐานข้อมูลของคุณ
Code Splitting: ใช้ code splitting เพื่อลดเวลาในการโหลดเริ่มต้นของแอปพลิเคชันของคุณ
ใช้ CDN: ให้บริการไฟล์สถิต (static assets) จากเครือข่ายการจัดส่งเนื้อหา (CDN) เพื่อปรับปรุงความเร็วในการโหลด

ตัวอย่างการใช้งานจริง

มาดูสถานการณ์ในโลกแห่งความเป็นจริงที่ experimental_useFormState จะมีประโยชน์เป็นพิเศษ:

ฟอร์มชำระเงินใน E-commerce: ตรวจสอบความถูกต้องของที่อยู่จัดส่ง, ข้อมูลการชำระเงิน, และรายละเอียดการเรียกเก็บเงินในขั้นตอนการชำระเงินของ E-commerce
การจัดการโปรไฟล์ผู้ใช้: ตรวจสอบข้อมูลโปรไฟล์ผู้ใช้ เช่น ชื่อ, ที่อยู่อีเมล, และหมายเลขโทรศัพท์
ระบบจัดการเนื้อหา (CMS): ตรวจสอบการป้อนข้อมูลเนื้อหา เช่น บทความ, บล็อกโพสต์, และรายละเอียดสินค้า
แอปพลิเคชันทางการเงิน: ตรวจสอบข้อมูลทางการเงิน เช่น จำนวนเงินธุรกรรม, หมายเลขบัญชี, และ routing numbers
แอปพลิเคชันด้านการดูแลสุขภาพ: ตรวจสอบข้อมูลผู้ป่วย เช่น ประวัติทางการแพทย์, การแพ้ยา, และยาที่ใช้

แนวทางปฏิบัติที่ดีที่สุด (Best Practices)

เพื่อให้ได้ประโยชน์สูงสุดจาก experimental_useFormState ให้ปฏิบัติตามแนวทางที่ดีที่สุดเหล่านี้:

ทำให้ Server Actions มีขนาดเล็กและมุ่งเน้น: ออกแบบ server actions ให้ทำงานเฉพาะอย่าง หลีกเลี่ยงการสร้าง server actions ที่ซับซ้อนเกินไป
ใช้การอัปเดตสถานะที่มีความหมาย: อัปเดตสถานะของฟอร์มด้วยข้อมูลที่มีความหมาย เช่น ข้อความแสดงข้อผิดพลาดหรือตัวบ่งชี้ความสำเร็จ
ให้ผลตอบรับที่ชัดเจนแก่ผู้ใช้: แสดงผลตอบรับที่ชัดเจนและให้ข้อมูลแก่ผู้ใช้ตามสถานะของฟอร์ม
ทดสอบอย่างละเอียด: ทดสอบฟอร์มของคุณอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและจัดการกับทุกสถานการณ์ที่เป็นไปได้ ซึ่งรวมถึงการทดสอบหน่วย, การทดสอบการรวม, และการทดสอบแบบ end-to-end
อัปเดตอยู่เสมอ: ติดตามการอัปเดตล่าสุดและแนวทางปฏิบัติที่ดีที่สุดสำหรับ React และ experimental_useFormState

สรุป

Hook experimental_useFormState ของ React เป็นวิธีการที่ทรงพลังและมีประสิทธิภาพในการจัดการสถานะของฟอร์มและการตรวจสอบความถูกต้อง โดยเฉพาะอย่างยิ่งเมื่อใช้ร่วมกับ server actions ด้วยการใช้ hook นี้ คุณสามารถปรับปรุงตรรกะการจัดการฟอร์ม, เพิ่มประสบการณ์ผู้ใช้, และรับประกันความสมบูรณ์ของข้อมูลได้ อย่าลืมพิจารณาถึงการเข้าถึง, การทำให้เป็นสากล, และประสิทธิภาพเมื่อทำการตรวจสอบความถูกต้องของฟอร์ม โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถสร้างฟอร์มที่แข็งแกร่งและเป็นมิตรกับผู้ใช้ซึ่งช่วยยกระดับเว็บแอปพลิเคชันของคุณได้

ในขณะที่ experimental_useFormState ยังคงพัฒนาต่อไป การติดตามข่าวสารเกี่ยวกับการอัปเดตล่าสุดและแนวทางปฏิบัติที่ดีที่สุดจึงเป็นสิ่งสำคัญ เปิดรับฟีเจอร์ใหม่นี้และยกระดับกลยุทธ์การตรวจสอบความถูกต้องของฟอร์มของคุณไปอีกขั้น