When would we use "useImperativeHandle" in ReactJs' hooks?
還沒有人認領這個 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.
useImperativeHandleshould be used with forwardRef.
Does this means it is good practice to useuseImperativeHandlewithforwardRef? When would we useuseImperativeHandletypically?
More specifically, in this discussion on stackoverflow about how calling child'smethodsfrom parents , someone provided this answer which propose to useuseImperativeHandle. Then some comments argued that this is not good practice:
This is not really a good pattern. {...} It's better to pass
propsinto the child component and then have a button click in the parent change the parent'sstate, and pass astateitem into the child which will trigger the child'scomponentWillReceiveProps, 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
useImperativeHandlewithforwardRef? -
When would we use
useImperativeHandletypically? -
Can we, or not, safely use
useImperativeHandlefor the convenience of easily communicatepropertiesandmethodsto 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);
});
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
未指定 repository 檔案或測試。先查看 useImperativeHandle 和 forwardRef 文件、連結的 Stack Overflow 討論以及 StackBlitz 範例,以確定預期的指引內容。完成表示透過針對適當用法和替代方案的清楚、準確文件,解決列出的問題。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- documentation
- Issue 類型
- 文件
- 難度
- 5/5
- 預估耗時
- 一週以上
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100