LINUX.ORG.RU

Почему в react всегда используют getElementById?

 , ,


0

1

Почему всегда используют getElementById на реакте? Почему бы не использовать querySelector?

В чем прикол ссылаться по id?

ReactDOM.render(<App />, document.getElementById("app"))

А нельзя ли так сделать?

ReactDOM.render(<App />, document.querySelector("app"))
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>App</title>
</head>
<body>
  <div class="app"></div>
</body>
</html>
Deleted

Потому что в твоём случае сработает document.querySelector("div").

Странный вопрос, кмк, ты не совсем понимаешь в чем разница между getElementById и querySelector, и чем отличается id от class и от selector.

vvn_black ★★★★★ ()
Последнее исправление: vvn_black (всего исправлений: 1)
Ответ на: комментарий от anonymous

Ну это да. Но я не думал что во времена, где, внимание, везде повальный фреймворк на фреймоворке динамически строит фреймворк фреймворков кто-то там думает о такой экономии на спичках.

anonymous ()
Ответ на: комментарий от anonymous

Ясно. Спасибо за пояснения. А вы ставите точку запятую в любых выражениях react. Некоторые не ставят а некоторые обязательно ставят.

Без:

import React from "react"
import ReactDOM from "react-dom"

import Header from './components/Header'
import Footer from './components/Footer'

import "./styles/app.css"

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

С точкой запятой:

import React from "react";
import ReactDOM from "react-dom";

import Header from './components/Header';
import Footer from './components/Footer';

import "./styles/app.css";

function App() {
  return (
    <div>
      <Header />;
      <Footer />;
    </div>
  )
};

ReactDOM.render(
  <App />,
  document.getElementById("app")
);
Deleted ()
Ответ на: комментарий от Deleted

Он тебе укажет на то, где твой код не соответствует стандартам. Для WebStorm или VSCode наверняка есть плагины, которые красным цветом тебе выделят, если ты где-то что-то забыл или лишнее написал.

dimuska139 ()
Ответ на: комментарий от Deleted

Я с реактом вообще не работал никогда. Точка с запятой, насколько знаю, это феномен чисто яваскрипта.

То есть вопрос должен ставиться так: «Где в Яваскрипте нужна запятая, а где не нужна?»

Например, нашлось при быстром поиске в гугле:

anonymous ()

А нафига в тегах вопроса ES6? Что в показанном примере ES6-специфично?

По сабжу — зависит от браузерного движка (см. бенчмарк). В фоксе querySelector срабатывает даже чуть быстрее getElementById, потому как последний уже давно через первый эмулируется. В хроме же это независимые сущности, поэтому getElementById быстрее ровно в два раза.

P.S. Естественно, замеры были запущены на Firefox 69 и Chrome 77, я же не некрофил.

rebforce ()
Последнее исправление: rebforce (всего исправлений: 1)
Ответ на: комментарий от rebforce

Не плохо ты так затраллил лалок. Ставить точку с запятой в конце на автомате — хорошая практика. А то в CSS забудешь это сделать и получить неожиданный результат.

CryNet ★★★★ ()
Ответ на: комментарий от CryNet

Глядя на логотип Арча, хотя по идее там арка, не могу перестать видеть в нем перо от перьевой ручки.

Перьевая ручка → Школота.

Ничего личного. Я просто про их лого.

anonymous ()

В js точка с запятой в конце не нужна в 99% случаев.

Нафига тогда ее вообще ставить? Без нее и меньше кнопок давить, и выглядит код чище.

В некоторых ситуациях она нужна, но таких ситуаций мало и их можно избегать.

anonymous ()
Ответ на: комментарий от annulen

Всё с точностью до наоборот. Именно те, кто вдупляет, как работает парсер JS и какой приоритет у разделителей выражений, знают, что точка с запятой в конце строки обязательна в единичных случаях (например, если следующее выражение начинается со скобки). А все эти дауноориентированные конвенции с обязательной ; в конце, превращающие JS из нормального ЯП в очередное подобие си или жабы, как раз призваны упростить жизнь всяким макакам, которые JS не владеют, но писать на нём хотят.

rebforce ()
Ответ на: комментарий от CryNet

При чём здесь вообще CSS? Хотя даже в случае с CSS надо мыслить не строками, а выражениями. Последнее выражение перед закрытием стилевого блока, кстати, тоже не требует точки с запятой.

rebforce ()
Ответ на: комментарий от dimuska139

Там это написано ровно по той же причине: облегчить жизнь макакам, не умеющим думать выражениями.

И да, единственным авторитетным источником в данном контексте является стандарт ECMAScript. И если бы по нему перед входом в индустрию существовал обязательный мировой экзамен, во многих подобных макакогайдлайнах просто отпала бы необходимость. А к «авторитетам» в виде людей или корпораций апеллирует только стадо, не имеющее своей головы на плечах.

rebforce ()
Ответ на: комментарий от rebforce

Учитывая что сейчас все обмазано бабелями и scss-ами в целом пофигу как писать, один хрен будет транслироваться. Так что пишут так как удобнее в рамках конкретной команды. Это просто не влияет ни на что кроме восприятия кода глазами.

TDrive ★★★★★ ()
Ответ на: комментарий от rebforce

При чём здесь вообще CSS?

Ставить точку с запятой в конце на автомате — хорошая практика

Потому, что, например

в CSS забудешь это сделать и получить неожиданный результат

CryNet ★★★★ ()
Последнее исправление: CryNet (всего исправлений: 1)
Ответ на: комментарий от TDrive

