Senior - Tại sao chúng ta có cả 2 loại input: có kiểm soát (controlled input) và không kiểm soát (uncontrolled input)?

{{FormatNumbertoThousand(model.total_like)}} lượt thích
321 lượt xem
Reactjs

Người phỏng vấn muốn thấy ở đây là một sự hiểu biết vững chắc về khái niệm React cơ bản. 

Một controlled input nhận 1 prop làm giá trị hiện tại của nó, và 1 prop là 1 callback để thay đổi giá trị đó, nó là một “React way”:

<input type="text" value={value} onChange={this.handleChange} />

Một uncontrolled input lưu giá trị của nó bên trong, sử dụng DOM API.

ở đây chúng ta không dùng value và onChange, mà dùng ref():

<input type="text" ref={this.textInput} />

bây giờ chúng ta có thể truy xuất giá trị của nó như sau:

this.textInput.current.value

Người phỏng vấn muốn được nghe nhiều thứ hơn: có bất kì props nào để sử dụng các uncontrolled component không, có sự khác biệt nào về hiệu suất không?

Cá nhân tôi chưa từng sử dụng các uncontrolled input, nhưng nếu các bạn đang học React hoặc phải tích hợp React vào các mã không phải React thì nó có thể cần thiết.

Với cách dùng controlled input thì dữ liệu của bạn (state) và UI (inputs) luôn đồng bộ với nhau, nghĩa là bạn phải cập nhật state của component, điều đó sẽ kích hoạt tiến trình “React reconciliation”.

Còn với cách dùng uncontrolled input thì không cần điều đó, bạn chỉ giữ giá trị input bên trong phần tử DOM của input đó.

 

Một số chủ đề thú vị có thể bạn thích:

- Giới thiệu useState và useEffect-useRef trong React Hooks

{{login.error}}