2 tháng 9, 2025Tiếng Việt

Khám phá hook experimental_useFormStatus của React để quản lý trạng thái form hiệu quả. Tìm hiểu cách triển khai, lợi ích và cách sử dụng nâng cao qua các ví dụ thực tế.

Triển khai React experimental_useFormStatus: Quản lý Trạng thái Form Nâng cao

Hệ sinh thái React không ngừng phát triển, liên tục giới thiệu các công cụ và kỹ thuật mới để cải thiện trải nghiệm của nhà phát triển và hiệu suất ứng dụng. Một trong những tính năng thử nghiệm đó là hook experimental_useFormStatus, được thiết kế để đơn giản hóa việc quản lý trạng thái form, đặc biệt là trong các kịch bản sử dụng server actions và cải tiến lũy tiến (progressive enhancement). Hướng dẫn toàn diện này sẽ khám phá chi tiết về hook experimental_useFormStatus, cung cấp các ví dụ thực tế và thông tin chuyên sâu để sử dụng nó một cách hiệu quả.

`experimental_useFormStatus` là gì?

Hook experimental_useFormStatus là một API thử nghiệm được nhóm React giới thiệu nhằm cung cấp một cách đơn giản hơn để theo dõi trạng thái gửi của một form, đặc biệt khi sử dụng server actions. Trước khi có hook này, việc quản lý các trạng thái khác nhau của một form (nhàn rỗi, đang gửi, thành công, lỗi) thường đòi hỏi logic quản lý trạng thái phức tạp. experimental_useFormStatus hướng đến việc trừu tượng hóa phần lớn sự phức tạp này, cung cấp một cách đơn giản và hiệu quả để giám sát và phản ứng với các trạng thái gửi form.

Lợi ích chính:

Quản lý trạng thái đơn giản hóa: Giảm thiểu code soạn sẵn cần thiết để quản lý các trạng thái gửi form.
Cải thiện trải nghiệm người dùng: Cho phép cập nhật giao diện người dùng (UI) phản hồi nhanh hơn dựa trên trạng thái của form.
Cải thiện khả năng đọc code: Giúp code liên quan đến form dễ hiểu và bảo trì hơn.
Tích hợp liền mạch với Server Actions: Được thiết kế để hoạt động đặc biệt tốt với React Server Components và server actions.

Triển khai cơ bản

Để minh họa cách triển khai cơ bản của experimental_useFormStatus, chúng ta hãy xem xét một ví dụ về form liên hệ đơn giản. Form này sẽ thu thập tên, email, và tin nhắn của người dùng, sau đó gửi đi bằng server action.

Điều kiện tiên quyết

Trước khi đi sâu vào code, hãy đảm bảo bạn đã thiết lập một dự án React với các yêu cầu sau:

Phiên bản React hỗ trợ các API thử nghiệm (kiểm tra tài liệu của React để biết phiên bản yêu cầu).
Đã bật React Server Components (thường được sử dụng trong các framework như Next.js hoặc Remix).

Ví dụ: Một Form Liên hệ Đơn giản

Đây là một component form liên hệ cơ bản:

