Cách nâng cấp lên React 18

React 18 phát triển khung thành phần JavaScript phổ biến với các tính năng mới được xây dựng xung quanh khả năng hiển thị đồng thời và hồi hộp. Nó hứa hẹn hiệu suất tốt hơn, nhiều khả năng hơn và trải nghiệm nhà phát triển được cải thiện cho các ứng dụng thực hiện chuyển đổi.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách nâng cấp các cơ sở mã hiện có của bạn lên React 18. Hãy nhớ rằng hướng dẫn này chỉ là tổng quan về những thay đổi có thể áp dụng rộng rãi nhất. Việc di chuyển sẽ khá dễ dàng đối với các dự án nhỏ đã tuân theo các phương pháp hay nhất của React; tập hợp lớn các thành phần phức tạp có thể gây ra một số vấn đề mà chúng tôi sẽ trình bày chi tiết bên dưới.

Bạn Đang Xem: Cách nâng cấp lên React 18

Cài đặt React 18

Trước khi làm bất cứ điều gì khác, hãy sử dụng npm để nâng cấp phần phụ thuộc React của dự án lên v18:

$ npm install react@latest react-dom@latest

Bản phát hành mới về mặt kỹ thuật không có bất kỳ điểm không tương thích ngược nào. Các tính năng mới được kích hoạt trên cơ sở chọn tham gia. Vì bạn chưa thay đổi bất kỳ mã nào, nên bạn có thể khởi động ứng dụng của mình và quan sát nó hiển thị chính xác. Dự án của bạn sẽ chạy với hành vi React 17 hiện có của nó.

$ npm start

Kích hoạt các tính năng của React 18: API gốc mới

Việc sử dụng React 18 mà không có bất kỳ thay đổi nào về cơ sở mã sẽ gây ra một tác dụng phụ: bạn sẽ thấy cảnh báo trên bảng điều khiển trình duyệt mỗi khi ứng dụng của bạn gắn kết ở chế độ phát triển.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Thông báo ngừng sử dụng này có thể được bỏ qua một cách an toàn nếu bạn chưa sẵn sàng nâng cấp dự án của mình. Khi bạn muốn áp dụng các khả năng của React 18, bạn cần thực hiện thay đổi mà nó mô tả. Người già ReactDOM.render() hàm đã được thay thế bằng một API gốc mới hướng đối tượng hơn. Bên cạnh tính dễ sử dụng được cải thiện, nó cũng kích hoạt hệ thống kết xuất đồng thời hỗ trợ tất cả các tính năng tiêu đề mới.

Trong của bạn index.js hoặc app.js tệp, hãy tìm các dòng tương tự như sau:

import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container);

Đây là một entrypoint điển hình cho một ứng dụng React. Nó hiển thị một phiên bản của dữ liệu đã nhập App thành phần như phần tử gốc của ứng dụng của bạn. Nội dung kết xuất được gửi dưới dạng innerHTML của phần tử HTML với id="react".

Để chuyển sang API gốc của React 18, hãy thay thế mã ở trên bằng mã sau:

import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);

Xem Thêm : Cách chỉnh sửa tệp EPS trong Photoshop

Điều này có tác dụng tương đương với ReactDOM.render() API. Thay vì khởi tạo một phần tử gốc và hiển thị ứng dụng của bạn như một thao tác bắt buộc duy nhất, React 18 khiến bạn tạo một đối tượng gốc trước và sau đó hiển thị rõ ràng nội dung của bạn.

Tiếp theo, hãy tìm bất kỳ vị trí nào trong mã của bạn nơi bạn ngắt kết nối nút gốc của mình. Biến đổi ReactDOM.unmountComponentAtNode() sang cái mới unmount() trên đối tượng gốc của bạn:

// Before
import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container);
ReactDOM.unmountComponentAtNode(container);
 
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);
root.unmount();

Thay thế Render Callbacks

Các ReactDOM.render() Đối số gọi lại tùy chọn của phương thức không có đối số trực tiếp trong API gốc của React 18. Trước đây bạn có thể sử dụng mã này để đăng nhập Rendered! vào bảng điều khiển sau khi React hoàn thành việc hiển thị nút gốc:

import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container, () => console.log("Rendered!"));

Chức năng này đã bị loại bỏ vì thời gian của lệnh gọi lại không thể đoán trước được khi sử dụng các tính năng kết xuất máy chủ phát trực tuyến và hydrat hóa từng phần mới của React 18. Nếu bạn đang sử dụng lệnh gọi lại hiển thị và cần duy trì khả năng tương thích, bạn có thể đạt được hành vi tương tự bằng cách sử dụng cơ chế tham chiếu:

