reactjs - ما الفرق بين "super()" و "super(props)" في React عند استخدام دروس es6؟




ecmascript-6 (6)

هنا هو الكمان الذي قدمته: https://jsfiddle.net/beshanoe/zpxbLw4j/1/ . فإنه يدل على أن يتم تعيين الدعائم ليس في المنشئ بشكل افتراضي. كما أفهم أنهم React.createElement في طريقة React.createElement . لذلك يجب استدعاء super(props) فقط عندما يقوم منشئ الطبقة المتفوقة يدوياً بتثبيت props إلى هذه this.props . إذا كنت مجرد تمديد React.Component استدعاء super(props) لن تفعل شيئا مع الدعائم. ربما سيتم تغييره في الإصدارات القادمة من React.

متى يكون من المهم تمرير props إلى super() ، ولماذا؟

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

هناك سبب واحد فقط عندما يحتاج المرء إلى تمرير props إلى super() :

عندما تريد الوصول إلى هذا this.props في منشئ.

رحيل:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

لا يمر:

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

لاحظ أن تمرير أو عدم تمرير props إلى super ليس له أي تأثير على الاستخدامات اللاحقة لهذا this.props خارج constructor . هذا هو render ، shouldComponentUpdate أن يكون shouldComponentUpdate أو معالجات الأحداث الوصول إليها دائما .

يقال هذا بوضوح في answer صوفي البيرت على سؤال مماثل.

الوثائق - State و Lifecycle ، إضافة حالة محلية إلى فئة ، النقطة 2 - تشرح:

يجب دائماً استدعاء مكونات فئة مُنشئ قاعدة مع props .

ومع ذلك ، يتم توفير أي سبب. يمكننا أن نتوقع أنه إما بسبب subclassing أو من أجل التوافق في المستقبل.

(شكراMattBrowne للارتباط)


عند تمرير props إلى super ، يتم تعيين الدعائم إلى this . ألق نظرة على السيناريو التالي:

constructor(props) {
    super();
    console.log(this.props) //undefined
}

كيف تفعل ذلك في أي وقت:

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

حسب كود المصدر

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

يجب عليك تمرير props كل مرة لديك الدعائم وأنت لا تضعها في this.props . this.props يدويا.



بالنسبة لي ، كان من ComponentName.prototype بدلاً من ComponentName.propTypes. اقتراح تلقائي بواسطة phpstorm IDE. آمل أن يساعد شخص ما.





reactjs ecmascript-6