رد فعل البرنامج التعليمي الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون

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



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 25. ورشة العمل. مكونات الطبقة القائمة

→ الأصل

ob الوظيفة

يوجد أدناه الكود الذي يجب وضعه في ملف index.js لتطبيق React القياسي الذي تم إنشاؤه بواسطة create-react-app . قم بتحويل المكونات الوظيفية التي ستجدها في هذا الرمز إلى مكونات قائمة على الفصل ، بالإضافة إلى إيجاد وإصلاح الأخطاء الصغيرة.

رمز ملف index.js :

 import React from "react" import ReactDOM from "react-dom" // #1 function App() {   return (       <div>           <Header />           <Greeting />       </div>   ) } // #2 function Header(props) {   return (       <header>           <p>Welcome, {props.username}!</p>       </header>   ) } // #3 function Greeting() {   const date = new Date()   const hours = date.getHours()   let timeOfDay     if (hours < 12) {       timeOfDay = "morning"   } else if (hours >= 12 && hours < 17) {       timeOfDay = "afternoon"   } else {       timeOfDay = "night"   }   return (       <h1>Good {timeOfDay} to you, sir or madam!</h1>   ) } ReactDOM.render(<App />, document.getElementById("root")) 

olution الحل

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


صفحة مصدر المتصفح

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

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

تجدر الإشارة إلى أن المكونات عادةً ما توضع في ملفات مختلفة ، لكن في هذه الحالة وصفناها جميعًا في ملف واحد.

ننتقل إلى تحويل المكون الوظيفي App إلى مكون يعتمد على الفصل. للقيام بذلك ، يكفي إحضار الكود الخاص به إلى هذا النموذج:

 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } 

الآن تأتي الكلمة الأساسية class قبل اسم المكون ، ثم extends React.Component الأمر extends React.Component ، وبعد ذلك ، يتم وصف نص الفئة بين قوسين extends React.Component . يجب أن يكون هناك طريقة render() إرجاع ما عدنا من المكون الوظيفي. تتم معالجة المكونات الأخرى بنفس الطريقة. انتبه إلى بناء <Header username="vschool"/> . سنقوم هنا بتمرير خاصية username بقيمة vschool المكون Header ، وبالتالي إصلاح الخطأ الموجود في التطبيق الأصلي.

كما تعلمون بالفعل ، يتوقع المكون Header الحصول على خاصية username ، وفي المكون الوظيفي ، يتم الوصول إلى هذه الخاصية باستخدام props.username ( props في هذه الحالة هي وسيطة الدالة التي تصف المكون). في المكونات المستندة إلى الفصل ، يبدو الأمر نفسه مثل this.props.username . فيما يلي الرمز المعاد تصميمه لمكون Header :

 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } 

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

 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } 

لاحظ أن هذا المكون تم استخدامه في الإعلان عن هذا المكون: class Greeting extends Component . يتم ذلك غالبًا من أجل الإيجاز ، ولكن لكي يعمل هذا ، نحتاج إلى تحسين الأمر import react ، بحيث نصله إلى هذا النموذج:

 import React, {Component} from "react" 

إليك ما تبدو عليه صفحة التطبيق المعاد تدويره في المتصفح.


إعادة تصميم صفحة التطبيق في المتصفح

في الواقع ، يبدو مثل صفحة التطبيق الأصلي ، والفرق الوحيد الملحوظ بين هذه الصفحات هو أن اسم المستخدم الذي تم تمريره إلى مكون Header يتم الآن عرضه في السطر الأول.

فيما يلي الرمز الكامل لملف index.js المعالج:

 import React, {Component} from "react" import ReactDOM from "react-dom" // #1 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } // #2 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } // #3 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } ReactDOM.render(<App />, document.getElementById("root")) 

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

الدرس 26. حالة المكون

→ الأصل

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

