Хук useId в ReactJS

Хук useId предоставляет простой способ генерации уникальных идентификаторов для элементов HTML в React. Он может быть особенно полезен в случаях, когда нужно создать несколько экземпляров одного компонента на странице. Прежде чем использовать хук useId, давайте рассмотрим проблему, с которой мы можем столкнуться без его помощи. Предположим, у нас есть компонент EmailForm, который содержит поля ввода для ввода электронной почты. Если мы просто создадим несколько экземпляров этого компонента на странице, у нас возникнут проблемы с идентификаторами элементов HTML.

function EmailForm() {
  return (
    <>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </>
  )
}

В приведенном выше коде htmlFor явно указывает на идентификатор email, и это работает, когда у нас только один экземпляр формы на странице. Однако, если мы решим отобразить несколько форм на одной странице, это приведет к нескольким элементам input с одним и тем же идентификатором email. Это не только некорректно с точки зрения стандартов HTML, но и может вызывать проблемы с доступностью и взаимодействием пользователей с формами.

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

function EmailForm() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  )
}

Хук useId создает уникальный идентификатор для каждого вызова в компоненте. Теперь, когда мы отображаем несколько форм на странице, у каждого элемента input есть уникальный идентификатор, что позволяет нам избежать проблем с повторяющимися идентификаторами. Еще одно преимущество использования хука useId заключается в том, что сгенерированные идентификаторы остаются постоянными между рендерами. Это особенно важно при рендеринге на стороне сервера, когда идентификаторы должны быть согласованы между сервером и клиентом. В заключение, хук useId является мощным инструментом для генерации уникальных идентификаторов в React. Он обеспечивает легкость использования и надежность и может быть полезным во множестве сценариев разработки.

React без JSX

Давайте напишем React код без использования JSX, чтобы мы могли лучше знать, почему мы используем JSX в React.

let h1 = React.createElement('h1',{style:{color:"green"}}," h1 element");
let p = React.createElement('p',{style:{color:"red"}},"p element");
let div = React.createElement('div',{className:"container"},h1,p);

ReactDOM.render(div,document.querySelector('#app'))

React.createElement(type,props,children) принимает три аргумента. type: Это означает тип HTML-элемента, который нам нужен. (Пример: h1, h2, p, div и т.д.) props: Любые пропсы, необходимые для этого элемента. children: Данные, которые нам нужно добавить внутрь элемента html (пример: обычный текст или дочерние элементы)

React с JSX

Теперь заменим приведенный выше код на код с JSX.

let  green = {color:"green"};
let red = {color:"red"};

let h1 = <h1 style ={green}>h1 element</h1>;
let p = <p style={red}>p element</p>;
let div = <div className="container">{h1}{p}</div>

ReactDOM.render(div,document.querySelector('#app'))

JSX, который мы пишем внутри React, часто преобразуется в JavaScript с помощью транспилятора babel.

Что такое JSX?

JSX позволяет нам писать HTML-синтаксис внутри JavaScript. Используя JSX, мы можем сделать наш код более читабельным. JSX используется не только в React, но и в некоторых других фреймворках.

Выражения в JSX

В JSX мы можем встраивать выражения JavaScript, обернув фигурными скобками { }.

let h1 = <h1> Odd number {2+3}</h1>

let users = ['user1', 'user2', 'user3']

let ul = (
  <ul>
    {users.map((user,i)=>(
      <li>{user}</li>
    ))}
  </ul>
)

В приведенном выше коде мы использовали метод map для перебора массива и создали три элемента li.

Атрибуты в JSX

Встроенные (инлайновые) стили

// объект
let greenColor = {color: "green"}

let h1 = <h1 style={greenColor}>This is heading</h1>

Для встроенного стиля нам нужно передать свойства стиля как объект внутри фигурных скобок, так как объект является выражением JavaScript. Мы также можем передать объект стиля непосредственно в фигурные скобки вместо использования дополнительной переменной.

let h1 = <h1 style={{color:"green"}}>This is heading</h1>

Внешние стили, использующие classNames

Нам нужно использовать className вместо обычного атрибута class, который мы используем в HTML, потому что внутри JavaScript уже присутствует ключевое слово class.

let h1 = <h1 className="header-h1">This is heading</h1>

Компоненты React

Компонент представляет собой многократно используемый фрагмент кода в React, который возвращает React элемент.

function Button(props){
    return <button>{props.name}</button>
}

Условные выражения в JSX

function ShowHide(props) {
  if(props.show) {
    return <button>Show</button>
  } else {
    return <button>Hide</button>
  }
}

ReactDOM.render(<ShowHide show="true" />,document.querySelector('#app'))

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

function ShowHide(props){
  return <button>{props.show ? "Show" : "Hide"}</button>
}

Оператор spread в JSX

Предположим, нам нужно передать данные компоненту User с помощью пропсов.

function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <ul>
        <li>{props.email}</li>
        <li>{props.mobile }</li>
      </ul>
    </div>
  )
}

<User name="John" email="user@example.com" mobile={11233} />

Передадим те же пропсы с помощью оператора spread.

let user = {
  name: "John",
  email: "user@example.com",
  mobile: 11233
}

<User {...user} />