ບົດແນະ ນຳ ກ່ຽວກັບ React: ຄວາມແຕກຕ່າງລະຫວ່າງອົງປະກອບຂອງຫ້ອງແລະສ່ວນປະກອບທີ່ເຮັດວຽກ

ທ່ານມີປະຕິກິລິຍາ ໃໝ່ ບໍ? ທ່ານຕ້ອງການຮຽນຮູ້ສິ່ງ ໃໝ່ໆ ພາຍໃນ 5 ນາທີຫລື ໜ້ອຍ ກວ່ານີ້ບໍ?. ໃຫ້ຮຽນຮູ້ກ່ຽວກັບສ່ວນປະກອບປະຕິກິລິຍາ.

ອົງປະກອບແມ່ນຫຍັງ?

ສະຫລຸບທັງ ໝົດ, ກ່ອນທີ່ພວກເຮົາຈະລົງເລິກໃນຫົວຂໍ້ນີ້, ພວກເຮົາຄວນຮູ້ຢ່າງສົມບູນວ່າອົງປະກອບນັ້ນແມ່ນຫຍັງ.

ສ່ວນປະກອບ (ໃນ React) ຈະຖືກອະທິບາຍວ່າເປັນສ່ວນ ໜຶ່ງ ຫຼືສ່ວນ ໜຶ່ງ ຂອງແອັບ our ຂອງພວກເຮົາເຊິ່ງສາມາດ ນຳ ໃຊ້ຄືນ ໃໝ່ ໃນໂຄງການທັງ ໝົດ (ແລະອື່ນໆ, ບາງທີ), ມັນມັກຈະກ່ຽວຂ້ອງກັບອົງປະກອບ UI ແລະພຶດຕິ ກຳ ຂອງມັນ.

ໃນປັດຈຸບັນ, ສົມມຸດວ່າທ່ານຮູ້ພື້ນຖານ, ໃຫ້ກວດເບິ່ງກ່ຽວກັບສອງປະເພດຂອງສ່ວນປະກອບທີ່ພວກເຮົາສາມາດສ້າງໃນໂຄງການ React, ສ່ວນປະກອບແລະສ່ວນປະກອບທີ່ເຮັດວຽກ.

ອົງປະກອບຂອງຫ້ອງຮຽນ

ນີ້ກໍ່ເອີ້ນວ່າອົງປະກອບພື້ນຖານ. ນັບຕັ້ງແຕ່ ECMAScript 2015, ພວກເຮົາມີ“ ຊັ້ນ” ໃນພາສາ Javascript. React ໃຊ້ syntax ນີ້ເພື່ອສ້າງສ່ວນປະກອບທີ່ມີຊີວິດຊີວາກັບຊີວິດ. ລັດແມ່ນຖືກ ນຳ ໃຊ້ທົ່ວໄປເພື່ອປ່ຽນແປງພຶດຕິ ກຳ ຂອງສ່ວນປະກອບຂອງພວກເຮົາຫຼືລູກຫຼານຂອງພວກເຮົາ.

ໃຫ້ລະຫັດລະຫັດນີ້. ຕໍ່ໄປນີ້ພວກເຮົາມີ“ ຫ້ອງຮຽນ JS” ທີ່ສືບທອດການເຮັດວຽກຈາກ React.Component, ຕໍ່ໄປພວກເຮົາປະກາດຜູ້ກໍ່ສ້າງຂອງຕົນຜູ້ທີ່ໄດ້ຮັບ props ເປັນການໂຕ້ຖຽງ. ຕໍ່ໄປ, ພວກເຮົາເອີ້ນວ່າ super, ເພື່ອສົ່ງຂໍ້ມູນໃຫ້ກັບສ່ວນປະກອບພໍ່ແມ່, ນີ້ແມ່ນຕ້ອງການເມື່ອພວກເຮົາສ້າງອົງປະກອບປະເພດນີ້.

ຄຳ ວ່າ "ໂປແກມ" ແມ່ນວັດຖຸທີ່ໄດ້ຮັບຄຸນລັກສະນະທັງ ໝົດ ທີ່ພວກເຮົາ ນຳ ໃຊ້ສ່ວນປະກອບດັ່ງກ່າວເປັນແທັກ.

ສ່ວນປະກອບຂອງໂຄມໄຟມີຂໍ້ສະ ເໜີ ຂັ້ນພື້ນຖານ, ມັນສະ ໜອງ ບລັອກ HTML ດ້ວຍຕົວ ໜັງ ສືແລະປຸ່ມ.