```jsx // app/actions.js (Server Action) 'use server' export async function submitContactForm(formData) { // Mô phỏng một lệnh gọi cơ sở dữ liệu hoặc yêu cầu API await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Thay thế bằng lệnh gọi API hoặc hoạt động cơ sở dữ liệu thực tế console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Client Component) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Name:

Email:

Message:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Giải thích</h3>

<ul>
  <li><b>Server Action (<code>app/actions.js</code>):</b> Tệp này định nghĩa hàm <code>submitContactForm</code>, một server action. Nó mô phỏng một yêu cầu API với độ trễ 2 giây để minh họa tính chất bất đồng bộ của việc gửi form. Nó cũng xử lý xác thực cơ bản và xử lý lỗi.</li>
  <li><b>Client Component (<code>app/components/ContactForm.jsx</code>):</b> Tệp này định nghĩa component <code>ContactForm</code>, một client component. Nó import hook <code>experimental_useFormStatus</code> và action <code>submitContactForm</code>.</li>
  <li><b>Cách sử dụng <code>useFormStatus</code>:</b> Bên trong component <code>SubmitButton</code>, <code>useFormStatus</code> được gọi. Hook này cung cấp thông tin về trạng thái gửi của form.</li>
  <li><b>Thuộc tính <code>pending</code>:</b> Thuộc tính <code>pending</code> được trả về bởi <code>useFormStatus</code> cho biết liệu form có đang trong quá trình gửi hay không. Nó được sử dụng để vô hiệu hóa nút gửi và hiển thị thông báo "Đang gửi...".</li>
  <li><b>Liên kết Form:</b> Thuộc tính <code>action</code> của phần tử <code>form</code> được liên kết với server action <code>submitContactForm</code>. Điều này báo cho React gọi server action khi form được gửi đi.</li>
</ul>

<h3>Xử lý Trạng thái Thành công và Lỗi</h3>

<p>Mặc dù <code>experimental_useFormStatus</code> đơn giản hóa việc theo dõi trạng thái gửi, bạn thường cần xử lý các trạng thái thành công và lỗi một cách rõ ràng. Server actions có thể trả về dữ liệu cho biết thành công hay thất bại, mà bạn có thể sử dụng để cập nhật giao diện người dùng tương ứng.</p>

```jsx
// app/components/ContactForm.jsx (Đã sửa đổi)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Giải thích:</b></p>

<ul>
  <li><b>Trạng thái cho tin nhắn:</b> Một biến trạng thái <code>message</code> được giới thiệu để lưu trữ kết quả trả về từ server action.</li>
  <li><b>Xử lý kết quả:</b> Sau khi form được gửi, hàm <code>handleSubmit</code> cập nhật trạng thái <code>message</code> với kết quả từ server action.</li>
  <li><b>Hiển thị tin nhắn:</b> Component hiển thị tin nhắn dựa trên thuộc tính <code>success</code> của kết quả, áp dụng các lớp CSS khác nhau cho trạng thái thành công và lỗi.</li>
</ul>

<p><code>experimental_useFormStatus</code> tỏa sáng trong các kịch bản cải tiến lũy tiến. Bằng cách cải tiến dần một form HTML tiêu chuẩn với React, bạn có thể cung cấp trải nghiệm người dùng tốt hơn mà không làm mất đi chức năng cơ bản nếu JavaScript bị lỗi.</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required>

