على عكس البرمجة الضرورية ، حيث تحدث تحديثات الدولة على الفور ، فإن setState من React غير متزامن. هذا يعني أن تحديث الحالة لا يضمن انعكاسًا فوريًا في الحالة الداخلية للمكون. المقتطف الذي ينفذ مكون BoardAdd في React:

يمتد الفئة Boardadd React.component { مُنشئ (الدعائم) { سوبر (الدعائم) ؛ this.state = { boardaddmodalshow: خطأ } ؛ this.openaddboardModal = this.openaddboardmodal.bind (this) ؛ } OpenAdboardModal () { this.setState ({boardaddmodalshow: true}) ؛ console.log (this.state.boardaddmodalshow) ؛ } }

عندما يتم استدعاء طريقة OpenAddboardModal ، فإنه يعين علامة BoardAddModalShow على True وطباعة قيمتها على وحدة التحكم. ومع ذلك ، يوضح إخراج وحدة التحكم أن القيمة تظل خاطئة على الرغم من مكالمة setState.

لماذا؟

بعد أن تم استدعاؤه ، تظل واجهة المستخدم غير متأثرة حتى تتفاعل رد الفعل. يتم تنفيذ عبارة console.log قبل حدوث إعادة تقديم ، مما يؤدي إلى طباعة قيمة الحالة القديمة. يمكننا استخدام وظيفة رد الاتصال كوسيطة إلى setState. يتم تنفيذ رد الاتصال بعد تحديث الحالة وحدث إعادة تقديم:

this.setState ({boardaddmodalshow: true} ، function () { console.log (this.state.boardaddmodalshow) ؛ }) ؛ }

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

في هذه الحالة ، سيتم تنفيذ عبارة console.log بعد تحديث الحالة ، مما يوضح بشكل صحيح القيمة الجديدة لـ boardaddmodalshow كما هو صحيح.

هذه الطبيعة غير المتزامنة لـ setState تخدم غرضًا يعزز الأداء. نظرًا لأن تحديثات الدولة تؤدي إلى إعادة توزيع الإيرادات ، فإن جعلها متزامنة قد تؤدي إلى عدم استجابة المتصفح. تعمل مكالمات SetState على تحسين الأداء من خلال تقليل إعادة العرض غير الضرورية وتعزيز تجربة المستخدم.