الأخطاء الأكثر شيوعًا في رمز رد الفعل التي ترتكبها (ربما)

مستوحاة من المقالات المقروءة على الوسيط ، قررت كتابة مقالتي وأخبرك بكيفية تجنب الأخطاء الأكثر شيوعًا في تطبيق React ولماذا تحتاج إلى القيام بذلك.

كل التعليمات البرمجية مكتوبة بأسلوب ES6 ، لذا لتكرارها ، تحتاج إلى استخدام Babel في مشروعك (وهناك آخرون لا يستخدمونها؟).

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

إذا كنت مهتمًا ، فمرحبًا بك في القط.

بين قوسين قبل كل فقرة ، تركت رابطًا لقاعدة eslint. يمكنك العثور عليها لاحقًا في git وإضافتها إلى مشروعك.

(رد فعل / ممنوع الدعائم المكون)

أول خطأ شائع هو تمرير "style" و "className" كدعائم إلى المكون الخاص بك. تجنب هذا لأنك تضيف الكثير من التعقيد إلى مكوناتك.

بدلاً من ذلك ، يمكنك استخدام مكتبة "classnames" وإضافة اختلافات مثيرة للاهتمام إلى المكون الخاص بك (إذا كنت تستخدم فئات css):

const { hasError, hasBorder } = this.props; const componentClasses = classnames({ 'your-component-main-class': true, 'your-component-main-class_with-error': hasError, 'your-component-main-class_with-border': hasBorder, }); 

(رد فعل / ممنوع أنواع الدعامة)

الخطأ التالي ليس propTypes بالمعلومات. لا تستخدم PropTypes.any و PropTypes.array و PropTypes.object. صِف أدواتك بأكبر قدر ممكن من التفاصيل. سيسمح لك ذلك بترك وثائق جيدة للمستقبل ، وسوف نشكرك (أو أي مطور آخر) عدة مرات.

 class MyComponent extends React.Component { static propTypes = { user: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, }), policies: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, type: PropTypes.string, value: PropTypes.string, }), } } 

(رد فعل / ممنوع أنواع الدعامة الأجنبية)

دعنا نواصل مع propTypes. لا تستخدم propTypes لمكون آخر:

 import SomeComponent from './SomeComponent'; SomeComponent.propTypes; 

قم بإنشاء ملف ستحتفظ فيه بالنماذج العامة بالترتيب:

 import { userShape, policiesArray } from '../common/global_prop_types'; 

سيساعد ذلك babel-plugin- convert - response -remove-prop-types على إزالة propTypes من رمز الإنتاج ويجعل تطبيقك أسهل قليلاً.

(رد فعل / عدم الوصول - الحالة في الحالة)

