reactjs / reactjs/react.dev

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

未關閉
#2,615 0 則留言 4 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
11.8k
分支
7.9k
平均合併
1 天 11 小時
30 天內合併 PR
11

描述

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);
  });

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

未指定 repository 檔案或測試。先查看 useImperativeHandle 和 forwardRef 文件、連結的 Stack Overflow 討論以及 StackBlitz 範例,以確定預期的指引內容。完成表示透過針對適當用法和替代方案的清楚、準確文件,解決列出的問題。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, react
領域
documentation
Issue 類型
文件
難度
5/5
預估耗時
一週以上
活躍度
停滯
描述清晰度
需要釐清
新手友好度
25/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。