![\"أداة](\"/static/d0f767f80866431ccdec18f200ca58f1/0a47e/devtools-prod.png\" "\\"\\"")
\n \n \n \n \n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React:
\n\n
تستخدم React العديد من التقنيّات الذكية داخليًا للتقليل من عدد عمليات DOM المكلفة المطلوبة لتحديث واجهة المستخدم. يؤدي استعمال React إلى الحصول على واجهات مستخدم سريعة دون الحاجة إلى القيام بعمل كبير من أجل تحسين الأداء. بالرغم من ذلك يوجد العديد من الطرق لتسريع تطبيق React الخاص بك
\nإذا كنت تقيّم أو تواجه مشاكل في الأداء في تطبيقات React الخاصة بك، تأكد من أنك تختبر باستخدام نسخة الإنتاج المصغّرة من React.
\nتوفّر React بشكل افتراضي العديد من رسائل التحذير المفيدة أثناء التطوير. ولكنّها تجعل من React أكبر حجما وأبطأ، عليك أن تتأكد من استخدامك لاصدار الإنتاج عند توزيع التطبيق.
\nإن لم تكن مُتأكدًا من أن عمليّة بناء التطبيق معُدًّة بشكل صحيح، يُمكنك أن تتحقق بتثبيت أداة أداة تطوير React لمُتصفّح Chrome. إن تَزُر موقعا موقعًا مبنيًّا باستخدام React في وضع الإنتاج، فسيكون للأيقونة خلفية ذاة لون داكن.
\n\n \n \n \n \n\n \n \n \n \n \nأمّا إن زُرتَ موقعًا مبنيًّا باستخدام React في وضع التطوير، فسيكون لأيقونة هذه الأداة خلفية حمراء:
\n\n \n \n \n )({\n 'process.env.NODE_ENV': JSON.stringify('production')\n }),\n require('rollup-plugin-commonjs')(),\n require('rollup-plugin-terser')(),\n // ...\n]\nللحصول على مثال كامل عن طريقة الإعداد انظر هنا.
\nتذكَّر أنَك تحتاج فقط لفعل ذلك من أجل نُسَخ الإنتاج، فلا يجب تطبيق الإضافة terser أو الإضافة replace أثناء التطوير، لأنّها ستُخفي تحذيرات React المُفيدة وتجعل من بناء التطبيق أبطأ.
\n\nملاحظة:
\nإن كُنتَ تستخدم الأمر Create React App, رجاءً اتبع التعليمات السّابقة.
\n
\nهذا القسم يُفيدك فقط إن كنت تريد ضبط إعدادات webpack بشكلٍ مباشر.
نسخة Webpack v4+ ستضغط الشفرة البرمجية الخاصة بك تلقائيًا في طور الإنتاج Production.
const TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n mode: 'production',\n optimization: {\n minimizer: [new TerserPlugin({ /* additional options here */ })],\n },\n};بإمكانك تعلّم المزيد حول هذا الموضوع في webpack توثيق.
\nتذكَّر أنَك تحتاج فقط لفعل ذلك من أجل نُسَخ الإنتاج، فلا يجب تطبيق الإضافة TerserPlugin أثناء التطوير، لأنّها ستُخفي تحذيرات React المُفيدة وتجعل من بناء التطبيق أبطأ.
يُمكنِك في وضع التطوير إيجاد مخطّطات توضيحية لعمليّة وصل المُكوِّنات (mount)، وتحديثها، وفصلها (unmount)، وذلك باستخدام أدوات الأداء في المتصفحات التي تدعمها. على سبيل المثال:
\n![\"should](\"/static/e434ce2f7e64f63e597edf03f4465694/0a47e/devtools-dev.png\" "\\"\\"")
\n \n \n \n \n \nبما أنّ التابع shouldComponentUpdate أعاد القيمة false من أجل الشجرة الفرعية التي جذرها هو C2، فلم تُحاول React تصيير C2، وبهذا لم يتوجّب أيضًا استدعاء shouldComponentUpdate على C4 و C5.
بالنسبة للجذر C1 و C3 أعاد التابع shouldComponentUpdate القيمة true، وبذلك توجّب على React النزول حتى الفروع والتحقّق منها. بالنسبة للجذر C6 أعاد التابع shouldComponentUpdate القيمة true، وبما أنّ العناصر المُصيَّرة لم تكن متطابقة فتوجَّب على React تحديث DOM.
الحالة الأخيرة الهامّة هي الجذر C8. هنا يجب على React تصيير هذا المُكوّن، ولكن بما أنّ عناصر React التي أعادها كانت مطابقةً للعناصر المُصيَّرة سابقًا، فلم يجب عليها تحديث DOM.
\nلاحظ أنّه وجبَ على React إجراء تعديلات على DOM من أجل الجذر C6 فقط، والتي لم يكن هناك مفرًّا منها. بالنسبة للجذر C8 أنقذت نفسها من التحديث عن طريق مُقارنة عناصر React المُصيَّرة، ومن أجل التفرّعات C2 و C7 لم يجب عليها حتى مقارنة العناصر حيث أوقفنا ذلك من خلال التابع shouldComponentUpdate ولم يُستدعى التابع render.
إن كانت الطريقة الوحيدة لتغيير المُكوِّن هي تغيير props.color أو state.count، فبإمكانك أن تدع التابع shouldComponentUpdate يتحقّق من ذلك:
class CounterButton extends React.Component {\n constructor(props) {\n super(props);\n this.state = {count: 1};\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n if (this.props.color !== nextProps.color) {\n return true;\n }\n if (this.state.count !== nextState.count) {\n return true;\n }\n return false;\n }\n\n render() {\n return (\n <button\n color={this.props.color}\n onClick={() => this.setState(state => ({count: state.count + 1}))}>\n Count: {this.state.count}\n </button>\n );\n }\n}في هذه الشيفرة يتحقّق التابع shouldComponentUpdate إن كانت هناك أيّة تغييرات في props.color أو state.count. إن كانت قيمها لا تتغير فلن يُحدَّث المُكوِّن. إن أصبح مُكوِّنك أكثر تعقيدًا فيُمكنك إجراء مقارنة بين كافة حقول الخاصيّات props والحالة state لتحديد ما إذا كان ينبغي تحديث المُكوّن. طريقة المقارنة هذه شائعة بحيث تُزوّدنا React بمُساعِد لاستخدام هذا المنطق عن طريق الوراثة من الصّنف React.PureComponent. لذلك الشيفرة التالية هي طريقة أبسط لتحقيق نفس الشيء:
class CounterButton extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {count: 1};\n }\n\n render() {\n return (\n <button\n color={this.props.color}\n onClick={() => this.setState(state => ({count: state.count + 1}))}>\n Count: {this.state.count}\n </button>\n );\n }\n}في معظم الأوقات يُمكنك استخدام React.PureComponent بدلًا من كتابة التابع shouldComponentUpdate الخاص بك. يُجري هذا الصنف مقارنة بسيطة لذلك لا يُمكنك استخدامه إن كانت الخاصيّات والحالة مُعدَّلة بطريقة قد لا تلتقطها المقارنة البسيطة.
قد يصبح ذلك مشكلة بالنسبة لنا عند استخدامه مع بنى البيانات الأكثر تعقيدًا، فمثلًا لنفترض أنّك تريد من المُكوِّن ListOfWords تصيير قائمة من الكلمات المنفصلة بينها مع وجود مُكوّن أب يُدعى WordAdder والذي يُتيح لنا الضغط على زر لإضافة كلمة للقائمة، لن تعمل هذه الشيفرة بشكلٍ صحيح:
class ListOfWords extends React.PureComponent {\n render() {\n return <div>{this.props.words.join(',')}</div>;\n }\n}\n\nclass WordAdder extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n words: ['marklar']\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n // يسبب هذا المقطع خطأ\n const words = this.state.words;\n words.push('marklar');\n this.setState({words: words});\n }\n\n render() {\n return (\n <div>\n <button onClick={this.handleClick} />\n <ListOfWords words={this.state.words} />\n </div>\n );\n }\n}المشكلة هي قيام المُكوّن PureComponent بمقارنة بسيطة بين القيم القديمة والجديدة لـ this.props.words. وبما أنّ هذه الشيفرة تُعدِّل المصفوفة words في التابع handleClick الموجود في المُكوِّن WordAdder، فستُعتبَر القيم القديمة والجديدة للمصفوفة this.props.words متكافئة، على الرغم من أنّ الكلمات قد تغيّرت فعليًّا في المصفوفة، وبهذا لن يُحدَّث المُكوِّن ListOfWords على الرغم من أنّه يمتلك كلمات جديدة يجب تصييرها.
الطريقة الأبسط لتجاوز هذه المشكلة هي تجنّب تعديل القيم التي تستخدمها كخاصيّات أو حالة، فيُمكِن كتابة التابع handleClick السّابع باستخدام concat كما يلي:
handleClick() {\n this.setState(state => ({\n words: state.words.concat(['marklar'])\n }));\n}تدعم ES6 صياغة النشر لأجل المصفوفات والذي يُسهِّل هذه العمليّة. إن كنت تستخدم Create React App فهذه الصياغة متوفرة بشكل افتراضي لديك:
\nhandleClick() {\n this.setState(state => ({\n words: [...state.words, 'marklar'],\n }));\n};تستطيع أيضًا إعادة كتابة الشيفرة التي تُعدِّل الكائنات لتجنّب ذلك بطريقة مماثلة. فلنفترض مثلًا أنّنا لدينا كائن يُدعى colormap ونريد كتابة دالة لتغيير قيمة colormap.right لتكون 'blue'، فنكتب ما يلي:
function updateColorMap(colormap) {\n colormap.right = 'blue';\n}لكتابة ذلك بدون تعديل الكائن الأصلي نستخدم التابع Object.assign:
\nfunction updateColorMap(colormap) {\n return Object.assign({}, colormap, {right: 'blue'});\n}يُعيد التابع updateColorMap الآن كائنًا جديدًا بدلًا من تعديل القديم. Object.assign موجودة في ES6 وتحتاج إلى polyfill.
خاصيّة نشر الكائن تسهل تحديث الكائنات بدون تعديلها أيضًا:
\nfunction updateColorMap(colormap) {\n return {...colormap, right: 'blue'};\n}تم اصدار هذه الخاصية في JavaScript ES2018.
\nإن كنتَ تستخدم Create React App فسيكون التابع Object.assign وصيغة نشر الكائن متوفرة بشكلٍ افتراضي.
من المكتبات الأخرى التي تساعد على استخدام البيانات غير القابلة للتعديل نجد Immer و immutability-helper تُزوِّدك بنى البيانات غير القابلة للتعديل بطريقة سهلة لتتبّع التغييرات على الكائنات.
","frontmatter":{"title":"تحسين الأداء","next":null,"prev":null},"fields":{"path":"content/docs/optimizing-performance.md","slug":"docs/optimizing-performance.html"}}},"pageContext":{"slug":"docs/optimizing-performance.html"}},"staticQueryHashes":[]}