01204223/react-components - ประวัติรุ่นแก้ไข

Jittat: /* ประเด็นการออกแบบอื่น ๆ */

2026-02-12T01:10:01Z

ประเด็นการออกแบบอื่น ๆ

Jittat: /* ทางเลือกอื่น ๆ */

2026-02-12T01:07:36Z

ทางเลือกอื่น ๆ

Jittat: /* ส่ง function สำหรับประมวลผล */

2026-02-12T01:02:08Z

ส่ง function สำหรับประมวลผล

Jittat: /* ส่ง function สำหรับประมวลผล */

2026-02-11T20:02:56Z

ส่ง function สำหรับประมวลผล

Jittat: /* ส่ง function สำหรับประมวลผล */

2026-02-11T20:01:35Z

ส่ง function สำหรับประมวลผล

Jittat: /* ส่ง function สำหรับประมวลผล */

2026-02-11T20:01:11Z

ส่ง function สำหรับประมวลผล

Jittat: /* ส่ง callback */

2026-02-11T19:59:57Z

ส่ง callback

Jittat: /* ตัดโค้ดไปสร้าง TodoItem.jsx */

2026-02-11T19:39:28Z

ตัดโค้ดไปสร้าง TodoItem.jsx

Jittat: /* ตัดโค้ดไปสร้าง TodoItem.jsx */

2026-02-11T19:33:45Z

ตัดโค้ดไปสร้าง TodoItem.jsx

Jittat: /* ตัดโค้ดไปสร้าง TodoItem.jsx */

2026-02-11T19:31:21Z

ตัดโค้ดไปสร้าง TodoItem.jsx

@@ แถว 322: / แถว 322: @@
 จากที่เราได้เขียนมา ยังมีหลายเรื่องที่เราสามารถปรับปรุงได้ แต่หลายเรื่องก็อาจจะไม่จำเป็น ซึ่งในการพัฒนาจริง เราจำเป็นจะต้องชั่งน้ำหนักความสะดวกในการแก้ไข กับกำลังที่เราต้องใส่ไปเพื่อทำอะไรสักอย่าง
-ตัวอย่างเช่น การแยก component ก็ต้องใช้เวลาเขียน ต้องเพิ่มโค้ดการเชื่อมต่อ ถ้าโปรแกรมเล็ก ๆ ก็อาจจะไม่จำเป็น แต่ถ้าโปรแกรมใหญ่ขึ้น การที่โค้ดแยกเป็นส่วนจะทำให้เราสามารถจัดการแก้ไขได้ง่าย
+ตัวอย่างเช่น:
-การอัพเดทในปัจจุบันเราจะ reload ทุก ๆ TodoItem จาก api  ถ้าเรามี TodoItem จำนวนมาก ๆ วิธีการนี้ก็ไม่น่าจะมีประสิทธิภาพเท่าใดนัก เราอาจจะต้องเพิ่มให้โหลด TodoItem ได้เป็นส่วน ๆ ซึ่งในกรณีนี้
+* การแยก component ก็ต้องใช้เวลาเขียน ต้องเพิ่มโค้ดการเชื่อมต่อ ถ้าโปรแกรมเล็ก ๆ ก็อาจจะไม่จำเป็น แต่ถ้าโปรแกรมใหญ่ขึ้น การที่โค้ดแยกเป็นส่วนจะทำให้เราสามารถจัดการแก้ไขได้ง่าย
-ในปัจจุบันเราเก็บ state ของทุก ๆ TodoItem ไว้ที่ App ผ่านตัวแปร state ตัวเดียว การแก้ไขจะทำให้เกิดการ render ทุก ๆ TodoItem ถ้าเราปรับให้สามารถโหลดหรือแก้ไข TodoItem ได้เป็นอัน ๆ ไป แต่ถ้าการปรับ state ทำผ่าน array เลย การทำงานในส่วน React UI จะซ้ำซ้อนและไม่ค่อยมีประสิทธิภาพ
+ประเด็นพวกนี้ ถ้าเราจะพัฒนาแอพที่ใหญ่หรือซับซ้อนขึ้น เป็นสิ่งที่เราจำเป็นต้องคำนึงถึงเสมอ  &nbsp;&nbsp;&nbsp; ไม่มีคำตอบที่ใช้ได้กับทุกบริบท หน้าที่ของนักพัฒนาคือการเลือกทางเลือกให้เหมาะสมตามความเข้าใจต่อลักษณะงานที่ทำ

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:07, 12 กุมภาพันธ์ 2569
แถว 318:		แถว 318:
	}}		}}