ການກົດປຸ່ມປ່ຽນປຸ່ມປິດຫລືປິດໂຄມໄຟ, ນີ້ແມ່ນບ່ອນທີ່ລັດຂອງພວກເຮົາເຂົ້າໄປໃນເກມ, ໃນແຖວທີ 4, ພວກເຮົາເລີ່ມຕົ້ນສະຖານະພາບຂອງໂຄມໄຟ, ແລະຫລັງຈາກນັ້ນ, ພວກເຮົາປະກາດວິທີການປ່ຽນແສງ, ມັນຈະປ່ຽນສະຖານະພາບ ຂອງໂຄມໄຟຂອງພວກເຮົາ.

“ ລັດ” ນີ້ແມ່ນວັດຖຸທີ່ມີຄຸນສົມບັດບາງຢ່າງເຊິ່ງຈະປ່ຽນແປງໃນເວລາການປະຕິບັດການຮຽນ. ມັນບໍ່ຄວນປ່ຽນແປງໂດຍກົງແຕ່ວິທີການທີ່ຕັ້ງໄວ້.

ທ່ານສາມາດປ່ຽນສະຖານະການໃນວິທີການນີ້:

ອົງປະກອບທີ່ເຮັດວຽກ

ໃນປັດຈຸບັນ, ຖ້າພວກເຮົາຕ້ອງການສ້າງບາງສ່ວນ ໜ້ອຍ, ງ່າຍດາຍແລະບໍ່ມີປະໂຫຍດ, ນີ້ຈະຊ່ວຍທ່ານໃນການຫຼຸດລະຫັດທີ່ໃຊ້ແລະ ນຳ ໃຊ້ຫຼັກການ DRY ງ່າຍຂຶ້ນ. ສ່ວນປະກອບທີ່ມ່ວນຊື່ນແມ່ນ ໜ້າ ທີ່ javascript ທີ່ສົ່ງຄືນບາງອົງປະກອບ Jxs.

ໃຫ້ກວດເບິ່ງຕົວຢ່າງຂອງສ່ວນປະກອບ Bulb ນີ້.

ຢູ່ນີ້, ພວກເຮົາມີ ໜ້າ ທີ່ປົກກະຕິ, ມັນໄດ້ຮັບວັດຖຸທີ່ຖືກ ທຳ ລາຍໂດຍມີຊັບສິນທີ່ມີຊື່ວ່າ lampState, ມັນປ່ຽນເປັນຕົວແປທ້ອງຖິ່ນ, ແລະພວກເຮົາປະເມີນວ່າມັນແມ່ນຄວາມຈິງຫຼືບໍ່ຈິງທີ່ຈະສົ່ງຄືນ img ທີ່ແຕກຕ່າງກັນ.

ຕອນນີ້, ພວກເຮົາສາມາດໃຊ້ມັນເຂົ້າໃນສ່ວນປະກອບຂອງໂຄມໄຟເພື່ອສະແດງວິທີການທີ່ມັນສາມາດເຮັດວຽກຮ່ວມກັນໄດ້ດີ.

ນັ້ນແມ່ນມັນ, ເມື່ອທ່ານກົດປຸ່ມປ່ຽນປຸ່ມ, ຮູບພາບຂອງຫລອດໄຟຈະປ່ຽນໄປ.

ຈະເປັນແນວໃດກ່ຽວກັບ Hooks?

Hooks ແມ່ນຄຸນສົມບັດທີ່ ກຳ ລັງຈະມາເຖິງເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດ ນຳ ໃຊ້ສະພາບການໃນສ່ວນປະກອບທີ່ເປັນປະໂຫຍດ. ສິ່ງນີ້ ຈຳ ເປັນຕ້ອງໄດ້ອະທິບາຍດ້ວຍລາຍລະອຽດເພີ່ມເຕີມ, ເພາະວ່າພວກເຮົາຕ້ອງການທີ່ຈະຂຸດຄົ້ນຢ່າງເລິກເຊິ່ງໃນປະຕິກິລິຍາແລະຂ້ອຍກໍ່ຄິດວ່າມັນສົມຄວນທີ່ຈະຂຽນບົດຄວາມຂອງມັນເອງ.

ຂອບໃຈທີ່ອ່ານ, ຖ້າທ່ານມັກຫລືບໍ່, ໃຫ້ ຄຳ ຄິດເຫັນກັບຂ້ອຍ .-