Phản ứng useContext với “setState”

Question

Gần đây tôi đã bắt đầu sử dụng Context React Api với useContext Hook. Tôi đã quan sát thấy rằng khi chúng ta có một biến trạng thái tức là const someState = useState (trạng thái, setState), một số nhà phát triển chuyển trực tiếp setSate trong các giá trị của trình cung cấp và sau đó gọi nó trong các thành phần con. Đó có phải là một thực hành tốt?

Khi bạn không sử dụng ngữ cảnh, bạn phải tạo một trình xử lý để "truy cập" setState trong một thành phần con. Tôi vẫn đang sử dụng các hàm xử lý và chuyển chúng vào các giá trị của trình cung cấp để nhập chúng từ ngữ cảnh ở trẻ em.

Truyền setState trong ngữ cảnh có phải là một thủ đoạn tốt không? Tôi vẫn còn một số nghi ngờ vì thông thường bạn không thể chuyển setState trực tiếp vào một thành phần. Có bất kỳ sự khác biệt nào về hiệu suất hoặc bất kỳ nhược điểm nào khác mà tôi nên xem xét không?

Cảm ơn bạn.

Answer 1

Nếu tôi hiểu một cách chính xác thì sự khác biệt là theo một cách thì trạng thái được đặt từ thành phần mẹ và theo cách khác, trạng thái được đặt từ thành phần con. Đôi khi mọi người làm theo cách đó để tránh kết xuất vòng lặp với việc thay đổi trạng thái. Không có nhược điểm, nhưng sử dụng các hàm xử lý là cách thường xuyên.

Answer 2

Chỉnh sửa: Tôi thực sự nghĩ rằng tôi đã hiểu sai bạn, nhưng tôi không chắc. Câu trả lời của tôi có giá trị cho trường hợp nếu bạn viết nhà cung cấp của riêng bạn có trạng thái. Nếu bạn chỉ sử dụng một nhà cung cấp mặc định cung cấp một bộ cài đặt, tôi sẽ đồng ý với câu trả lời của Amel.

---

Cá nhân tôi sẽ không làm điều đó, nhưng đó là một loại thuốc phiện hơn. Tuy nhiên, giống như mọi khi, nó phụ thuộc khá nhiều vào mục tiêu bạn muốn đạt được.

Một khía cạnh tích cực của việc làm đó là, các bộ thiết lập trạng thái được cung cấp bởi useState luôn giữ nguyên cho mỗi lần kết xuất. Nếu bạn chuyển một giá trị tùy chỉnh, bạn nên tránh để nó thay đổi quá thường xuyên vì mọi thành phần lắng nghe thay đổi bằng useContext sẽ hiển thị.

Tôi vẫn muốn chuyển một đối tượng tùy chỉnh (ví dụ: đến từ useMemo để tránh các kết xuất không cần thiết) với một lệnh gọi lại để thiết lập trạng thái. Sẽ dễ dàng mở rộng hơn nếu bạn muốn cung cấp nhiều thứ hơn trong tương lai.

Một cái gì đó như thế này (ví dụ rất đơn giản, tất nhiên không có ý nghĩa như thế này, nó chỉ để hiểu):

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

Sẽ dễ dàng hơn để mở rộng mà không cần thay đổi mã ở mọi nơi mà ngữ cảnh được sử dụng. Tuy nhiên, tôi vẫn nghĩ rằng không có gì đặc biệt xấu khi chỉ vượt qua setter, nếu đó là điều bạn muốn đạt được.