Add ref to Fragment #32421
Add ref to Fragment #32421
Conversation
github-actions
bot
added
the
React Core Team
| _eventListeners: Array<StoredEventListener>, | ||
| parentInstance: Instance | Container, | ||
| appendChild(child: Element): void, | ||
| removeChild(child: Element): void, |
There was a problem hiding this comment.
appendChild/removeChild doesn't make much sense as publicly accessible APIs. A fragment doesn't even have a single parent and the children could be spread out.
It's also not something you should mess with in user space since it's an internal set which fragile semantics. E.g. this implementation doesn't preserve any kind of ordering guarantees.
There's no need for the internal methods to operate on these methods so they don't need to exist. Just have appendChildToFragmentInstance add to the _children Set directly.
| @@ -214,6 +218,25 @@ function getHostParentFiber(fiber: Fiber): Fiber { | |||
| ); | |||
| } | |||
|
|
|||
| export function getFragmentInstanceParent( | |||
| fiber: Fiber, | |||
| ): null | FragmentInstance { | |||
There was a problem hiding this comment.
It seems to me that there can be more than one parent Fragment. When I wrap a Component I shouldn't have to know whether or not there's another Fragment wrapping it. It seems like it's set up now, adding a Fragment would block parents from inspecting the insides - even by accident.
There was a problem hiding this comment.
There's kind of two approaches to this. One is to keep track of any mounted instances during the commit phase using an effect. That's basically what the current approach does. However, that has some perf considerations of doing that managing continuously as children get added or removed. Especially on a large set. It's also difficult to preserve document order which means that the current implementation basically has no consistent order. As things get added or removed, things end up basically random.
Another approach would be to keep track of the currently mounted Fiber and then traverse that Fiber when an operation is done. That way we only pay extra cost when you actually do one of the operations but each operation is slightly slower. A benefit of this is that document order is easy to preserve since the traversal is always in document order.
Document order can become important for things like focusing the first focusable element. Otherwise that can end up being random.
This API is experimental and subject to change or removal.
Fragment Refs
This PR extends React's Fragment component to accept a
refprop. The Fragment's ref will attach to a custom host instance, which will provide an Element-like API for working with the Fragment's host parent and host children.Here I've implemented
addEventListenerandremoveEventListenerto get started but we'll be iterating on this by adding additional APIs in future PRs. This sets up the mechanism to attach refs and track children. The FragmentInstance is implemented inreact-domhere but is planned for Fabric as well.The API works by targeting the first level of host children and proxying Element-like APIs to allow developers to manage groups of elements or elements that cannot be easily accessed such as from a third-party library or deep in a tree of Functional Component wrappers.
In this case, calling
fragmentRef.current.addEventListener()would apply an event listener toA,B, andD.Cis skipped because it is nested under the first level of Host Component. If another Host Component was appended as a sibling toA,B, orD, the event listener would be applied to that element as well and any other APIs would also affect the newly added child.This is an implementation of the basic feature to collect early feedback. There are still areas to explore regarding the timing of tracking/untracking children, adding listeners, and interactions with effects. As well as additional feature work on the FragmentInstance API methods.