ما كنت أتمنى أن أعرفه عندما بدأت العمل مع React.js

بعد إصداره الأولي في 29 مايو 2013 ، استحوذ React.js على الإنترنت. ليس سراً أنني أنا والعديد من المطورين الآخرين مدينون بنجاحهم لهذا الإطار المذهل.

مع Medium مليء بدروس React.js التعليمية ، أتمنى أن يخبرني أحدهم بهذه النصائح عندما بدأت.

لا تحتاج إلى ربط (هذا) عند استخدام وظيفة السهم

عادة ، سيكون لديك شيء مثل هذا عندما يكون لديك مكون متحكم فيه:

class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); }
 handleClick(event){ // your event handling logic }
 render(){ return (  Click Me  ); }}

أنت تكتب .bind(this)إلى كل طريقة موجودة ، لأن معظم البرامج التعليمية تخبرك بالقيام بذلك. إذا كان لديك العديد من المكونات الخاضعة للرقابة ، فسوف ينتهي بك الأمر مع مجموعة كبيرة من الرموز في ملف constructor(){}.

بدلاً من ذلك ، يمكنك:

class Foo extends React.Component{
 handleClick = (event) =>; { // your event handling logic }
 render(){ return (  Click Me  ); }}

كيف؟

تستخدم وظيفة السهم في ES6 ميزة Lexical Scoping ، والتي تتيح للطريقة الوصول إلى thisمكان تشغيلها.

عندما يعمل عمال الخدمة ضدك

يعتبر عمال الخدمة رائعون لتطبيق الويب التدريجي ، والذي يسمح بالوصول دون اتصال بالإنترنت ويحسن للمستخدمين الذين يعانون من ضعف اتصالات الإنترنت.

ولكن عندما لا تكون على دراية بأن عامل الخدمة يقوم بتخزين ملفاتك الثابتة مؤقتًا ، فإنك تنشر الإصلاحات السريعة بشكل متكرر.

فقط للعثور على موقعك لا يتم تحديثه. ؟

لا داعي للذعر ، تأكد من src/index.js:

// Make sure it's set to unregisterserviceWorker.unregister();

اعتبارًا من الإصدار 16.8 ، يجب أن يكون هذا الخط serverWorker.unregister()افتراضيًا.

ولكن إذا قرروا التغيير مرة أخرى ، فستعرف أين تبحث.

99٪ من الوقت لا تحتاج إلى الإخراج

يوفر Create React App خيارًا yarn ejectلمشروعك لتخصيص عملية البناء الخاصة بك.

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

يشبه إخراج مشروع React الخاص بك فتح غطاء محرك السيارة قيد التشغيل وتغيير المحرك بسرعة أكبر بنسبة 1٪.

بالطبع ، إذا كنت بالفعل خبيرًا في Webpack ، فمن المفيد تخصيص عملية الإنشاء لتناسب احتياجات المشروع.

عندما تحاول التسليم في الوقت المحدد ، ركز جهودك على المكان الذي تحرك فيه الإبرة إلى الأمام.

ESlint Auto Fix On Save يوفر الكثير من الوقت

ربما تكون قد نسخت بعض التعليمات البرمجية من مكان به تنسيق خارج عن السيطرة. نظرًا لأنك لا تستطيع تحمل كيف يبدو قبيحًا ، فإنك تقضي الوقت في إضافة المساحات يدويًا.

باستخدام ESLint و Visual Studio Code Plugin ، يمكنه إصلاحه عند الحفظ.

كيف؟

  1. في حسابك package.json، أضف بعض تبعيات dev وقم بتنفيذ npm iأو yarn:
"devDependencies": {
 "eslint-config-airbnb": "^17.1.0",
 "eslint-config-prettier": "^3.1.0",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-jsx-a11y": "^6.1.1",
 "eslint-plugin-prettier": "^3.0.0",
 "eslint-plugin-react": "^7.11.0"
}

2. قم بتثبيت ملحق ESLint

3. تمكين الإصلاح التلقائي عند الحفظ

لست بحاجة إلى Redux ، أو مكونات على غرار ، إلخ ...

كل أداة لها غرضها. ومع ذلك ، من الجيد معرفة الأدوات المختلفة.

إذا كان كل ما لديك مطرقة ، فكل شيء يبدو وكأنه مسمار - أبراهام ماسلو

تحتاج إلى التفكير في وقت الإعداد لبعض المكتبات التي تستخدمها ومقارنتها بـ:

  • ما هي المشكلة التي أحاول حلها؟
  • هل سيعيش هذا المشروع طويلا بما يكفي للاستفادة من هذه المكتبة؟
  • هل تقدم React بالفعل شيئًا خارج الصندوق؟

مع توفر Context و Hooks لـ React الآن ، هل ما زلت بحاجة إلى Redux؟

أوصي بشدة بـ Redux Offline عندما يكون المستخدمون في بيئة اتصال إنترنت ضعيفة.

إعادة استخدام معالج الأحداث

إذا كنت لا ترغب في كتابة نفس الشيء مرارًا وتكرارًا ، فقد تكون إعادة استخدام معالج الأحداث خيارًا:

class App extends Component {
 constructor(props) { super(props); this.state = { foo: "", bar: "", }; }
 // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.setState({ [name]: value });
 }; render() { return ( ); }}

setState غير متزامن

ساذجني يكتب شيئًا مثل:

 constructor(props) { super(props); this.state = { isFiltered: false }; }
 toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered should be true, but it's not if (this.state.isFiltered) { // Do some filtering } };

الخيار 1: تمرير الدولة إلى أسفل

toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState);};
filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering }};

الخيار 2: الوظيفة الثانوية لاستدعاء setState

toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); });};
filterData = () => { if (this.state.isFiltered) { // Do some filtering }};

استنتاج

لقد وفرت لي هذه النصائح الكثير من الوقت ، وأنا متأكد من أن هناك المزيد. لا تتردد في مشاركتها في قسم التعليقات.

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