DEV Community

Polchompunoot Thongtaem Na Ayudhya
Polchompunoot Thongtaem Na Ayudhya

Posted on • Edited on

1 1

Select Component Ant Design 4.0 vs 3.0

ถ้าให้ย้อนความทรงจำว่าหันมาใช้ Ant Design ตอนไหน จำไม่ผิดน่าจะตอนที่ Bootstrap ออก version 4 ใหม่ๆ หลังจากนั้นก็ไม่เคยหันกลับไปหา Bootstrap อีกเลย นอกจากจะไปแก้งานของคนอื่นเท่านั้น ไม่นานมานี้ Ant Design ออก Version 4.0 เปลี่ยนแปลงหลายจุด ที่ชอบมากๆ ก็คงเป็น Form ตัวใหม่ ใช้ง่าย code clean ขึ้นเยอะและถ้าจะทำ Modal Form ก็ไม่ต้องใช้ Ref แล้ว ถูกใจเป็นที่สุด

ส่วนอีกตัวนึงที่จะไม่พูดถึงก็คงไม่ได้นั่นคือ Select Component ก็เอาไว้ทำ Dropdown ให้เลือกนู่นนี่แหละ โดยปกติแล้วเราก็ไม่ค่อยคิดอะไรมาก อยากให้เลือกอะไรก็ทำ array ยัดใส่เข้าไปเลย เยอะแค่ไหนก็ไม่สน มันพิมพ์ค้นหาได้อยู่แล้ว ตอน Version 3.0 พอ array เริ่มโตมากๆ กด Dropdown ทีนึงกว่าจะขึ้นมาให้ได้เลือกก็นิ่งไปสักพัก เป็นอะไรที่แย่มากๆ คิดไว้เสมอว่าเดี๋ยวต้องจัดการมันสักหน่อย (ซึ่งก็ไม่ทำอะไรอยู่ดีปล่อยมันไว้แบบนั้นแหละ 555+) อยู่ดีๆ Ant Design ก็ rewrite Select Component ใหม่มาให้เราได้ใช้กัน ซึ่งมันเร็วขึ้นมากกกกกกกกก รู้สึกดีใจที่ยังไม่ได้แก้ไขอะไรไป อิอิ ... มาลองดูกันดีกว่าว่ามันเร็วขึ้นแค่ไหน

Ant Design 3.0 - 1,000 items

ยัด array ไป 1,000 items กดทีนึงก็นิ่งไปนานกว่าจะขึ้นมาให้ได้เลือกใช้กัน

Ant Design 4.0 - 100,000 items

รอบนี้มาลอง 4.0 บ้าง เพื่อโชว์ความเทพจัดไป 100,000 items จะเห็นได้ว่ากดแล้วมาทันทีเลย ใครอยากลองมากกว่านี้ก็ไปลองกันเองได้เลยนะครับ ส่วนตัวผมถ้ามี item มากกว่านี้คงหนีให้ไปใช้วิธีอื่นดีกว่าครับ

ปิดท้าย

Ant Design 4.0 มี rewrite หลายตัวมาก ไม่ว่าจะเป็น Form, DatePicker, Tree, Select, TreeSelect, AutoComplete, Table และ Grid ก็มาใช้ flex layout แล้ว ซึ่งมันดีขึ้นหลายๆ อย่างแต่ก็แลกมาด้วย break change เพียบ

ใครอยากอ่าน document แบบละเอียดก็ตามไปอ่านได้ที่ link นี้เลยครับ

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay