freeCodeCamp/guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md

title, localeTitle

title	localeTitle
Optimize Re-Renders with shouldComponentUpdate	تحسين Re-Renders مع shouldComponentUpdate

تحسين Re-Renders مع shouldComponentUpdate

ملحوظة:

تحقق لمعرفة ما إذا كانت قيمة nextProps متساوية.

حل:

بالنسبة لهذا الحل ، ستستخدم عبارة if/then للتحقق مما إذا كانت قيمة nextProps متساوية. تختلف nextProps عن props في أنها قيمة لم يتم تقديمها في واجهة المستخدم بعد ، لذا في أسلوب shouldComponentUpdate() ، فأنت تطلب بشكل أساسي إذنًا لتحديث واجهة المستخدم بقيمة nextProps .

`class OnlyEvens extends React.Component { constructor(props) { super(props); } shouldComponentUpdate(nextProps, nextState) { console.log('Should I update?'); // change code below this line if (nextProps.value % 2 == 0) { return true; } return false; // change code above this line } componentWillReceiveProps(nextProps) { console.log('Receiving new props...'); } componentDidUpdate() { console.log('Component re-rendered.'); } render() { return

{this.props.value}

} };

class Controller extends React.Component { constructor(props) { super(props); this.state = { value: 0 }; this.addValue = this.addValue.bind(this); } addValue() { this.setState({ value: this.state.value + 1 }); } render() { return (

Add

); } }; `