import {createRoot} from "react-dom/client";
 
const App = ({callback}) => (
    <div ref={callback}>
        <h1>Demo App</h1>
    </div>
);
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App callback={() => console.log("Rendered!")} />);

React gọi hàm refs khi các thành phần gắn kết. Đặt ref trên thành phần là nút gốc của bạn cho phép bạn phát hiện khi nào kết xuất xảy ra, mang lại hiệu ứng tương tự như hệ thống gọi lại kết xuất cũ.

Gỡ lỗi sự cố nâng cấp

Ứng dụng của bạn bây giờ sẽ được hiển thị bằng cách sử dụng các tính năng của React 18 và không có bất kỳ cảnh báo nào trên bảng điều khiển. Kiểm tra ứng dụng của bạn kỹ lưỡng để đảm bảo mọi thứ vẫn hoạt động như bạn mong đợi. Nếu bạn tìm thấy sự cố, bạn có thể giải quyết chúng bằng các giải pháp phổ biến này.

Kiểm tra

Các ứng dụng được bao bọc trong <StrictMode> component có thể hoạt động khác khi hiển thị trong chế độ phát triển của React 18. Điều này là do Chế độ nghiêm ngặt hiện kiểm tra xem codebase của bạn có hỗ trợ trạng thái có thể tái sử dụng hay không, một khái niệm sẽ được giới thiệu đầy đủ cho React trong một bản phát hành trong tương lai.

Trạng thái có thể tái sử dụng cho phép React kết nối lại một thành phần đã bị loại bỏ trước đó với trạng thái cuối cùng của nó được tự động khôi phục. Điều này đòi hỏi các thành phần của bạn phải linh hoạt để tăng gấp đôi việc gọi các hiệu ứng. Giờ đây, Chế độ nghiêm ngặt giúp bạn chuẩn bị cho trạng thái có thể sử dụng lại bằng cách mô phỏng quá trình gắn, ngắt kết nối và gắn lại các thành phần của bạn mỗi khi chúng được sử dụng, giải quyết bất kỳ sự cố nào mà trạng thái trước đó không thể khôi phục. Bạn có thể tắt Chế độ nghiêm ngặt nếu nó tìm thấy các vấn đề trong ứng dụng của bạn hoặc các phần phụ thuộc mà bạn chưa sẵn sàng giải quyết.

Hỗ trợ Cập nhật trạng thái Batch

React 18 thay đổi cách cập nhật trạng thái “theo đợt” để cải thiện hiệu suất. Khi bạn thay đổi các giá trị trạng thái nhiều lần trong một hàm, React sẽ cố gắng kết hợp chúng thành một kết xuất lại duy nhất:

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    /**
     * Two state updates, only one re-render
     */
    setQuery("demo");
    setQueryCount(queryCount + 1);
 
};

Xem Thêm : Nerf Ditch the Dart In “Gelfire” Blaster mới của nó – Đánh giá

Cơ chế này giúp tăng hiệu quả nhưng trước đây chỉ hoạt động bên trong các trình xử lý sự kiện React. Với React 18, nó hoạt động với tất cả các bản cập nhật trạng thái, ngay cả khi chúng bắt nguồn từ các trình xử lý sự kiện gốc, hết thời gian chờ hoặc Promise. Một số mã có thể hoạt động khác với trước đây nếu bạn thực hiện cập nhật trạng thái liên tục ở bất kỳ nơi nào trong số này.

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryId, setQueryId] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    const handleSearch = query => {
       fetch(query).then(() => {
 
            setQuery("demo");
            setQueryCount(1);
 
            // In React 17, sets to "query-1"
            // In React 18, sets to "query-0" - previous state update is batched with this one
            setQueryId(`query-${queryCount}`);
 
        });
    }
 
};

Bạn có thể vô hiệu hóa hành vi này trong các tình huống mà bạn chưa sẵn sàng cấu trúc lại mã của mình. Gói cập nhật trạng thái trong flushSync() để buộc họ phải cam kết ngay lập tức:

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryId, setQueryId] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    const handleSearch = query => {
       fetch(query).then(() => {
 
            flushSync(() => {
                setQuery("demo");
                setQueryCount(1);
            });
 
            // Sets to "query-1"
            setQueryId(`query-${queryCount}`);
 
        });
    }
 
};

Ngừng sử dụng các tính năng đã xóa và không được hỗ trợ

