When unmounting a Fragment node, it's children are removed from the DOM one at a time instead of all at once

madou
创建于
2018-04-24 23:54:56

Do you want to request a feature or report a bug?

Bug (maybe! - or perhaps it's just a limitation of Fragments - let me know!)

What is the current behavior?

When unmounting a Fragment, it's children are removed from the DOM one at time top to bottom.

This means if during the unmounting step if I'm quickly calculating where it is in the DOM, its position can change before I can save that data. I also imagine it's less performant.

Look in your console for the outputs for these.

1a) Using Fragment - Element can be found:
https://codesandbox.io/s/k9jl6vo8yv

1b) Using Fragment - Element can't be found:
https://codesandbox.io/s/1omjz1m8l

2a) Using div - Element can be found (expected behaviour for Fragment):
https://codesandbox.io/s/l34o1kw8m

2b) Using div - Element can't be found (when switching out parent with children, with parent with no children):
https://codesandbox.io/s/w02yv3o4zw

What is the expected behavior?

  1. That both the Fragments children would be removed from the DOM at the same time, instead of one after the other.

  2. That both children of the div would be removed from the DOM at the same time when essentially removing the children.

These both look like they're part of the same problem.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.3, unsure if it worked in previous versions.


Let me know if I can help with anything :).

Cheers

3条回答
gaearon
回复于
2018-04-25 18:22:09
#1

Can you clarify what "at the same time" means? How do you imagine this happening with DOM APIs from React's side?

madou
回复于
2018-04-25 21:52:31
#2
gaearon
回复于
2018-08-02 19:29:11
#3

The order in which siblings are handled is an implementation detail. I suggest not to depend on it in your code.

当前位于第1页,总计3 条回复

推荐相似问题

Build Failing with: 'Error: Cannot find module 'react/src/ReactCurrentOwner'

Do you want to request a feature or report a bug? report a bug What is the current behavior? I've cloned the repo onto m
讨论数 4
react
创建时间:2018-04-24 16:02:20

"Undefined variable: performance" in react-dom for Opera Mini browsers

Do you want to request a feature or report a bug? bug What is the current behavior? When loading babel-polyfill before r
讨论数 4
react
创建时间:2018-04-24 12:52:02

Passing all props from a parent to children looks screwed up

Do you want to request a feature or report a bug? I guess a bug. What is the current behavior? I want to wrap children i
讨论数 4
react
创建时间:2018-04-24 10:48:16

Could hydrate stop modify the content of component, just binding events?

Since my web application run PHP server as backend, I cannot use ReactDOMServer. With lots of restrictions and conventio
讨论数 2
react
创建时间:2018-04-24 10:11:52

`TypeError: 'undefined' is not a function (evaluating 'n.startsWith(e)')` & `React` & `AntD`

TypeError: 'undefined' is not a function (evaluating 'n.startsWith(e)') & React & AntD report a bug? TypeError: 'undefin
讨论数 13
react
创建时间:2018-04-24 06:22:01

validateDOMNesting incorrectly validates table children

Do you want to request a feature or report a bug? bug What is the current behavior? validateDOMNesting shows warning whe
讨论数 2
react
创建时间:2018-04-24 05:30:14

Duplicated key in list has strange behavior!

I have a list which has duplicated items. From the document, key must be unique, but I'm not sure why React concatenates
讨论数 2
react
创建时间:2018-04-24 01:44:26

Improve warning message for failure to initialize `state` when using `getDerivedStateFromProps`

Do you want to request a feature or report a bug? bug What is the current behavior? The warning for a failure to initial
讨论数 5
react
创建时间:2018-04-23 15:29:28

Cannot detect any clicks on elements inside google map infowindow; React

I have created a div element inside a google map infowindow using reactDomServer.renderToString and am trying to registe
讨论数 3
react
创建时间:2018-04-22 09:34:12

Get State Of Parent From Child (without passing state as props)

Is it true to get state (and all of its methods) of parent component from child using this keyword? class App extends Co
讨论数 3
react
创建时间:2018-04-22 09:24:37