reactjs / reactjs/react.dev

When would we use "useImperativeHandle" in ReactJs' hooks?

Đang mở
#2,615 0 bình luận 4 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
11

Mô tả

I am trying to understand what ReactJs' team expects from developers when using the useImperativeHandle's method. Currently the documentation indicates that:

imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef.
Does this means it is good practice to use useImperativeHandle with forwardRef ? When would we use useImperativeHandle typically?
More specifically, in this discussion on stackoverflow about how calling child's methods from parents , someone provided this answer which propose to use useImperativeHandle . Then some comments argued that this is not good practice:

This is not really a good pattern. {...} It's better to pass props into the child component and then have a button click in the parent change the parent's state, and pass a state item into the child which will trigger the child's componentWillReceiveProps, and use that as a trigger.
No, it's not usually the best pattern, it's more of an escape hatch when you need it, and should be used only in emergencies.{...}

I would we make the things limpid for everyone, so here my specifics questions:

  • Is it good practice to use useImperativeHandle with forwardRef ?

  • When would we use useImperativeHandle typically?

  • Can we, or not, safely use useImperativeHandle for the convenience of easily communicate properties and methods to the childs' parents?

  • Why the documentation say that imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef.?

  • What are the information to know to make an educated decision about the usage of useImperativeHandle?

  • lastly, is it safer, safe, and even a good practice to use the useEffect's method to communicate element to parents, like in the following demo, here a relevant's snippet:


 useEffect(() => {
    ref.current = { componentState }; // get a forwardRef's reference, then transmit some state to parent by modifying the reference
    validateChildren(ref.current.componentState.two);
  });

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Không có tệp repository hoặc test nào được nêu tên. Hãy bắt đầu bằng cách xem lại tài liệu về useImperativeHandle và forwardRef, thảo luận Stack Overflow được liên kết và ví dụ StackBlitz để xác định hướng dẫn dự kiến. Được xem là hoàn thành khi các câu hỏi được liệt kê được giải quyết bằng tài liệu rõ ràng, chính xác về cách sử dụng phù hợp và các phương án thay thế.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react
Lĩnh vực
documentation
Loại issue
Tài liệu
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.