الحالة هي فقط البيانات التي يتحكم فيها المكون. على وجه الخصوص ، هذا يعني أن المكون يمكنه تغيير هذه البيانات. في الوقت نفسه ، لا يمكن تغيير الخصائص المألوفة لنا بالفعل ، والتي تم الحصول عليها بواسطة المكون من المكون الأصل ، بواسطة المكون المتلقي. وهي ، وفقا لوثائق React ، غير قابلة للتغيير (غير قابلة للتغيير). على سبيل المثال ، إذا حاولنا ، في مكون يستند إلى فصل this.props.name = "NoName" ، استخدام بنية مثل this.props.name = "NoName" ، this.props.name = "NoName" رسالة خطأ.

تجدر الإشارة إلى أنه إذا احتاج بعض المكونات إلى العمل مع الحالة ، فيجب أن يكون مكونًا يستند إلى الفصل. دعنا نتحدث عن كيفية تجهيز المكون بالحالة من خلال البدء App.js التعليمات البرمجية التالية ، والتي هي محتويات ملف App.js لمشروع قياسي تم إنشاؤه بواسطة create-react-app :

 import React from "react" class App extends React.Component {   render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } export default App 

هذا ما تبدو عليه صفحة التطبيق في المتصفح.


صفحة التطبيق في المتصفح

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

 class App extends React.Component {   constructor() {         }     render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } Constructor() 

هذه طريقة خاصة مضمنة في JavaScript تم تصميمها لإنشاء وتهيئة كائنات استنادًا إلى الفئات. في الواقع ، إذا كنت بحاجة إلى تهيئة شيء ما عند إنشاء كائن ، فإن العمليات المناظرة يتم تنفيذها بالضبط في طريقة constructor() .

أول ما يجب فعله في رمز المنشئ هو استدعاء مُنشئ الفئة الأصل. يتم ذلك باستخدام الدالة super() . في مُنشئ الفئة الأصل ، يمكن إجراء عمليات تهيئة معينة ، ستكون نتائجها مفيدة لكائننا. إليك ما سيبدو عليه منشئ الصف الآن:

 constructor() {   super() } 

الآن ، من أجل تجهيز المكون بالحالة ، نحتاج ، في المُنشئ ، إلى إضافة خاصية state إلى مثيل الفئة. هذه الخاصية هي كائن:

 constructor() {   super()   this.state = {} } 

نحن هنا تهيئة مع كائن فارغ. يمكنك العمل مع الحالة في رمز المكون باستخدام this.state . أضف خاصية جديدة إلى الولاية:

 constructor() {   super()   this.state = {       answer: "Yes"   } } 

الآن دعونا نفكر في كيفية استخدام ما يتم تخزينه في الدولة في الكود. أذكر أن المكون يعرض السؤال Is state important to know? . الدولة يخزن الجواب على هذا السؤال. لإضافة هذه الإجابة بعد السؤال ، تحتاج إلى أن تفعل الشيء نفسه كما نفعل عادةً عن طريق إضافة تصميمات JavaScript إلى رمز JSX. أي ، قم بإضافة {this.state.answer} إلى نهاية السطر. نتيجة لذلك ، سيبدو رمز المكون بالكامل كما يلي:

 class App extends React.Component {   constructor() {       super()       this.state = {           answer: "Yes"       }   }     render() {       return (           <div>               <h1>Is state important to know? {this.state.answer}</h1>           </div>       )   } } 

وهنا كيف ستبدو صفحة التطبيق في المتصفح.


صفحة التطبيق في المتصفح

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

 <ChildComponent answer={this.state.answer}/> 

على الرغم من أننا لن نتحدث بالتفصيل عن كيفية تغيير البيانات المخزنة في حالة المكون. نلاحظ فقط أنه عند استدعاء الأسلوب setState() ، والذي يُستخدم لحل هذه المشكلة ، لن يتم تغيير حالة المكون فحسب ، بل سيتم أيضًا تحديث بيانات الحالة المرسلة عبر آلية الخاصية إلى مكوناتها الفرعية. بالإضافة إلى ذلك ، سيؤدي تغيير الحالة إلى تغيير البيانات من الحالة المعروضة على صفحة التطبيق تلقائيًا.

ملخص

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

أعزائي القراء! إذا كنت تستخدم React في الممارسة ، فيرجى إخبارنا بكيفية إدارة حالة المكونات. هل تستخدم أدوات React القياسية أو أي شيء آخر؟