{"id":4131,"date":"2024-08-05T18:43:40","date_gmt":"2024-08-05T11:43:40","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=4131"},"modified":"2024-08-05T18:43:40","modified_gmt":"2024-08-05T11:43:40","slug":"nham-lan-ve-uncontrolled-vs-controller-component","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/nham-lan-ve-uncontrolled-vs-controller-component.html","title":{"rendered":"B\u1ea1n \u0111\u00e3 t\u1eebng nh\u1ea7m l\u1eabn v\u1ec1 2 kh\u00e1i ni\u1ec7m Uncontrolled vs Controller component trong ReactJs?"},"content":{"rendered":"<h1><b>Uncontrolled vs Controller components trong ReactJs<\/b><\/h1>\n<h2><strong>B\u1ed1i c\u1ea3nh 1: Qu\u1ea3n l\u00fd State v\u00e0 Props<\/strong><\/h2>\n<h3><strong>Controlled Components<\/strong>:<\/h3>\n<ul>\n<li><strong>\u0110\u1ecbnh ngh\u0129a<\/strong>: Controlled Components l\u00e0 nh\u1eefng th\u00e0nh ph\u1ea7n m\u00e0 gi\u00e1 tr\u1ecb v\u00e0 h\u00e0nh vi c\u1ee7a ch\u00fang ho\u00e0n to\u00e0n ph\u1ee5 thu\u1ed9c v\u00e0o props v\u00e0 s\u1ef1 ki\u1ec3m so\u00e1t c\u1ee7a component cha.<\/li>\n<li><strong>\u01afu \u0111i\u1ec3m<\/strong>: Gi\u00fap qu\u1ea3n l\u00fd tr\u1ea1ng th\u00e1i m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng v\u00e0 nh\u1ea5t qu\u00e1n t\u1eeb m\u1ed9t n\u01a1i duy nh\u1ea5t.<\/li>\n<li><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong>: C\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn vi\u1ec7c t\u1ea1o ra nhi\u1ec1u props h\u01a1n v\u00e0 ph\u1ee9c t\u1ea1p h\u00f3a component cha.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31184759\/Screenshot-2024-07-31-at-18.46.40-300x222.png\" alt=\"Controller component\" width=\"300\" height=\"222\" class=\"aligncenter wp-image-4133 size-medium\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31184759\/Screenshot-2024-07-31-at-18.46.40-300x222.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31184759\/Screenshot-2024-07-31-at-18.46.40-1024x756.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31184759\/Screenshot-2024-07-31-at-18.46.40-768x567.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31184759\/Screenshot-2024-07-31-at-18.46.40.png 1194w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<div><\/div>\n<div>\n<h3><strong>Uncontrolled Components<\/strong>:<\/h3>\n<ul>\n<li><strong>\u0110\u1ecbnh ngh\u0129a<\/strong>: Uncontrolled Components th\u01b0\u1eddng l\u00e0 c\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a ch\u00fang \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi ch\u00ednh c\u00e1c state c\u1ee7a ch\u00fang.<\/li>\n<li><strong>\u01afu \u0111i\u1ec3m<\/strong>: D\u1ec5 d\u00e0ng h\u01a1n \u0111\u1ec3 thi\u1ebft l\u1eadp v\u00e0 kh\u00f4ng y\u00eau c\u1ea7u nhi\u1ec1u c\u1ea5u h\u00ecnh t\u1eeb component cha.<\/li>\n<li><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong>: Kh\u00f3 kh\u0103n h\u01a1n trong vi\u1ec7c \u0111\u1ed3ng b\u1ed9 tr\u1ea1ng th\u00e1i gi\u1eefa c\u00e1c component.<\/li>\n<\/ul>\n<h1><b><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31183906\/uncontrolled_component-300x215.png\" alt=\"Uncontrolled component.\" width=\"300\" height=\"215\" class=\"aligncenter wp-image-4132 size-medium\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31183906\/uncontrolled_component-300x215.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31183906\/uncontrolled_component-1024x734.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31183906\/uncontrolled_component-768x551.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/07\/31183906\/uncontrolled_component.png 1054w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/b><\/h1>\n<\/div>\n<h2>B\u1ed1i c\u1ea3nh 2: Qu\u1ea3n l\u00fd Form v\u00e0 Input<\/h2>\n<p>\u1ede ph\u1ea7n n\u00e0y, n\u1ebfu g\u1ecdi l\u00e0 trong b\u1ed1i c\u1ea3nh <strong>qu\u1ea3n l\u00fd form v\u00e0 input<\/strong> th\u00ec c\u0169ng kh\u00f4ng ho\u00e0n to\u00e0n \u0111\u00fang, \u0111\u00fang h\u01a1n l\u00e0 qu\u1ea3n l\u00fd th\u00f4ng tin v\u1edbi\u00a0<span><strong>useRef<\/strong> hay <strong>useState<\/strong>. M\u00ecnh g\u1ecdi b\u1ed1i c\u1ea3nh n\u00e0y l\u00e0 &#8220;qu\u1ea3n l\u00fd form v\u00e0 input&#8221; v\u00ec m\u00ecnh th\u01b0\u1eddng th\u1ea5y n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng nhi\u1ec1u trong h\u1ee3p l\u00e0m vi\u1ec7c v\u1edbi form.<\/span><\/p>\n<h3><strong>Controlled Components<\/strong>:<\/h3>\n<ul>\n<li><strong>\u0110\u1ecbnh ngh\u0129a<\/strong>: Gi\u00e1 tr\u1ecb c\u1ee7a c\u00e1c input \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi state c\u1ee7a ch\u00ednh component \u0111\u00f3 (n\u00f3 gi\u1ed1ng ho\u00e0n to\u00e0n v\u1edbi \u0111\u1ecbnh ngh\u0129a v\u00e0 <strong>uncontroller components<\/strong> trong b\u1ed1i c\u1ea3nh 1.<\/li>\n<li><strong>\u01afu \u0111i\u1ec3m<\/strong>: Cho ph\u00e9p ki\u1ec3m so\u00e1t ho\u00e0n to\u00e0n gi\u00e1 tr\u1ecb c\u1ee7a input v\u00e0 ph\u1ea3n \u1ee9ng ngay l\u1eadp t\u1ee9c v\u1edbi thay \u0111\u1ed5i m\u00e0 kh\u00f4ng c\u1ea7n qu\u00e1 nhi\u1ec1u x\u1eed l\u00fd d\u00e0i d\u00f2ng.<\/li>\n<li><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong>: C\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn nhi\u1ec1u render kh\u00f4ng c\u1ea7n thi\u1ebft, n\u1ebfu c\u00f3 qu\u00e1 nhi\u1ec1u state kh\u00f4ng \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd t\u1ed1t.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/08\/01181026\/Screenshot-2024-08-01-at-18.09.51-300x131.png\" alt=\"Controller component (b\u1ed1i c\u1ea3nh component s\u1eed d\u1ee5ng trong form)\" width=\"300\" height=\"131\" class=\"aligncenter wp-image-4135 size-medium\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/08\/01181026\/Screenshot-2024-08-01-at-18.09.51-300x131.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/08\/01181026\/Screenshot-2024-08-01-at-18.09.51-1024x448.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/08\/01181026\/Screenshot-2024-08-01-at-18.09.51-768x336.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/08\/01181026\/Screenshot-2024-08-01-at-18.09.51.png 1130w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3><strong>Uncontrolled Components<\/strong>:<\/h3>\n<ul>\n<li><strong>\u0110\u1ecbnh ngh\u0129a<\/strong>: C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a c\u00e1c input \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi <span><strong>useRef<\/strong>.<\/span><\/li>\n<li><strong>\u01afu \u0111i\u1ec3m<\/strong>: Kh\u00f4ng c\u1ea7n ph\u1ea3i re-render m\u1ed7i khi gi\u00e1 tr\u1ecb input thay \u0111\u1ed5i.<\/li>\n<li><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong>: Kh\u00f3 kh\u0103n h\u01a1n trong vi\u1ec7c \u0111\u1ed3ng b\u1ed9 tr\u1ea1ng th\u00e1i v\u00e0 qu\u1ea3n l\u00fd c\u00e1c thay \u0111\u1ed5i gi\u00e1 tr\u1ecb input. Ph\u1ea3i code nhi\u1ec1u \u0111\u1ec3 x\u1eed l\u00fd khi c\u1ea7n c\u00e1c gi\u00e1 tr\u1ecb t\u1eeb input (g\u1ea7n nh\u01b0 l\u00e0 ph\u1ea3i x\u1ee9 l\u00fd th\u1ee7 c\u00f4ng v\u1edbi DOM nh\u01b0 web truy\u1ec1n th\u1ed1ng).<\/li>\n<\/ul>\n<p>Theo c\u00e1 nh\u00e2n m\u00ecnh th\u00ec nh\u1eefng kh\u00e1i ni\u1ec7m n\u00e0y kh\u00f4ng b\u1eaft bu\u1ed9c ch\u00fang ta ph\u1ea3i tu\u00e2n th\u1ee7 ho\u00e0n to\u00e0n (t\u00ecm hi\u1ec3u th\u00eam trong t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c c\u1ee7a <a href=\"https:\/\/react.dev\/learn\/sharing-state-between-components#controlled-and-uncontrolled-components\" target=\"_blank\" rel=\"noopener\">React<\/a>), m\u00e0 n\u00f3 ch\u1ec9 nh\u1ea7m m\u1ee5c \u0111\u00edch gi\u00fap ch\u00fang ta l\u00e0m r\u00f5 h\u01a1n v\u1ec1 ch\u00fang \u0111\u1ec3 tr\u00e1nh hi\u1ec3u l\u1ea7m khi l\u00e0m vi\u1ec7c c\u00f9ng nhau. X\u00e9t theo tr\u01b0\u1eddng h\u1ee3p trong b\u1ed1i c\u1ea3nh 1, khi l\u00e0m vi\u1ec7c trong d\u1ef1 \u00e1n th\u1ef1c t\u1ebf th\u1ea5y r\u1eb1ng c\u00e1c component nh\u01b0 c\u00e1c input, button, label, title, &#8230; th\u01b0\u1eddng s\u1ebd l\u00e0 c\u00e1c uncontrolled components. C\u00e1c component nh\u01b0 Form, Table th\u01b0\u1eddng s\u1ebd l\u00e0 Controlled components. T\u00f9y nhu c\u1ea7u s\u1eed d\u1ee5ng m\u00e0 b\u1ea1n l\u1ef1a ch\u1ecdn sao cho linh \u0111\u1ed9ng ph\u00f9 h\u1ee3p khi tri\u1ec3n khai d\u1ef1 \u00e1n.<\/p>\n<p>B\u00ean tr\u00ean l\u00e0 kh\u00e1i ni\u1ec7m v\u1ec1 Controlled and uncontrolled components trong c\u00e1c b\u1ed1i c\u1ea3nh kh\u00e1c nhau. C\u1ea3m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 d\u00e0nh th\u1eddi gian \u0111\u1ecdc b\u00e0i, n\u1ebfu c\u00f3 \u00fd ki\u1ebfn b\u1ea1n h\u00e3y b\u00ecnh lu\u1eadn b\u00ean d\u01b0\u1edbi nh\u00e1. C\u00f2n nhi\u1ec1u b\u00e0i vi\u1ebft kh\u00e1c v\u1ec1 c\u00f4ng ngh\u1ec7, h\u00e3y truy c\u1eadp \u0111\u01b0\u1eddng <a href=\"https:\/\/www.marketenterprise.vn\/blog\/category\/technology\">link<\/a> \u0111\u1ec3 xem th\u00eam n\u00e0o.<\/p>\n<div id=\"eJOY__extension_root\" class=\"eJOY__extension_root_class\" style=\"all: unset;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Trong React, khi n\u00f3i v\u1ec1 Controlled v\u00e0 Uncontrolled Components c\u00f3 th\u1ec3 n\u00f3i trong hai b\u1ed1i c\u1ea3nh sau:<\/p>\n","protected":false},"author":37,"featured_media":4136,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/4131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=4131"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/4131\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/4136"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=4131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=4131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=4131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}