−	== ~~ทางเลือกอื่น~~ ๆ ==	+	== ประเด็นการออกแบบอื่น ๆ ==
		+
		+	จากที่เราได้เขียนมา ยังมีหลายเรื่องที่เราสามารถปรับปรุงได้ แต่หลายเรื่องก็อาจจะไม่จำเป็น ซึ่งในการพัฒนาจริง เราจำเป็นจะต้องชั่งน้ำหนักความสะดวกในการแก้ไข กับกำลังที่เราต้องใส่ไปเพื่อทำอะไรสักอย่าง
		+
		+	ตัวอย่างเช่น การแยก component ก็ต้องใช้เวลาเขียน ต้องเพิ่มโค้ดการเชื่อมต่อ ถ้าโปรแกรมเล็ก ๆ ก็อาจจะไม่จำเป็น แต่ถ้าโปรแกรมใหญ่ขึ้น การที่โค้ดแยกเป็นส่วนจะทำให้เราสามารถจัดการแก้ไขได้ง่าย
		+
		+	การอัพเดทในปัจจุบันเราจะ reload ทุก ๆ TodoItem จาก api ถ้าเรามี TodoItem จำนวนมาก ๆ วิธีการนี้ก็ไม่น่าจะมีประสิทธิภาพเท่าใดนัก เราอาจจะต้องเพิ่มให้โหลด TodoItem ได้เป็นส่วน ๆ ซึ่งในกรณีนี้
		+
		+	ในปัจจุบันเราเก็บ state ของทุก ๆ TodoItem ไว้ที่ App ผ่านตัวแปร state ตัวเดียว การแก้ไขจะทำให้เกิดการ render ทุก ๆ TodoItem ถ้าเราปรับให้สามารถโหลดหรือแก้ไข TodoItem ได้เป็นอัน ๆ ไป แต่ถ้าการปรับ state ทำผ่าน array เลย การทำงานในส่วน React UI จะซ้ำซ้อนและไม่ค่อยมีประสิทธิภาพ
		+
		+	ประเด็นพวกนี้ ถ้าเราจะพัฒนาแอพที่ใหญ่หรือซับซ้อนขึ้น เป็นสิ่งที่เราจำเป็นต้องคำนึงถึงเสมอ
		+
		+	ไม่มีคำตอบที่ใช้ได้กับทุกบริบท หน้าที่ของนักพัฒนาคือการเลือกทางเลือกให้เหมาะสมตามความเข้าใจต่อลักษณะงานที่ทำ

@@ แถว 315: / แถว 315: @@
 {{กล่องฟ้า|
-ถ้าทุกอย่างใช้งานได้ อย่าลืม commit งานที่ทำด้วย
+'''🄶''' ถ้าทุกอย่างใช้งานได้ อย่าลืม commit งานที่ทำด้วย
 }}
 == ทางเลือกอื่น ๆ ==

@@ แถว 251: / แถว 251: @@
 <syntaxhighlight>
-// แก้ในไฟล์ TodoItem.jsx
+// ** แก้ในไฟล์ TodoItem.jsx **
-function TodoItem({todo, toggleDone, deleteTodo, addNewComment}) {
+function TodoItem({todo, toggleDone, deleteTodo, addNewComment}) {    // เพิ่ม props
    // .. ละส่วนอื่นไว้
@@ แถว 272: / แถว 272: @@
 <syntaxhighlight>
-// แก้ในไฟล์ App.jsx
+// ** แก้ในไฟล์ App.jsx **
          {todoList.map(todo => (
@@ แถว 289: / แถว 289: @@
 <syntaxhighlight lang="javascript">
-   // แก้ในไฟล์ App.jsx
+   // ** แก้ในไฟล์ App.jsx **
    async function addNewComment(todoId, newComment) {     // เพิ่ม parameter
      try {

@@ แถว 238: / แถว 238: @@
+   }
 </syntaxhighlight>
 ถ้าเราอ่านโค้ดใน App.jsx เราจะพบว่าโค้ดเดิมมีการเรียกใช้ newComments จากภายในฟังก์ชัน &nbsp;&nbsp; การเขียนโค้ดในลักษณะดังกล่าวคือการใช้ side effect และจากตัวอย่างนี้เราจะเห็นว่าอาจสร้างความยุ่งยากในการปรับเปลี่ยนได้

@@ แถว 207: / แถว 207: @@
 </syntaxhighlight>
-== ส่ง callback ==
+== ส่ง function สำหรับประมวลผล ==
 == ทางเลือกอื่น ๆ ==

@@ แถว 163: / แถว 163: @@
 <syntaxhighlight>
 function TodoItem({todo}) {
    // เพิ่มบรรทัด
-   const [newComment, setNewComment] = React.useState("");             // เพิ่ม state newComment
+   const [newComment, setNewComment] = useState("");      // เพิ่ม state newComment
    // .. ละส่วนอื่นไว้