Khi tất cả các khía cạnh trên đã được giải quyết, ứng dụng của bạn sẽ hoàn toàn tương thích với React 18. Mặc dù có thêm một số thay đổi về bề mặt API, nhưng những thay đổi này sẽ không ảnh hưởng đến phần lớn các ứng dụng. Dưới đây là một số điều cần lưu ý:

  • unstable_changedBits đã bị loại bỏ – API không được hỗ trợ này cho phép chọn không tham gia cập nhật ngữ cảnh. Nó không còn nữa.
  • Các Object.assign() polyfill đã bị loại bỏ – Bạn nên thêm thủ công object-assign gói polyfill nếu bạn cần hỗ trợ các trình duyệt rất cũ mà không được tích hợp sẵn Object.assign().
  • Internet Explorer không còn được hỗ trợ – React đã chính thức bỏ khả năng tương thích với Internet Explorer trước khi trình duyệt kết thúc hỗ trợ vào tháng 6. Bạn không nên nâng cấp lên React 18 nếu vẫn yêu cầu ứng dụng của mình chạy trên IE.
  • Sử dụng Suspense với một undefined dự phòng bây giờ tương đương với null – Ranh giới rõ ràng với fallback={undefined} đã được bỏ qua trước đó, cho phép mã phân tầng đến ranh giới cha tiếp theo trong cây. React 18 hiện tôn trọng các thành phần Suspense mà không cần dự phòng.

Kết xuất phía máy chủ

Các ứng dụng sử dụng kết xuất phía máy chủ sẽ yêu cầu thêm một số thay đổi để hoạt động với React 18.

Nội tuyến với API gốc mới, bạn phải thay thế API cũ hydrate() hoạt động trong mã phía máy khách của bạn với hydrateRoot() được cung cấp bởi react-dom/client bưu kiện:

// Before
import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.hydrate(<App />, container);
 
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = hydrateRoot(container, <App />);

Trong mã phía máy chủ của bạn, hãy thay thế các lệnh gọi API hiển thị không dùng nữa bằng các đối tác mới của chúng. Trong hầu hết các trường hợp, bạn nên thay đổi renderToNodeStream() sang cái mới renderToReadableStream(). Các API luồng mới mở khóa quyền truy cập vào khả năng hiển thị của máy chủ phát trực tuyến của React 18, nơi máy chủ có thể tiếp tục phân phối HTML mới cho trình duyệt sau lần hiển thị đầu tiên của ứng dụng của bạn.

Bắt đầu sử dụng các tính năng của React 18

Bây giờ bạn đã nâng cấp, bạn có thể bắt đầu làm cho ứng dụng của mình mạnh mẽ hơn bằng cách kết hợp các tính năng của React 18. Việc sử dụng đồng thời của React có nghĩa là quá trình hiển thị thành phần có thể bị gián đoạn, mở khóa các khả năng mới và giao diện người dùng phản hồi nhanh hơn.

Một số tính năng được bổ sung bao gồm các bản cập nhật lớn cho Suspense, một cách để chỉ định mức độ ưu tiên của các bản cập nhật trạng thái với Chuyển đổi và cơ chế tích hợp để điều chỉnh hiển thị do các bản cập nhật không khẩn cấp nhưng tần suất cao gây ra. Có một số thay đổi và cải tiến khác: bạn có thể quay lại undefined từ một thành phần render() phương pháp, cảnh báo về việc gọi setState() trên các thành phần không gắn kết đã bị xóa và một số thuộc tính HTML mới như imageSizes, imageSrcSetaria-description được công nhận bởi trình kết xuất của React DOM.

Bản tóm tắt

React 18 đã ổn định và sẵn sàng để sử dụng. Trong hầu hết các trường hợp, quá trình nâng cấp phải nhanh chóng và dễ dàng, chỉ yêu cầu cập nhật npm và chuyển sang API gốc mới. Mặc dù vậy, bạn vẫn nên kiểm tra tất cả các thành phần của mình: chúng có thể hoạt động khác nhau trong một số trường hợp, chẳng hạn như ở Chế độ nghiêm ngặt hoặc khi áp dụng phân phối tự động.

Bản phát hành mới này chỉ ra định hướng tương lai của React như một khuôn khổ hiệu suất cao cho tất cả các loại ứng dụng web. Nó cũng mở rộng khả năng kết xuất phía máy chủ của React, thêm Suspense trên máy chủ và khả năng tiếp tục phát trực tuyến nội dung cho người dùng của bạn sau lần kết xuất đầu tiên. Điều này giúp các nhà phát triển linh hoạt hơn trong việc phân phối kết xuất trên cả máy khách và máy chủ.


Nguồn: https://maytinhvang.com
Danh mục: TIN HỌC

Bài viết liên quan

0903064855
chat-active-icon