Các thành phần được kiểm soát React và các thành phần không được kiểm soát là gì?

100

Các thành phần được kiểm soát và các thành phần không được kiểm soát trong ReactJS là gì? Chúng khác nhau như thế nào?

reactjs react-component

— Xin
nguồn

Đề cử mở lại. Đó thực sự là một câu hỏi khá chính xác. Không chắc làm thế nào nó có thể được coi là quá rộng.

— Charlie Flowers

127

Điều này liên quan đến các thành phần DOM trạng thái (phần tử biểu mẫu) và các tài liệu React giải thích sự khác biệt:

Một phần điều khiển là một trong đó có giá trị hiện tại của mình thông qua propsvà thông báo thay đổi thông qua callbacks như onChange. Thành phần mẹ "điều khiển" nó bằng cách xử lý lệnh gọi lại và quản lý trạng thái của chính nó và chuyển các giá trị mới làm đạo cụ cho thành phần được điều khiển. Bạn cũng có thể gọi đây là một "thành phần câm".
Một phần không kiểm soát là một trong đó các cửa hàng nhà nước riêng của mình trong nội bộ, và bạn truy vấn DOM sử dụng refđể tìm giá trị hiện tại của nó khi bạn cần nó. Điều này giống HTML truyền thống hơn một chút.

Hầu hết các thành phần biểu mẫu React gốc hỗ trợ cả việc sử dụng có kiểm soát và không kiểm soát:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

Trong hầu hết (hoặc tất cả) trường hợp, bạn nên sử dụng các thành phần được kiểm soát .

— Aaron Beall
nguồn

Không phải là giá trị được thực hiện statehơn là props?

— Ivanka Todorova

@IvankaTodorova Đối với một thành phần được kiểm soát, giá trị được chuyển vào props. Một thành phần không được kiểm soát sẽ sử dụng stateđể kiểm soát giá trị nội bộ. Đây là điểm khác biệt chính.

— Aaron Beall

Sự khác biệt giữa chúng là các thành phần mà giá trị của chúng được đặt / truyền và có lệnh gọi lại được gọi là controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) so với HTML truyền thống trong đó một phần tử đầu vào xử lý giá trị của chính chúng và có thể được đọc qua hàm refsgọi uncontrolled components( <value type="text" />). Các thành phần được kiểm soát đang quản lý trạng thái của chính chúng thông qua setStatehoặc lấy nó từ thành phần mẹ của chúng làm đạo cụ.

— Lior Elrom

Làm thế nào bạn sẽ gọi một thành phần có được nó defaultValuethông qua các đạo cụ, nhưng nó lại thông báo cho bộ điều khiển onBlur?

— Paul Razvan Berg

@PaulRazvanBerg Điều đó nghe có vẻ giống như một mô hình phản đối, trạng thái nên được kiểm soát ở một nơi duy nhất . Thông thường bạn sẽ nâng trạng thái lên tổ tiên chung gần nhất.

— Aaron Beall

Các thành phần được kiểm soát thông báo cho các thành phần khác về những thay đổi bằng cách sử dụng lệnh gọi lại. Ví dụ: <Button onClick={() => console.log("clicked")}>Click</Button>.
Các thành phần không được kiểm soát không thông báo cho các thành phần khác về những thay đổi của chúng và bạn chỉ có thể truy cập thành phần bằng cách sử dụng ref-s. Tham chiếu có thể hữu ích nếu bạn cần truy cập dom thực của phần tử HTML

— shobe
nguồn