```

Sau đó, bạn có thể cải tiến lũy tiến nó với React và experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Sử dụng null làm trạng thái ban đầu nếu không phụ thuộc vào nó return (

Name:

Email:

Message:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Giải thích:</b></p>

<ul>
  <li><b>Form HTML ban đầu:</b> Tệp <code>public/contact.html</code> chứa một form HTML tiêu chuẩn sẽ hoạt động ngay cả khi không có JavaScript.</li>
  <li><b>Cải tiến Lũy tiến:</b> Component <code>EnhancedContactForm</code> cải tiến lũy tiến form HTML. Nếu JavaScript được bật, React sẽ tiếp quản và cung cấp trải nghiệm người dùng phong phú hơn.</li>
  <li><b>Hook <code>useFormState</code>:</b> Sử dụng <code>useFormState</code> để quản lý trạng thái form và liên kết server action với form.</li>
	<li> <b><code>state</code>:</b> <code>state</code> từ <code>useFormState</code> giờ đây chứa giá trị trả về từ server action, có thể được kiểm tra để biết thông báo thành công hoặc lỗi.</li>
</ul>

<p>Khi triển khai các form cho đối tượng người dùng toàn cầu, một số lưu ý về quốc tế hóa cần được xem xét:</p>

<ul>
  <li><b>Bản địa hóa:</b> Đảm bảo các nhãn form, tin nhắn và thông báo lỗi của bạn được bản địa hóa sang các ngôn ngữ khác nhau. Các công cụ như i18next có thể giúp quản lý các bản dịch.</li>
  <li><b>Định dạng Ngày và Số:</b> Xử lý các định dạng ngày và số theo ngôn ngữ của người dùng. Sử dụng các thư viện như <code>Intl</code> hoặc <code>moment.js</code> (cho định dạng ngày, mặc dù hiện được coi là cũ) để định dạng ngày và số một cách chính xác.</li>
  <li><b>Định dạng Địa chỉ:</b> Các quốc gia khác nhau có các định dạng địa chỉ khác nhau. Cân nhắc sử dụng một thư viện hỗ trợ nhiều định dạng địa chỉ hoặc tạo các trường form tùy chỉnh dựa trên vị trí của người dùng.</li>
  <li><b>Xác thực Số điện thoại:</b> Xác thực số điện thoại theo các tiêu chuẩn quốc tế. Các thư viện như <code>libphonenumber-js</code> có thể giúp ích trong việc này.</li>
  <li><b>Hỗ trợ từ Phải sang Trái (RTL):</b> Đảm bảo bố cục form của bạn hỗ trợ các ngôn ngữ RTL như tiếng Ả Rập hoặc tiếng Do Thái. Sử dụng các thuộc tính logic của CSS (ví dụ: <code>margin-inline-start</code> thay vì <code>margin-left</code>) để hỗ trợ RTL tốt hơn.</li>
  <li><b>Khả năng Tiếp cận:</b> Tuân thủ các nguyên tắc về khả năng tiếp cận (WCAG) để đảm bảo các form của bạn có thể sử dụng được bởi những người khuyết tật, bất kể vị trí của họ.</li>
</ul>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Nom",
    "emailLabel": "Courriel",
    "messageLabel": "Message",
    "submitButton": "Soumettre",
    "successMessage": "Formulaire soumis avec succès !",
    "errorMessage": "Échec de la soumission du formulaire."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Giải thích:</b></p>

<ul>
  <li><b>Tệp dịch:</b> Ví dụ sử dụng <code>react-i18next</code> để quản lý các bản dịch. Các tệp JSON riêng biệt chứa các bản dịch cho các ngôn ngữ khác nhau.</li>
  <li><b>Hook <code>useTranslation</code>:</b> Hook <code>useTranslation</code> cung cấp quyền truy cập vào hàm dịch (<code>t</code>), được sử dụng để lấy các chuỗi đã được bản địa hóa.</li>
  <li><b>Nhãn được bản địa hóa:</b> Các nhãn form và văn bản nút được lấy bằng hàm <code>t</code>, đảm bảo chúng được hiển thị bằng ngôn ngữ ưa thích của người dùng.</li>
</ul>

<p>Đảm bảo các form của bạn có thể truy cập được bởi tất cả người dùng, bao gồm cả những người khuyết tật, là rất quan trọng. Dưới đây là một số lưu ý chính về khả năng tiếp cận:</p>

<ul>
  <li><b>HTML ngữ nghĩa:</b> Sử dụng các phần tử HTML ngữ nghĩa như <code><label></code>, <code><input></code>, <code><textarea></code>, và <code><button></code> một cách chính xác.</li>
  <li><b>Nhãn:</b> Liên kết nhãn với các điều khiển form bằng thuộc tính <code>for</code> trên <code><label></code> và thuộc tính <code>id</code> trên điều khiển form.</li>
  <li><b>Thuộc tính ARIA:</b> Sử dụng các thuộc tính ARIA để cung cấp thông tin bổ sung cho các công nghệ hỗ trợ. Ví dụ, sử dụng <code>aria-describedby</code> để liên kết một điều khiển form với một mô tả.</li>
  <li><b>Xử lý lỗi:</b> Chỉ ra lỗi một cách rõ ràng và cung cấp các thông báo lỗi hữu ích. Sử dụng các thuộc tính ARIA như <code>aria-invalid</code> để chỉ ra các điều khiển form không hợp lệ.</li>
  <li><b>Điều hướng bằng Bàn phím:</b> Đảm bảo người dùng có thể điều hướng form bằng bàn phím. Sử dụng thuộc tính <code>tabindex</code> để kiểm soát thứ tự tập trung nếu cần.</li>
  <li><b>Độ tương phản màu sắc:</b> Đảm bảo độ tương phản màu sắc đủ giữa văn bản và màu nền.</li>
  <li><b>Cấu trúc Form:</b> Sử dụng cấu trúc form rõ ràng và nhất quán. Nhóm các điều khiển form liên quan bằng các phần tử <code><fieldset></code> và <code><legend></code>.</li>
</ul>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Xác thực cơ bản phía máy khách
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Name is required.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email is required.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Message is required.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Xóa các lỗi trước đó
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Giải thích:</b></p>

<ul>
  <li><b>Trạng thái lỗi:</b> Component duy trì một trạng thái <code>errors</code> để theo dõi các lỗi xác thực.</li>
  <li><b>Xác thực phía máy khách:</b> Hàm <code>handleSubmit</code> thực hiện xác thực cơ bản phía máy khách trước khi gửi form.</li>
  <li><b>Thuộc tính ARIA:</b> Thuộc tính <code>aria-invalid</code> được đặt thành <code>true</code> nếu có lỗi cho một điều khiển form cụ thể. Thuộc tính <code>aria-describedby</code> liên kết điều khiển form với thông báo lỗi.</li>
  <li><b>Thông báo lỗi:</b> Các thông báo lỗi được hiển thị bên cạnh các điều khiển form tương ứng.</li>
</ul>

<h2>Thách thức và Hạn chế tiềm tàng</h2>

<ul>
  <li><b>Trạng thái thử nghiệm:</b> Là một API thử nghiệm, <code>experimental_useFormStatus</code> có thể thay đổi hoặc bị xóa trong các phiên bản React trong tương lai. Điều quan trọng là phải cập nhật tài liệu của React và chuẩn bị điều chỉnh code của bạn nếu cần.</li>
  <li><b>Phạm vi hạn chế:</b> Hook chủ yếu tập trung vào việc theo dõi trạng thái gửi và không cung cấp các tính năng quản lý form toàn diện như xác thực hoặc xử lý dữ liệu. Bạn vẫn có thể cần triển khai logic bổ sung cho các khía cạnh này.</li>
  <li><b>Phụ thuộc vào Server Action:</b> Hook được thiết kế để hoạt động với server actions, điều này có thể không phù hợp với tất cả các trường hợp sử dụng. Nếu bạn không sử dụng server actions, bạn có thể cần tìm các giải pháp thay thế để quản lý trạng thái form.</li>
</ul>

<p>Hook <code>experimental_useFormStatus</code> mang lại một cải tiến đáng kể trong việc quản lý các trạng thái gửi form trong React, đặc biệt khi làm việc với server actions và cải tiến lũy tiến. Bằng cách đơn giản hóa việc quản lý trạng thái và cung cấp một API rõ ràng và súc tích, nó nâng cao cả trải nghiệm của nhà phát triển và trải nghiệm người dùng. Tuy nhiên, với tính chất thử nghiệm của nó, điều quan trọng là phải cập nhật thông tin về các bản cập nhật và những thay đổi tiềm năng trong các phiên bản React trong tương lai. Bằng cách hiểu rõ lợi ích, hạn chế và các phương pháp hay nhất của nó, bạn có thể tận dụng hiệu quả <code>experimental_useFormStatus</code> để xây dựng các form mạnh mẽ và thân thiện với người dùng hơn trong các ứng dụng React của mình. Hãy nhớ xem xét các phương pháp hay nhất về quốc tế hóa và khả năng tiếp cận để tạo ra các form toàn diện cho đối tượng người dùng toàn cầu.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">trạng thái form</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">form React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">API thử nghiệm</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gửi form</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">form bất đồng bộ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">cải tiến lũy tiến</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>

Triển khai React experimental_useFormStatus: Quản lý Trạng thái Form Nâng cao

experimental_useFormStatus là gì?

Triển khai cơ bản

Điều kiện tiên quyết

Ví dụ: Một Form Liên hệ Đơn giản

`experimental_useFormStatus` là gì?