Cách buộc cập nhật một thành phần phản ứng

Giới thiệu

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách buộc cập nhật một thành phần trong React.js. Cụ thể hơn, chúng tôi sẽ giới thiệu ngắn gọn về React re-render, chúng tôi sẽ chỉ ra cách buộc cập nhật trong các thành phần dựa trên lớp và cách buộc cập nhật trong các thành phần chức năng.

React Re-Render

React tự động xử lý các thành phần kết xuất lại cho bạn, trong hầu hết các trường hợp. Nguyên nhân của điều này có thể dựa trên thời điểm các đạo cụ hoặc trạng thái đã được cập nhật. Vì vậy, khi một trạng thái hoặc thuộc tính thay đổi, thành phần sẽ hiển thị lại. Nhưng điều gì sẽ xảy ra nếu thành phần của bạn phụ thuộc vào một thứ khác và không nhất thiết phải phụ thuộc vào trạng thái hoặc tài sản của bạn? Trong trường hợp đó, bạn có thể phải buộc cập nhật thành phần vì React có thể không phát hiện ra thay đổi.

Hãy xem cách sử dụng bản cập nhật bắt buộc này trên một thành phần React. Để hiển thị điều này, chúng tôi sẽ tạo một ứng dụng đơn giản cho mục đích demo.

Chú thích: Chúng ta sẽ đề cập đến một vài khái niệm về React, vì vậy bạn nên có kiến ​​thức cơ bản về React.

Bắt buộc cập nhật các thành phần dựa trên lớp

Thành phần lớp có một phương thức dựng sẵn để kết xuất lại một thành phần, được gọi là forceUpdate(), được sử dụng để buộc một thành phần kết xuất lại. Bạn có thể đọc thêm về forceUpdate() phương pháp trên React's Trang web chính thức.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Chú thích: Không nên dựa vào việc cập nhật các thành phần bằng cách sử dụng forceUpdate() phương pháp. Khi bạn thấy mình cần phương pháp này, trước tiên bạn nên thử phân tích mã của mình và tìm ra lý do nào khác khiến React không cập nhật thành phần. Bạn có thể thấy rằng một lỗi đang gây ra điều này hoặc bạn có thể cấu trúc lại mã của mình theo cách cho phép React tự hiển thị lại thành phần một cách chính xác.

Dưới đây là một ví dụ về cách buộc cập nhật trên một thành phần dựa trên lớp:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

Có nhiều điều đang diễn ra trong phương pháp này hơn những gì nó có thể tưởng tượng. Ví dụ, gọi forceUpdate() cũng kích hoạt các phương thức vòng đời cho các thành phần con. Và như chúng ta đã biết với React, nó sẽ chỉ cập nhật DOM nếu đánh dấu đã thực sự thay đổi.

Bạn có thể truy cập mã trực tiếp ở đây.

Bắt buộc cập nhật các thành phần chức năng

Các thành phần chức năng không có phương thức tích hợp nào để kết xuất lại một thành phần giống như các thành phần dựa trên lớp của chúng. Điều này có nghĩa là chúng tôi không có forceUpdate() phương pháp có sẵn cho chúng tôi. Tuy nhiên, hãy nhớ lại rằng trong React, các thành phần thường hiển thị lại do thay đổi trạng thái hoặc chống đỡ. Sử dụng điều này, chúng tôi có thể đạt được các cách để tăng cường.

Kể từ v16.8 +, React có một khái niệm được gọi là Hooks có thể được sử dụng trong các thành phần chức năng để cập nhật trạng thái, thực hiện các hiệu ứng phụ, v.v. Chúng tôi sẽ sử dụng các hook này để có lợi cho mình trong việc kết xuất lại một thành phần.

Dưới đây là một số ví dụ về cách buộc cập nhật trong một thành phần chức năng:

Sử dụng useReducer móc

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

Một phần mềm rút gọn trong React thường được sử dụng khi bạn có các hành động và logic trạng thái phức tạp. Ở đây, chúng tôi chỉ sử dụng nó để kích hoạt cập nhật bằng cách cập nhật một biến trạng thái giả, x. Trạng thái thực sự phải thay đổi để kích hoạt cập nhật, đó là lý do tại sao nó tăng lên trong mỗi lần gọi.

Sử dụng useState móc

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Ý tưởng đằng sau kiểu cập nhật lực lượng này rất giống với useReducer trong đó chúng tôi liên tục cập nhật trạng thái để buộc phải thay đổi. Thay vì tăng bộ đếm, như chúng ta đã làm trong phương pháp trước, ở đây chúng ta chỉ cần chuyển đổi một giá trị boolean để nó bị phủ định trên mỗi lần gọi.

Sử dụng useState và useCallback móc

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Một lần nữa, chiến lược này hoạt động bằng cách thay đổi trạng thái. Trong trường hợp này, mặc dù về mặt kỹ thuật chúng tôi không thay đổi giá trị của tiểu bang, chúng tôi đang gửi cho nó một đối tượng mới, được React coi là mới vì nó không thực hiện kiểm tra bình đẳng “sâu” về trạng thái.

Như bạn có thể thấy, có một số cách để đạt được điều tương tự ở đây. Hãy nhớ rằng đây là tất cả các mô hình chống kỹ thuật và nên tránh khi có thể. Nhưng nếu bạn không thể giải quyết vấn đề cơ bản và cần buộc cập nhật một thành phần, thì bất kỳ phương pháp nào chúng tôi đã hiển thị ở đây sẽ hoạt động.

Kết luận

Trong bài viết này, chúng ta đã biết cách buộc cập nhật các thành phần React. Chúng tôi cũng đã thấy điều này có thể đạt được như thế nào trong cả các thành phần dựa trên chức năng và dựa trên lớp. Mặc dù không nhất thiết phải là thực hành tốt, nhưng sẽ rất hữu ích khi hiểu cách hoạt động của nó trong trường hợp chúng ta cần sử dụng nó trong những trường hợp đặc biệt.