Учитывая что сейчас все обмазано бабелями и scss-ами

И это печально. Хорошо, когда надо поддерживать только актуальные версии адекватных браузеров (в моём случае речь вообще о NodeJS идёт). Остальным соболезную.

кроме восприятия кода глазами

Ну, у любителей обмазаться сятинкой от точек с запятой в глазах, видимо, не рябит.

rebforce ()
Ответ на: комментарий от CryNet

Ещё раз: при чём здесь CSS? Если кто-либо полез в индустрию и при этом не может отличить одно от другого и на автомате применяет к CSS то, что применимо только к JS, ему срочно надо посетить проктологоанатома и эвтаназиолога.

rebforce ()
Последнее исправление: rebforce (всего исправлений: 2)
Ответ на: комментарий от anonymous

На спичках? Все эти фреймворки и так не гоночные рысаки, а ты тут ещё за дополнительные задержки ратуешь. И это у тебя один getElementById, а сколько их там внутри и сколько это всё будет искаться… И вообще, нафига парсить строку, если можно её не парсить? Набрали по объявлениям «программистов на жквери», а потом у них браузер тормозит.

anonymous ()
Ответ на: комментарий от rebforce

Ещё раз: при чём здесь CSS? Если кто-либо полез в индустрию и при этом не может отличить...

Под конец рабочего для и не такое происходит. Или ты хочешь сказать, что всегда бодрствуешь?

Точка с запятой применима к обеим

CryNet ★★★★ ()
Ответ на: комментарий от CryNet

Под конец рабочего для и не такое происходит. Или ты хочешь сказать, что всегда бодрствуешь?

У всех бывают ошибки. Но из-за каких-то редких экстремальных случаев жать дополнительную кнопку в конце каждой строчки, загрязнять код — не самое лучшее решение.

Есть полно языков без этих рудаментарных особенностей 70х годов, когда особо беспокоились о сложности парсеров языков. И код таких языков выглядит намного чище. Из модного-современного - Golang.

Хотя, в том же Расте оставили обязательными точки с запятыми (правда, там на них лежит больше логики и иногда их нужно не ставить). И из-за этого, его и так не сильно чистый синтаксис, стал еще визуально тяжелее.

anonymous ()
Ответ на: комментарий от example_cat

в вебе вообще какое-то засилие legacy. вместо того, чтоб сочинять всякие http/2 лучше б сделали web/2 без говна и палок.

Воу-воу, полегче. Тут только пару месяцев назад Майкрософт по дефолту отключила поддержку VBScript в их браузере (оставив возможноть руками включить).

А ты собрался веб переписывать.

anonymous ()
Ответ на: комментарий от anonymous

Есть полно языков без этих рудаментарных особенностей 70х годов

Видимо это из-за этого в голове намертво въелось: ставь точку с запятой в конце или умри

CryNet ★★★★ ()
Ответ на: комментарий от rebforce

пиши вообще в одну строку весь свой код, не ставь скобки у ифа и прочих, именуй переменные одной буквой, по возможности всегда одной. так ты покажешь всем макакам насколько ты крут и у тебя задница не красная.

deep-purple ★★★★★ ()
Ответ на: комментарий от deep-purple

Все всегда имеет свою цену.

Скобки в ифах/циклах необязательны, но их лучше ставить. Потому, что они используются не на каждой строке и очень гемморойно отслеживать их необходимость при мержах/рефакторингах. (Можно вспомнить эпичный эпловский баг с непроверкой ssl серификатов из-за «случайной» ошибки со скобками после ифа).

При этом, например, в андроидовских гадлайнах разрешается использование ифов без скобок, но только в случае, если тело будет записано в одну строку на той же строке, что и иф. В основном, используется для логирования:

if (needLog) writeLog("....");

Так ошибки мержей не так опасны.

Точки с запятой же на концах строк используются в каждой строке и ситуаций в коде, где их отсутвие может помешать, относительно легко избегать вообще не используя некоторых конструкций.

anonymous ()
Ответ на: комментарий от deep-purple

Тот случай, когда аватарка полностью соответствует содержанию постов.

не ставь скобки у ифа и прочих

Они и не нужны, если в теле «ифа и прочих» находится всего одно выражение. Кстати, их наличие в этом случае — ещё один признак изнасилованных страусиным трупом.

пиши вообще в одну строку весь свой код

именуй переменные одной буквой, по возможности всегда одной

Ты не поверишь, но есть применение и такому стилю. И более того, буквы для переменных подбираются так, чтобы в параметрах функций составляли осмысленные слова. Но здесь, разумеется, речь идёт уже об искусстве, а не о говноляпстве на ставку, когда твой код должны читать другие такие же говноляпы.

так ты покажешь всем макакам насколько ты крут и у тебя задница не красная.

Конкретно в этом треде задницы раскалились исключительно у защитников синтаксических преведов из семидесятых, что как бы намекает, кто здесь воистину макаки.

rebforce ()
Ответ на: комментарий от rebforce

Там это написано ровно по той же причине: облегчить жизнь макакам, не умеющим думать выражениями.

Вот это у тебя чсв ) А ты точно не макака, а гениальный программист?

vertexua ★★★★☆ ()
Ответ на: комментарий от anonymous

Тут речь не в экономии, а в разумности. Экономия на спичках это лепить здоровый алгоритм там, где он не нужен. А тут оба варианта делают одно и то же, getbyid читается понятней, работает быстрей. Не использовать его это уже просто глупость. К тому же querySelector возвращает массив, т.е. тебе ещё надо проверить, что он вернул ровно один элемент.

anonymous ()