В чем разница между возвратом React.Fragment или массива?

Question

Есть ли разница между возвращением React.Fragment

function Foo(){
    return (
        <>
            <div>hey</div>
            <div>hey</div>
        </>
    )
}

Или вернуть массив компонентов

function Bar(){
    return (
        [
            <div>hey</div>,
            <div>hey</div>,
        ]
    )
}

?

Вот, например, кодовый ящик.

Answer 1

Из документации React: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Использование нотации массива имеет некоторые сбивающие с толку отличия от обычного JSX:

Дочерние элементы в массиве должны быть разделены запятыми.

У дочерних элементов в массиве должен быть ключ, чтобы предотвратить ключевое предупреждение React.

Строки должны быть заключены в кавычки.

Итак, если вы хотите использовать второй пример, вам нужно будет присвоить каждому элементу key prop, и вы должны убедиться, что ваш список элементов разделен запятыми, если вы используете array.

Так, Fragments просто дайте более знакомый синтаксис против массивов