Введение
Представьте себе, что в мире 2023 года, когда вы входите в мир веб-разработки, вы часто будете слышать конфликтующие звуки тех, кто каждый день борется за понравившиеся им фреймворки или библиотеки вместе с новым фреймворком JavaScript (что вполне нормально в наши дни). )
для поиска работы и легкости в том, чтобы иметь семью (или семьи), чтобы кормить выбор «React» (или PHP) — вполне безопасный выбор
Да, но как насчет удовольствия от кодирования? сегодня я собираюсь рассказать о том, как я возвращаю радость написания веб-сайтов с помощью Svelte и сравниваю его с React!
Отказ от ответственности: эта запись в блоге является чистой предвзятостью, msg. добавлено, непрофессионально, и, самое главное, я просто новичок, которому нравится то, что я делаю, поэтому, пожалуйста, не принимайте это слишком серьезно, это только мое мнение. Я все еще люблю React и использую его ежедневно, но Svelte мне нравится… но если вы имейте что-то в виду, конструктивная критика была бы хороша 🙂
Еще один отказ от ответственности: этот блог предназначен для чтения всем, у кого есть базовые знания, поэтому я постараюсь избегать как можно большего количества причудливых слов, таких как согласование, изменчивость, наблюдатель, yada yada и многие другие, и т. д. ( ← Не знал, что написать, как в экзаменационной комнате…) , также этот блог сильно вдохновлен Fireship.io, пожалуйста, посмотрите этот прекрасный канал и курсы 😀
React Virtual DOM против Svelte REAL DOM
Поскольку React использует виртуальный DOM, код JavaScript требует, чтобы это было возможно, поэтому представьте, что для того, чтобы ваше простое приложение hello world работало, вам потребуется довольно много места для этого.
Когда вы вносите изменения в React, React сравнивает изменения и выполняет вычисления, чтобы свести к минимуму изменение DOM, а затем обновляет фактический DOM. Svelte, с другой стороны, скомпилировал код, а затем просто обновил реальный DOM, поэтому нет необходимости в таком количестве причудливых кодов Javascript для обнаружения изменений, поэтому в этом случае svelte должен быть быстрее для моего крошечного мозга.
«Но React был в этом мире так много лет вместе с сильно оптимизированным за эти годы, как Франкенштейн, так что кто знает // пожимает плечами».
useState против пусть
Состояние на самом деле является причиной, по которой многие люди используют эти Javascript-фреймворки в первую очередь, потому что люди слишком ленивы, чтобы отслеживать состояние, чтобы обновлять свои пользовательские интерфейсы вручную, поскольку ни у кого не было времени на такое количество фреймворков до того, как React пытается упростить шаги, но React дает пользователям гораздо более приятный способ справиться с состоянием в то время. в настоящее время React использует хук useState, который дает разработчикам массив геттеров и сеттеров, подобных этому
const [state, setState] = useState<yourTypeHere>(initialValue)
довольно прямо вперед, но вы можете спросить, почему? почему я не могу просто установить состояние на нужное мне значение, а затем пользовательский интерфейс просто волшебным образом обновится? ну Svelte получил вас в Svelte, вы просто объявляете значение, используя let вот так
let state = initialValue
и дд... Это делается без всякого пота, когда мы хотим изменить значение, мы просто переназначаем его вот так
state = “Hi there!”
все благодаря компилятору Svelte мы смогли написать меньше кода ~
Реквизит против экспорта пусть
В React мы передаем наши данные из родительского компонента в дочерний с помощью реквизита. Svelte, с другой стороны, использует экспорт перед переменной let, он также имеет синтаксический сахар, подобный этому.
//Child
export let myProp
//Parent
let myProp = "Hey hey!~"
<Child {myProp}/> // <-- this
Обратите внимание, что в Svelte вы не можете передать реквизит компонента, такой как React, поэтому я дам React небольшой выигрыш за это, но вы можете использовать ‹Slot/› в Svelte для передачи props.children, как в React.
Жизненный цикл
Известным вариантом использования было бы позволить моему компоненту впервые запуститься в React. В настоящее время мы используем useEffect с зависимостью пустого массива, подобной этой.
useEffect(() => {
const asyncFunc = async() => {}
asyncFunc()
}, [])
Обратите внимание, что это немного больно, что мы не можем выполнить ожидание в useEffect, и я считаю, что это не имеет никакого смысла, когда разработчик выполняет быструю прокрутку кода // React используется для выполнения componentWillMount или componentDidMount что-то вроде этого в эпоху компонентов класса, о котором я бы не стал говорить об этом, поскольку в настоящее время немногие люди используют его. Svelte, с другой стороны, просто использует onMount вот так (что немного красивее для чтения и различения)
onMount(async() => {
})
Реактивность useMemo против $
Чтобы переменная, которая будет вычисляться, зависела от других переменных в React, мы просто напечатаем ее так:
const [myNumber, setMyNumber] = useState<number>(1) //vs const doubleMe = myNumber * 2
Проблема с этим заключается в том, что он будет работать при каждом рендеринге, поэтому, если количество рендеров велико или вычисления дороги, вы можете захотеть обернуть его с помощью useMemo, чтобы сообщить React, когда вычислять это значение, когда зависимость изменяется следующим образом.
const [myNumber, setMyNumber] = useState<number>(1) const doubleMe = useMemo(() => myNumber * 2, [myNumber])
В то время как svelte — это круто, мы просто добавим знак доллара и двоеточие перед переменной, подобной этой.
let myNumber = 0 $: doubleMe = myNumber * 2
Теперь, когда число изменится, doubleMe также изменится, не нужно беспокоиться о том, что он будет работать в каждом рендере довольно круто и чисто, верно? ~.
Условный рендеринг
Это забавная часть в React, все это JavaScript, а JSX компилируется в код Babel в JS, в отличие от Svelte, когда вам нужно обернуть его в тернарный оператор, подобный этому.
{myNumber > 5 ? (<h1>More than 5</h1>) : <h1>Less than or Equal to 5</h1>}
Обратите внимание, что после оператора вам нужно заключить элементы, которые вы хотите отобразить, в круглые скобки, чтобы вернуть компонент JSX, например ‹h1› Более 5 ‹/h1› Я имею в виду, что на самом деле это неплохо, поскольку вы можете перейти к функции или другому компонент, чтобы вернуть их вот так
const FiveDecider = (num) => {
if(num > 5){
return <h1>More than 5</h1>
}
return <h1>Less than or Equal to 5</h1>
}
Это хорошо, красиво и чисто, но такой ленивый разработчик, как я, предпочел бы использовать Svelte, как если бы мы могли просто заключить его в скобку и точно знать, на что это похоже.
{#if myNumber > 5}
<h1>More than 5</h1>
{#else}
<h1>Less than or Equal to 5</h1>
{/if}
Циклы в React также труднее читать, поскольку они работают по принципу JS.
//React
const myNumbers = [1,2,3,4,5]
{myNumbers.map((myNumber) => {
return <h1>{myNumber}</h1>
})}
//Svelte
{#each myNumbers as myNumber}
<h1>{myNumber}</h1>
{/each}
Общее состояние
В React у нас так много библиотек для управления состоянием, как, например, жесткая Redux, полная шаблонов, и другие, такие как Redux Toolkit, Jotai и Zustand, которые я не буду вдаваться в подробности. С другой стороны, Svelte дает вам магазин, похожий на Observable в банде RX.
//store.js
import {writable} from "svelte/store"
export const countMyNumber = writable(0)
//app.svelte
<script>
import {countMyNumber} from "./store"
</script>
<button on:click={() => countMyNumber.update(myNumber => myNumber+1)}>
My number Is {countMyNumber}
</button>
обратите внимание, что у Svelte явно меньше шаблонов, также согласно Fireship (100% законно, поверьте мне, братан), он также автоматически отписывается, когда больше нет слушателя, что важно при работе в режиме реального времени.
Заключение
Svelte и React являются мощными фреймворками, в то время как React уже некоторое время присутствует в этой отрасли, совершенствуется и значительно оптимизируется за эти годы. Svelte является новым и решает многие болевые точки React. Спасибо, что прочитали это, потому что это мой первый сообщение в блоге, и хотя эта статья много критиковала React, как я сказал, у меня нет ненависти к React и его сообществу, любая конструктивная критика очень ценна для моего неопытного мозга xd.
Обратите внимание, что я все еще ежедневно использую React, даже на моем веб-сайте портфолио, так что не ненавидьте меня, лол, я вас всех люблю~
