ReactJS - 使用客戶端指令

---

---

指令類似於詳細的說明。在使用 React 伺服器元件或建立與其一起工作的元件（例如庫）時，它們是必要的。

一種指令被稱為“use client”。這指示程式碼的哪些部分在客戶端執行，這類似於我們的網路瀏覽器。

另一種選擇是“use server”。它定義可以在客戶端程式碼中呼叫的伺服器端函式，這些函式在我們的網路瀏覽器中執行。這些指令確保 React 伺服器元件中的所有內容都能順利執行。

因此，在本教程中，我們將討論“use client”。

什麼是 use client？

術語“use client”指的是在 React 伺服器元件中或在建立與其互動的元件時使用的特定指令。它有助於確定程式碼的哪些部分在客戶端執行，類似於我們的網路瀏覽器。

用法

要使用“use client”，只需將其放在檔案的開頭，在任何其他程式碼或匯入之前。應使用單引號或雙引號，但不要使用反引號。

import { useState } from 'react';

我們何時應該使用“use client”？

在處理 React 伺服器元件時，使用“use client”來區分在伺服器上執行的程式碼和在客戶端執行的程式碼。

示例

示例 - 互動性和狀態構建

因此，我們將建立一個簡單的導航選單元件，其中包含兩個頁面：“主頁”和“關於”。

為了確保它在客戶端執行，我們將建立一個使用“use client”的 NavigationMenu 元件。該元件將有兩個頁面的導航按鈕：“主頁”和“關於”。它將根據使用者的選擇顯示特定於所選頁面的內容。這將是一個簡單的導航選單，允許使用者在網站的不同區域之間導航。

"use client";
import React, { useState } from "react";
export default function NavigationMenu() {
   const [currentPage, setCurrentPage] = useState("Home");   
   const navigateToHome = () => setCurrentPage("Home");
   const navigateToAbout = () => setCurrentPage("About");   
   return (
      <div>
         <h1>Navigation Menu</h1>
         <ul>
            <li>
               <button onClick={navigateToHome}>Home</button>
            </li>
            <li>
               <button onClick={navigateToAbout}>About</button>
            </li>
         </ul>
         <div>
            {currentPage === "Home" && <p>Welcome to the Home Page!</p>}
            {currentPage === "About" && (
               <p>Learn more about us on the About Page.</p>
            )}
         </div>
      </div>
   );
}

輸出

示例 - 使用客戶端 API

這是另一個示例程式碼，它使用“use client”指令建立一個只能在瀏覽器中執行的簡單功能：

'use client';

import React, { useRef, useLayoutEffect } from 'react';

export default function VideoPlayer() {
   const videoRef = useRef(null);
   
   useLayoutEffect(() => {
      const video = videoRef.current;
      if (video) {
         // Play a video when the component loads
         video.play().catch((error) => {
            console.error('Error playing video: ' + error);
         });
      }
   });
   
   return (
      <video ref={videoRef} controls>
         <source src="your-video.mp4" type="video/mp4" />
         The browser does not support the video tag.
      </video>
   );
}

輸出

示例 - 使用第三方庫

在我們的 React 應用中，我們經常使用來自其他人的預製程式碼片段（稱為第三方庫）來幫助完成常見任務或使我們的應用看起來更好、執行更好。

有時，這些庫使用 React 的特定部分。如果它們這樣做，則需要在客戶端執行。這對於使用諸如建立上下文、某些 React 函式或需要使用瀏覽器功能的庫非常重要。

如果庫已更新以與 React 伺服器元件一起使用，它將已經具有“use client”標記，這意味著它可以使用。但是，如果它尚未更新，或者如果我們需要新增我們自己的特殊設定才能使庫工作，我們可能需要在庫和我們的主程式碼之間建立一個客戶端元件檔案，以確保它在 React 伺服器元件中正確執行。這樣，庫可以使用它需要的所有瀏覽器功能。

我們將展示如何在 React 專案中使用第三方庫，以及如果庫未針對 React 伺服器元件更新，為什麼我們需要建立一個客戶端元件檔案：

假設我們要將一個第三方日期選擇器庫新增到我們的 React 應用中。因為這個庫依賴於瀏覽器功能來顯示和選擇日期，所以它需要在客戶端執行。

建立一個名為“DatePickerClient.js”的客戶端元件檔案，並在其中使用“use client”指令。

'use client';

import React, { useState } from "react";
import DatePicker from "react-datepicker";

export default function DatePickerClient () {
   const [startDate, setStartDate] = useState(new Date());
   return (
      <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
   );
};

我們將在主 React 元件 App.js 中匯入並使用 DatePickerClient 元件，我們希望在那裡使用日期選擇器。這允許第三方日期選擇器庫在使用瀏覽器功能的同時正常工作。

import DatePickerClient from './DatePickerClient';

export default function App() {
   return (
      <div>
         <h1>Today's Date is</h1>
         <DatePickerClient />
      </div>
   );
}

輸出

“DatePickerClient”客戶端元件充當第三方日期選擇器庫和 React 伺服器元件環境之間的中介。它確保庫可以使用瀏覽器的日期選擇功能。

限制

• 如果用“use client”標記的檔案從另一個旨在在客戶端執行的檔案中匯入，則“use client”不會執行任何操作。它只在我們在主檔案中使用它時才有效。

• 如果元件檔案具有“use client”，那麼任何時候我們使用該元件，它都保證是一個客戶端元件。但是，即使沒有“use client”，元件仍然可以在客戶端執行。

• 某物是客戶端元件還是伺服器元件取決於它在哪裡使用。如果它在一個帶有“use client”的檔案中使用，或者在一個連結到帶有“use client”的檔案的檔案中使用，那麼它就是一個客戶端元件。否則，它就是一個伺服器元件。

• “use client”不僅僅用於元件。客戶端模組中的任何程式碼都將被髮送到客戶端並執行。它不限於元件。

• 如果一個用於伺服器端的檔案從一個“use client”檔案中匯入某些內容，那麼它匯入的內容必須是 React 元件或可以傳遞給客戶端元件的支援資料。任何其他內容都會導致錯誤。

總結

因此，“use client”是用於管理 React 伺服器元件中程式碼的有用工具。它確保在客戶端執行正確的程式碼，從而提高 Web 應用的效能和互動性。只需將其放在我們檔案的開頭，我們就可以為我們的 React 應用構建高效的客戶端程式碼。