لماذا يتم إعادة عرض مكون عن تحديث الحالة بنفس القيمة في React؟

Adam Ebrahim · 22 مارس 2021

هل يقوم React بإعادة عرض re-render جميع المكونات (والمكونات الفرعية) في كل مرة يتم فيها استدعاء setState ()؟ إذا كان الأمر كذلك، لماذا؟ اعتقدت أن الفكرة كانت أن React يقوم بإعادة العرض بأقل قدر ممكن - عندما تتغير الحالة - لكي يكون الموقع أسرع.

في المثال البسيط التالي، يتم عرض كلا الصنفين مرة أخرى عند الضغط على النص، على الرغم من حقيقة أن الحالة لا تتغير عند النقرات التالية (النقرة الثانية وما بعدها)، حيث يقوم الحدث onClick دائمًا بتعيين الحالة إلى نفس القيمة:

var Child = React.createClass({
    render: function() {
        var timeNow = new Date().getTime();

        return (
            <p>Child Time: {timeNow}</p>
        );
    }
});

var App = React.createClass({
    handelClick: function() {
        this.setState({'test':'value'});
    },

    render: function() {
        // هذا السطر لا يجب أن يتغير حيث لا يتم تحديث الحالة بقيمة جديدة
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.handelClick}>
              <p>App Time: {currentTime}</p>
              <p>اضغط للتحديث</p>
              <Child/>
            </div>
        );
    }
});

ReactDOM.render(<App/>, document.body);

Mohammed Saber6 · 22 مارس 2021

React لا تقوم بمقارنة ال value الجديدة التي تقوم بتعينها هو فقط يضعها ويقوم بعمل render ولكن هناك بعض الطرق من الممكن أن تستخدمها لمنع حدوث render مثلا التحكم في ال render نفسه من خلال shouldComponentUpdate ومقارنة الحالة القديمة بالجديدة

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.test !== nextState.test) { // في حالة كانت القيم مختلفة قم بعمل render
      return true;
    }
    return false; // غير ذلك لا يقوم بعمل render
  }

هذا النمط يستخدم في حالة كانت ال state بسيطة وغير معقدة أما إذا كانت معقدة تستخدم مثلاً طريقة لعمل shallow comparison بين ال state و ال props والقرار يرجع لك متى تقوم بعمل render