الخطأ التالي مثير للاهتمام:

 class MyComponent extends React.Component { state = { counter: 1, }; incrementCounter = () => this.setState({ counter: this.state.counter + 1 }); massIncrement = () => { // this code will lead to not what you expect this.incrementCounter(); this.incrementCounter(); } } 

لأن setState هي وظيفة حالة غير متزامنة للدولة في كلتا الحالتين ستكون هي نفسها.
سيكون this.state.counter 1 وسنحصل على:

 incrementCounter = () => this.setState({ counter: 1 + 1 }); incrementCounter = () => this.setState({ counter: 1 + 1 }); 

لتجنب ذلك ، يمكنك استخدام رد اتصال setState الذي يتلقى حالة الدولة كوسيطة:

 incrementCounter = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); 

(رد فعل / no-array-index-key)

هذا الخطأ أيضًا شائع جدًا ، لذلك اقرأ بعناية وتجنبه في المستقبل:

 users.map((user, index) => ( <UserComponent {...user} key={index} /> )); 

يستخدم React المفتاح prop كرابط لعنصر DOM ، وهذا يساعده في العثور على المكون الضروري وتقديمه بسرعة (كل شيء ، بالطبع ، أكثر تعقيدًا ، لكنني قمت بتبسيطه عن قصد).
ماذا يحدث إذا قمت بإضافة مستخدم جديد في منتصف المصفوفة؟ ستضطر شركة React لإعادة عرض جميع UserComponents بعد إضافة عنصر جديد ، حيث سيتم تغيير الفهرس لعدد كبير من المكونات. استخدم مفاتيح فريدة بدلاً من ذلك. طريقة بسيطة للغاية للخروج هي المعرف الذي تحصل عليه من قاعدة البيانات الخاصة بك:

 users.map((user) => ( <UserComponent {...user} key={user.id} /> )); 

(رد فعل / no-did-mount-set-state) ، (رد فعل / no-did-update-set-state)

هذا الخطأ شائع أيضًا في ممارستي. إذا حاولت تحديث الحالة في أسلوب ComponDidUpdate ، فستحصل على حلقة إعادة عرض لا نهائية. يبدأ React في التحقق من إعادة العرض عندما يغير المكون الحالة أو الدعائم. إذا قمت بتغيير الحالة بعد تحميل المكون في DOM أو تم تحديثه بالفعل ، فستقوم بتشغيل الفحص مرارًا وتكرارًا ...
عند تحديث الحالة في ComponDDMount ، يمكنك استدعاء المكون مرة أخرى ، حيث يتم استدعاء الوظيفة مرة واحدة بعد تحميل المكون في DOM.
إذا كنت بحاجة إلى تحديث البيانات بعد تركيب المكون ، أقترح استخدام متغيرات الفئة:

 class MyComponent extends React.Component { componentDidMount() { this.veryImportantDataThatCanBeStoredOnlyAfterMount = 'I'll be back!'; } veryImportantDataThatCanBeStoredOnlyAfterMount = void 0; render() { return <div /> } } 

(رد فعل / عدم وجود حالة طفرة مباشرة)

إن طفرة الدولة خطأ كبير جدا. سوف تؤدي الطفرة غير المتحكم فيها إلى أخطاء غير قابلة للكشف ، ونتيجة لذلك ، إلى مشاكل كبيرة. رأيي الشخصي هو استخدام js غير القابل للتغيير ، كمكتبة تضيف هياكل ثابتة. ويمكنك استخدامها مع مكتبة إدارة الحالة Redux / MobX / أي. يمكنك أيضًا استخدام deepClone من Lodash إلى حالة الاستنساخ ثم تحوير الاستنساخ ، أو استخدام ميزة JS الجديدة - تدمير:

 updateStateWrong = () => this.state.imRambo = true; updateStateRight = () => { const clonedState = cloneDeep(this.state); clonedState.imAGoodMan = true; this.setState(clonedState); } updateWithImmutabelJS = () => { const newState = this.state.data.set('iUseImmutableStructure', true); this.setState(data: newState); } updateWithDestructuring = () => this.setState({ ...this.state, iUseDestructuring: true }); 

(رد الفعل / تفضل وظيفة عديمة الجنسية)

تصف هذه القاعدة تحسين الشفرة والتطبيق أكثر من الخطأ ، ولكن ما زلت أوصي باتباع هذه القاعدة. إذا كان المكون الخاص بك لا يستخدم الحالة ، فاجعله مكونًا عديم الحالة (أفضل مصطلح "مكون نقي"):

 class MyComponentWithoutState extends React.Component { render() { return <div>I like to write a lot of unneeded code</div> } } const MyPureComponent = (props) => <div>Less code === less support</div> 

(أنواع التفاعل / الدعامة)

يرجى دائمًا إضافة التحقق من نوع الدعائم (propTypes) إذا تلقى المكون الخاص بك الدعائم. فكر في الأمر على أنه توثيق لكودتك. أكثر من مرة ستقول لنفسك "شكرا" لهذا (وربما لي :)). سوف تساعدك PropTypes على فهم وفهم ما يمكن للمكون تقديمه ، بالإضافة إلى ما يحتاجه للعرض.

 MyPureComponent.propTypes = { id: PropTypes.number.isRequired, // And I know that without id component will not render at all, and this is good. } 

(رد / jsx-no-bind)

خطأ شائع وكبير جدًا رأيته في الرمز عدة مرات. لا تستخدم وظيفة الربط والسهم في Jsx. أبدا. المزيد.
المكان الأكثر حرارة في الجحيم ينتظر الشخص الذي يكتب .bind (هذا) في JSX في معالج الحدث.
في كل مرة يتم فيها عرض مكون ، سيتم إعادة إنشاء وظيفتك ، وهذا يمكن أن يبطئ بشكل كبير التطبيق الخاص بك (هذا يرجع إلى حقيقة أن جامع القمامة سيضطر إلى العمل في كثير من الأحيان). بدلاً من .bind (هذا) ، يمكنك استخدام دالات السهم بطريقة معينة:

 class RightWayToCallFunctionsInRender extends React.Component { handleDivClick = (event) => event; render() { return <div onClick={this.handleDivClick} /> } } const handleDivClick = (event) => event; const AndInPureComponent = () => { return <div onClick={handleDivClick} /> } 

(رد / jsx-no-target-blank)

خطأ أمني. يبدو غريباً جداً بالنسبة لي أن الناس ما زالوا يرتكبون هذا الخطأ. كتب الكثير من الناس الكثير من المقالات حول هذا الموضوع في عام 2017.
إذا قمت بإنشاء ارتباط بالسمة target = '_ blank' ، فتأكد من إضافة rel = 'noreferrer noopener' إليه. بسيط جدا:

 <a href="https://example.com" target="_blank" rel="noreferrer noopener" /> 

شكرا لك

هذا كل ما أود أن أخبرك به كجزء من هذه المقالة. سأكون ممتنًا للغاية إذا تركت لي ، قرائي ، تعليقاتك أو تعليقك وشاركنا رأيك في المشاكل التي وصفتها في هذه المقالة. يمكنك أيضًا أن تخبرني عن أخطائي وأخطائك في التعليمات البرمجية وعن كل شيء تعتبره ضروريًا لإخباره. شكرا لك مرة أخرى!