วิธีบังคับให้อัปเดตส่วนประกอบตอบสนอง

บทนำ

ในบทความนี้เราจะแสดงวิธีบังคับให้อัปเดตส่วนประกอบใน React.js โดยเฉพาะอย่างยิ่ง เราจะแนะนำสั้น ๆ เกี่ยวกับ Re-renders ของ React เราจะแสดงวิธีบังคับการอัปเดตในส่วนประกอบตามคลาส และวิธีการบังคับการอัปเดตในส่วนประกอบที่ทำงาน

ตอบโต้ Re-Renders

React เองจะจัดการการเรนเดอร์องค์ประกอบใหม่ให้คุณโดยอัตโนมัติ ในกรณีส่วนใหญ่ สาเหตุของสิ่งนี้อาจขึ้นอยู่กับเวลาที่อุปกรณ์ประกอบฉากหรือสถานะได้รับการอัปเดต ดังนั้นเมื่อสถานะหรือคุณสมบัติเปลี่ยนแปลง ส่วนประกอบจะแสดงผลใหม่ แต่ถ้าองค์ประกอบของคุณขึ้นอยู่กับอย่างอื่นและไม่จำเป็นต้องขึ้นอยู่กับสถานะหรือทรัพย์สินของคุณ? ในกรณีนั้น คุณอาจต้องบังคับให้อัปเดตส่วนประกอบเนื่องจาก React อาจตรวจไม่พบการเปลี่ยนแปลง

มาดูวิธีใช้การอัพเดทแบบบังคับนี้กับองค์ประกอบ React เพื่อแสดงสิ่งนี้ เราจะสร้างแอปพลิเคชันอย่างง่ายเพื่อการสาธิต

หมายเหตุ: เราจะครอบคลุมแนวคิดบางประการของ React ดังนั้นจึงแนะนำให้มีความรู้พื้นฐานเกี่ยวกับ React

บังคับให้อัปเดตคอมโพเนนต์ตามคลาส

คอมโพเนนต์ของคลาสมีเมธอดในตัวสำหรับการเรนเดอร์คอมโพเนนต์ที่เรียกว่า forceUpdate()ซึ่งใช้เพื่อบังคับให้คอมโพเนนต์แสดงผลใหม่ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ forceUpdate() วิธีการใน React's เว็บไซต์อย่างเป็นทางการ.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

หมายเหตุ: ไม่แนะนำให้พึ่งพาการอัปเดตส่วนประกอบโดยใช้คำสั่ง forceUpdate() กระบวนการ. เมื่อคุณพบว่าตัวเองต้องการวิธีนี้ คุณควรพยายามวิเคราะห์โค้ดของคุณก่อนและหาว่ามีเหตุผลอื่นที่ React ไม่อัปเดตส่วนประกอบหรือไม่ คุณอาจพบว่ามีข้อบกพร่องที่ทำให้เกิดสิ่งนี้ หรือคุณสามารถจัดโครงสร้างโค้ดใหม่ในลักษณะที่ช่วยให้ React สามารถแสดงผลส่วนประกอบใหม่ได้อย่างเหมาะสมด้วยตัวเอง

ต่อไปนี้คือตัวอย่างวิธีบังคับให้อัปเดตคอมโพเนนต์ตามคลาส:

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

มีวิธีอื่นอีกมากมายเกิดขึ้นภายในวิธีนี้มากกว่าที่คิด เช่น การโทร forceUpdate() ทริกเกอร์เมธอดวงจรชีวิตสำหรับคอมโพเนนต์ย่อยด้วย และอย่างที่เราทราบด้วย React มันจะอัปเดต DOM ก็ต่อเมื่อมาร์กอัปมีการเปลี่ยนแปลงจริงเท่านั้น

คุณสามารถเข้าถึง รหัสสดที่นี่.

บังคับให้อัปเดตส่วนประกอบการทำงาน

ส่วนประกอบที่ใช้งานได้ไม่มีวิธีการในตัวสำหรับการเรนเดอร์ส่วนประกอบซ้ำเหมือนที่คู่กันในคลาสทำ ซึ่งหมายความว่าเราไม่มี forceUpdate() วิธีการที่เราสามารถใช้ได้ อย่างไรก็ตาม โปรดจำไว้ว่าในส่วนประกอบ React มักจะแสดงผลใหม่เนื่องจากการเปลี่ยนแปลงสถานะหรืออุปกรณ์ประกอบฉาก เมื่อใช้สิ่งนี้ เราสามารถบรรลุวิธีการบังคับอัปปาตได้

ตั้งแต่ v16.8+ React มีแนวคิดที่เรียกว่า Hooks ซึ่งสามารถใช้ในส่วนประกอบที่ใช้งานได้สำหรับการอัพเดตสถานะ การแสดงผลข้างเคียง ฯลฯ เราจะใช้ hooks เหล่านี้เพื่อประโยชน์ของเราในการรับส่วนประกอบเพื่อแสดงผลใหม่

ต่อไปนี้คือตัวอย่างบางส่วนของวิธีบังคับการอัปเดตในองค์ประกอบที่ใช้งานได้:

การใช้ useReducer เบ็ด

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

function handleClick() {
    forceUpdate();
}

ตัวลดใน React มักใช้เมื่อคุณมีตรรกะและการดำเนินการของสถานะที่ซับซ้อน ที่นี่เราใช้เพียงเพื่อทริกเกอร์การอัปเดตโดยอัปเดตตัวแปรสถานะจำลอง x. สถานะต้องเปลี่ยนจริง ๆ เพื่อทริกเกอร์การอัปเดต ซึ่งเป็นสาเหตุที่เพิ่มขึ้นในการโทรแต่ละครั้ง

ใช้ useState เบ็ด

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>
    );
}

แนวคิดเบื้องหลังการอัปเดตแรงประเภทนี้มีความคล้ายคลึงกันมากกับ useReducer โดยที่เรากำลังอัปเดตสถานะอย่างต่อเนื่องเพื่อบังคับการเปลี่ยนแปลง แทนที่จะเพิ่มตัวนับ เหมือนที่เราทำในวิธีสุดท้าย ที่นี่เราเพียงแค่สลับค่าบูลีนเพื่อให้ค่านั้นไร้ผลในการเรียกแต่ละครั้ง

การใช้ useState และ useCallback ตะขอ

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>
    );
}

อีกครั้ง กลยุทธ์นี้ทำงานโดยการเปลี่ยนสถานะ ในกรณีนี้ แม้ว่าเราจะไม่ได้เปลี่ยนแปลงในทางเทคนิค ความคุ้มค่า ของรัฐเรา เป็น ส่งวัตถุใหม่ซึ่งถือว่าใหม่โดย React เนื่องจากไม่ได้ทำการตรวจสอบความเท่าเทียมกัน "ลึก" ในสถานะ

อย่างที่คุณเห็น มีหลายวิธีที่จะบรรลุสิ่งเดียวกันที่นี่ โปรดทราบว่าสิ่งเหล่านี้ล้วนแต่เป็นการต่อต้านรูปแบบทางเทคนิค และควรหลีกเลี่ยงเมื่อเป็นไปได้ แต่ถ้าคุณไม่สามารถแก้ไขปัญหาพื้นฐานและจำเป็นต้องบังคับให้อัปเดตส่วนประกอบ วิธีการใดๆ ที่เราได้แสดงไว้ที่นี่น่าจะใช้ได้

สรุป

ในบทความนี้ เราได้เห็นวิธีบังคับอัปเดตส่วนประกอบ React แล้ว เรายังเห็นวิธีการนี้สามารถทำได้ทั้งในส่วนการทำงานและส่วนประกอบตามคลาส แม้ว่าจะไม่จำเป็นต้องเป็นแนวปฏิบัติที่ดี แต่ก็มีประโยชน์ที่จะเข้าใจวิธีการทำงานในกรณีที่เราจำเป็นต้องใช้ในกรณีพิเศษ