Back to Question Center
0

Дээд захиалгын бүрэлдэхүүн хэсэг: Reaction Application Design Pattern            Дээд захиалгын бүрэлдэхүүн хэсгүүд: Reaction application design pattern PatternRelated Semalt: ES6AngularJSAjaxReactjQueryL ... Ивээн тэтгэгч

1 answers:
Дээд захиалгын бүрэлдэхүүн хэсэг: Reaction Application Design pattern

Энэ нийтлэл бол зочин зохиогч Жак Франклин . SitePoint зочдын бичлэгүүд нь таныг зохиогчийн эрхтэй зохиогчид болон Javascript-н нийгэмлэгийн орчуулагчид хүргэх зорилготой юм

Энэ өгүүлэлд бид Semalt програмыг цэвэр, сайтар бүтэцтэй, хадгалахад хялбар байлгахын тулд Higher Order Components хэрхэн ашиглах талаар ярилцах болно. Цэвэр функц нь кодыг хэрхэн цэвэр байлгадаг талаар, мөн эдгээр зарчмууд нь Semalt компонентуудад хэрхэн хэрэглэгдэж болох талаар ярилцах болно.

Цэвэр үйл ажиллагаа

Дараах шинж чанартай нийцэж байвал функцийг цэвэр гэж үзнэ:

  • Энэ бүх өгөгдлүүд нь аргумент гэж мэдэгддэг
  • Энэ нь өгсөн өгөгдөл эсвэл бусад өгөгдлийг өөрчилдөггүй (эдгээрийг ихэвчлэн гаж нөлөө гэж нэрлэдэг )
  • ижил оролт өгөгдсөн бөгөөд үргэлж ижил ижил гаралтыг буцаана.

Жишээ нь нэмэх функц нь цэвэр:

     функц нэмэх (x, y) {x + y буцах;}    

Гэхдээ доорх муу нэмэх функц нь муу байна:

     var y = 2;функцийн мууAdd (x) {x + y буцах;}    

Энэ функц нь шууд өгөгдөөгүй өгөгдлийг лавлах учраас цэвэр биш юм - microsoft problem report tool. Үүний үр дүнд энэ функцийг ижил оролтоор дуудаж өөр гаралтыг гаргана:

     var y = 2;badAdd  
// 5y = 3;badAdd
// 6

Та цэвэр функцуудын талаар илүү ихийг уншихын тулд "Бодит цэвэр програмчлалын танилцуулга" Марк Браун уншиж болно.

Semalt цэвэр функцууд нь маш их ашигтай байдаг бөгөөд дибаг хийх, програмыг шалгахад илүү хялбар байдаг, заримдаа гаж нөлөөтэй цэвэр бус үйлдлүүдийг үүсгэх эсвэл таны шууд хандах боломжгүй байгаа функцүүдийн зан төлөвийг өөрчлөх хэрэгтэй болно. (жишээлбэл, номын сангийн функц). Үүнийг идэвхжүүлэхийн тулд бид өндөр захиалгын функцуудыг үзэх хэрэгтэй.

Дээд тушаалын чиг үүрэг

Дээд захиалгын функц нь дуудагдсан үед өөр функцийг буцаах функц юм. Мораль нь тэд бас функцээр функцийг авч явдаг, гэхдээ энэ нь өндөр дараалал гэж тооцогдох функцийг шаарддаггүй.

Дээрхээс нэмэх функц байгаа бөгөөд бид үүнийг дуудахад бид үр дүнг буцаахын өмнө консол руу консолоо бүртгэдэг. Бид add функцийг засварлах боломжгүй учраас шинэ функц үүсгэхийн оронд:

     функц addAndLog (x, y) {var result = add (x, y);консол. лог ('үр дүн', үр дүн);буцах үр дүн;}    

Бид функцийг бүртгэх үр дүн ашигтай гэдгийг бид шийддэг бөгөөд одоо хасах функцтай ижилхэн хийхийг хүсч байна. Дээрх хувилбарын оронд өгөгдсөн функцийг дуудаж функцийг дуудаж шинэ функцийг буцаана дээд дарааллын функц -ийг бичиж болно.

     функцийн logAndReturn (func) {буцах функц    {var args = Array. загвар. зүсмэл. дуудлага (аргументууд);var result = func. хэрэглэх (null, args);консол. лог ('үр дүн', үр дүн);буцах үр дүн;}}    

Одоо бид энэ функцийг ашиглаж 39-ийг ба хасах нэмэхийн тулд үүнийг ашиглана:

     var addAndLog = logAndReturn (нэмэх);addAndLog (4, 4) // 8-г буцаадаг, 'Үр дүн 8' нь бүртгэгдсэн байнаvar хасахAndLog = logAndReturn (хасах);хасахAndLog (4, 3) // 1 нь буцааж өгч байна, 'Үр дүн 1' нь бүртгэгдсэн байна;    

logAndReturn нь HOF нь аргумент байдлаар функцийг авч бидний дуудаж болох шинэ функцийг буцаана. Эдгээр нь зан төлөвийг өөрчилж чадахгүй байгаа функцүүдийг бооход үнэхээр ашигтай байдаг. Энэ талаар дэлгэрэнгүй мэдээллийг M.

Үүнээс гадна та дээрх кодыг үйлдэл дээр нь харуулсан энэ Semalt-ыг шалгаж болно.

Дээд захиалгын бүрэлдэхүүн

Semalt руу шилжихийн тулд бид дээрхтэй адил логикийг ашиглан одоо байгаа Semalt компонентыг авч, зарим нэмэлт зан үйлийг өгдөг.

Энэ хэсэгт бид React Router, React нь де факто чиглүүлэх шийдлийг ашиглах болно. Хэрэв та номын сантай болмоор байвал GitHub дээр React Router Tutorial-г санал болгож байна.

Чиглүүлэгчийн Чиглүүлэгчийн Холболтын хэсэг

React Router нь Реакт аппликешн дахь хуудсуудын хооронд холбоход хэрэглэгддэг бүрэлдэхүүнийг хангадаг. Үүнийг бүрэлдэхүүн идэвхжүүлдэг нэг шинж чанар нь activeClassName юм. нь энэ өмчтэй бөгөөд одоо идэвхтэй байгаа (хэрэглэгч холбоосыг зааж байгаа URL дээр), бүрэлдэхүүн хэсэг нь энэ ангилалд өгч хөгжүүлэгчийг үүнийг хэвлэж чадна.

Энэ нь үнэхээр ашигтай шинж чанартай бөгөөд бидний таамаглалаар бид энэ хөрөнгийг үргэлж ашиглахыг хүсдэг. Гэсэн хэдий ч энэ нь бидний бүрэлдэхүүн хэсгүүдийг маш дэлгэрэнгүй болгохыг бид маш хурдан олж мэдээд:

      Нүүр хуудас  About  Холбоо барих     

Бидэнд ангийн нэрийг давтах хэрэгтэй. Энэ нь бидний бүрэлдэхүүн хэсгүүдийг бүрэлдүүлж байгаа төдийгүй, бид үүнийг олон газарт хийхээр ангийн нэрийг өөрчлөх шийдвэр гаргадаг гэсэн үг юм.

Үүний оронд бид бүрэлдэхүүнийг буулгаж байгаа бүрэлдэхүүнийг бичиж болно:

     var AppLink = React. createClass ({render: function    {буцах ({энэ. тулгуур. хүүхдүүд};);}});    

Одоо бид энэ холбоосыг ашиглаж болно:

      Home  About  Холбоо барих     

Та энэ жишээ Plunker дээр ажиллаж байгааг харж болно.

React ecosystem-д эдгээр бүрэлдэхүүн хэсгүүдийг илүү өндөр дарааллын бүрэлдэхүүн хэсгүүд гэж нэрлэдэг бөгөөд тэдгээр нь одоо байгаа бүрэлдэхүүн хэсгийг аваад, одоо байгаа бүрэлдэхүүн хэсгийг өөрчлөхгүйгээр арай өөрөөр шилжүүлдэг. Та эдгээрийг боодлын бүрдэл хэсгүүд гэж үзэж болох боловч тэдгээрийг ерөнхийдөө React дээр суурилсан контент доторх дээд түвшний захиалгын хэсгүүд гэж нэрлэдэг.

Функциональ, харъяалалгүй бүрэлдэхүүн

React 0. 14-т үйл ажиллагаа, харъяалалгүй бүрэлдэхүүн хэсгүүдийн дэмжлэгийг танилцуулсан. Сагамал нь дараах шинж чанартай бүрэлдэхүүн хэсэгтэй:

  • тэд ямар ч төлөв байхгүй
  • Тэд Reaction lifecycle арга хэрэглэдэггүй (componentWillMount )
  • тэдгээр нь зөвхөн render аргыг тодорхойлж өгдөг.

Хэрвээ бүрэлдэхүүн хэсэг нь дээрхийг баримталвал Reaction-г ашиглахын оронд үүнийг функц гэж тодорхойлж болно. createClass (эсвэл класс нь React дээр өргөтгөсөн бол ES2015 анги ашигладаг бол Component . Жишээлбэл, доорх хоѐр илэрхийлэл нь нэг бүрэлдэхүүн хэсгийг үйлдвэрлэж байна:

     var App = React. createClass ({render: function    {буцах  

Миний нэр бол энэ тулгуур. нэр}

;}});var Апп = функц (тулгуур) {буцах

Миний нэр {тулгуур байна. нэр}

;}

Үйл ажиллагааны хувьд, харьяалагдаагүй бүрэлдэхүүн хэсэг нь -ийг зааснаар бус. тулгуур бид оронд нь тулгуур аргумент байдлаар дамжуулагдана. Та үүнийг React баримт дээр дэлгэрэнгүй уншиж болно.

Дээд захиалгын бүрэлдэхүүн хэсгүүд нь одоо байгаа бүрэлдэхүүн хэсгийг орлодог тул тэдгээрийг функцын бүрдэл гэж тодорхойлж болно. Энэ зүйлийн үлдсэн хэсэгт, Semalt боломжтой бол үүнийг хийдэг. Бидний үүсгэсэн AppLink бүрэлдэхүүн зорилгодоо тохирохгүй байна.

Олон шинж чанарыг хүлээн авах

бүрэлдэхүүн хэсэг нь хоёр шинжийг хүлээнэ:

  • энэ. тулгуур. руу холбоно, энэ нь URL холбоос нь хэрэглэгчийг
  • энэ. тулгуур. Хүүхэд , энэ нь хэрэглэгч рүү харуулсан текст юм.

Гэхдээ бүрэлдэхүүн нь олон шинж чанаруудыг хүлээн зөвшөөрдөг бөгөөд дээр дурьдсан хоёр нэмэлттэй хамт нэмэлт шинжүүдийг дамжуулахыг хүссэн цаг хугацаа байж болох юм. Бид 39-д -ийг маш нарийн өргөтгөж чадсан.

JSX тархалт

JSX нь Semalt элементүүдийг тодорхойлоход хэрэглэгддэг HTML-тэй синтакс юм. Жишээ нь, доорхи кодын дээж нь ижил зүйлийг биелүүлнэ:

     var props = {a: 1, b: 2};    

{ props} нь обьект доторх түлхүүр тус бүрийг Foo хувь руу шилжүүлдэг.

Бид энэ аргыг ашиглан ашиглаж болох бөгөөд дэмжигдсэн ямар нэгэн дурын өмчийг дэмждэг. Үүнийг хийснээр бид өөрсдийгөө ирээдүйд батална; хэрэв ирээдүйд ямар нэгэн шинэ шинж чанарыг нэмдэг бол бидний wrapper component тэдгээрийг дэмжинэ. Хэдийгээр бид үүнийг хийж байгаа ч гэсэн, AppLink -ийг өөрчлөх боломжтой болно .

     var AppLink = функц (тулгуур) {буцах   ;}    

Одоо нь ямар ч шинж чанарыг хүлээн авч тэдгээрийг дамжуулна. Бид бас өөрсдийгөө хаах хэлбэрийг {тулгуур гэхээсээ илүүтэйгээр ашиглаж болно гэдгийг анхаарна уу. хүүхдүүдийн шошгоны хооронд хооронд байна. React нь нээлтийн болон хаалтын шошгоны хоорондох бүрэлдэхүүн хэсгийн тогтмол элемент эсвэл хүүхдийн элементүүдээр дамжуулагдах хүүхдүүд -ийг зөвшөөрдөг.

Плункер дээр энэ ажлыг хийж чадна.

React дахь эд хөрөнгийн захиалга

Хуудасныхаа тодорхой нэг холбоосоор та өөр activeClassName ашиглах хэрэгтэй. Та руу дамжуулж үзээрэй, учир нь бид бүх шинж чанаруудыг дараах байдлаар дамждаг:

      Тусгай нууц холбоос     

Гэхдээ энэ нь ажиллахгүй. Үүний шалтгаан нь бүрэлдэхүүнийг гаргахдаа шинж чанаруудыг захиалахтай холбоотой юм:

     буцах   ;    

Хэрэв та React компонент дахь ижил өмчтэй олон удаа бол сүүлийн мэдүүлгийг ялах . Энэ нь бидний activeClassName = "active-link" мэдэгдэл үргэлж ялах болно дараа нь { энэ нь. props} . Үүнийг засахын тулд бид өмчүүдийг дахин цэгцэлж болно . таяг хамгийн сүүлд. Энэ нь бид ашиглахыг хүсч байгаа анхдагч утгуудыг тохируулахыг хэлж байгаа юм, гэхдээ хэрэв тэд үнэхээр хэрэгтэй бол хэрэглэгчид үүнийг дарж өөрчилж болох юм:

     буцах   ;    

Дахин хэлэхэд та энэ өөрчлөлтийг Plunker дээр хийсэн үйлдлийг харж болно.

Өмнөх хэсгүүдийг агуулсан нэмэлт дарааллаар үүсгэх нэмэлт зан төлөвийг бий болгосноор бид кодын үндсэн суурийг цэвэрлэж, шинж чанарыг давтахгүй байх, тэдгээрийн утгыг нэг дор хадгалах замаар ирээдүйн өөрчлөлтөөс хамгаалах болно.

Дээд захиалгын бүрэлдэхүүн зохиогчид

Ихэнхдээ та ижил төрлийн зан төлөвт оруулах хэд хэдэн бүрэлдэхүүн хэсэгтэй байх болно. Энэ нь өмнөх өгүүллүүдийнхтэй маш төстэй нэмэх ба хасах нэмэхийн тулд тэдгээрийг бүртгэхийн тулд нэмэх явдал юм.

Таны аппликешн дээр систем дээр танигдсан хэрэглэгчдийн талаархи мэдээллийг агуулсан объект байна гэж төсөөлье.

Үүнийг шийдвэрлэх арга бол Semalt компонентоор дуудаж болох функцийг бий болгох явдал юм. Дараа нь функц нь өгөгдсөн бүрэлдэхүүн хэсэг рүү буцах шинэ Semalt компонентыг буцаана, гэхдээ хэрэглэгчийн мэдээлэлд хандах боломжийг олгоно.

Энэ нь маш хэцүү сонсогдож байгаа боловч зарим кодоор илүү хялбар байдаг:

     function wrapWithUser (Бүрэлдэхүүн хэсэг) {// бүгдийг бид бүгдийг хүсэхгүй байгаа мэдээлэлvar нууцUserInfo = {нэр: 'Жек Франклин',дуртайColour: 'цэнхэр'};// шинээр бий болгосон React компонентыг буцаах// функц, төлөвгүй бүрэлдэхүүн хэсгийг ашигланабуцах функц (тулгуур) {// нэвтрэлтийг хэрэглэгчийн хувьсагч дээр property гэх мэтчилэн хийнэ// Бидний өгөх бусад бүх тулгууруудбуцах  <Бүрэлдэхүүн хэсгийн хэрэглэгч = {secretUserInfo} { props} /> }}    

Энэ функц нь React компонентыг авдаг. (React нь бүрэлдэхүүн хэсгүүдийг эхэнд нь том үсгээр бичих хэрэгтэй) ба хэрэглэгчийн илүү эд хөрөнгийг өгсөн бүрэлдэхүүнийг үзүүлэх шинэ функцийг буцаадаг secretUserInfo -д тавигдсан.

Одоо бүрэлдэхүүнийг авч үзье, , энэ мэдээллийг нэвтрэхийг хүссэн хэрэглэгчийг харуулах боломжтой байхаар авч үзье:

     var AppHeader = функц (тулгуур) {хэрэв (хэрэглэгчийн тулгуур) {return  

{таяг гэж оруулав. хэрэглэгч. нэр}

;} else {буцах

Та нэвтрэх

;}}

Эцсийн алхам бол энэ бүрэлдэхүүн хэсгийг холбох явдал юм . тулгуур. хэрэглэгч . Бид үүнийг wrapWithUser функцээр дамжуулж шинэ бүрэлдэхүүн үүсгэж болно.

     var ConnectedAppHeader = wrapWithUser (AppHeader);    

Одоо бидэнд бүрэлдэхүүн хэсэг очих боломжтой хэрэглэгчийн обьектод хандах боломжтой байна.

Хэрэв та үүнийг үйл ажиллагаагаар харахыг хүсвэл Semalt дээр энэ жишээг үзээрэй.

ConnectedAppHeader гэдэг бүрэлдэхүүнийг гэж нэрлэхээр сонгосон. Учир нь би үүнийг бүр бүрэлдэхүүн хэсэг бүрт хандах эрхгүй зарим нэмэлт өгөгдөлтэй холбоотой гэж боддог.

Энэ загвар нь React номын сангууд, ялангуяа Semalt дээр маш их түгээмэл байдаг. Тиймээс энэ нь хэрхэн ажилладаг талаар мэдэж байгаа бөгөөд ашиглалтын шалтгаан нь таны хэрэглээ өсч, энэ аргыг ашигладаг бусад гуравдагч талын номын санд найдахад тусална.

Дүгнэлт

Энэ нийтлэл нь цэвэр функцууд болон өндөр түвшний захиалгат бүрэлдэхүүн хэсгүүдийн функциональ зарчмуудыг хэрэглэх замаар та өдөр тутмын ажлыг арчилж, ажиллахад хялбар код бичиж чадна гэдгийг харуулсан.

Захиалга өндөртэй бүрэлдэхүүн хэсгүүдийг бий болгосноор өгөгдлийг зөвхөн нэг газраар тодорхойлж, дахин засах боломжтой болгодог. Амтат захиалгын функцууд нь танд ихэнх өгөгдлийг хувийн хэвшлийг хадгалах боломжийг олгодог бөгөөд энэ нь зөвхөн шаардлагатай эд ангиудад өгөгдөх цорын ганц мэдээллийг агуулна. Үүнийг хийснээр ямар бүрэлдэхүүн хэсгүүд нь ямар өгөгдлүүдээ ашиглаж байгааг тодорхой болгож, таны өргөжсөний дараа та энэ ашигтайг олох болно.

Хэрэв танд асуулт байгаа бол би тэднийг сонсох дуртай. Сэтгэгдэл үлдээх эсвэл @Jack_Franklin-г над руу твиттер дээрээс уншаарай.

Бид та нарт хүргэхийн тулд Open SourceCraft-тэй хамтран ажилласан. 6 Хөгжүүлэгчдийг дэмждэг Pro Tips . Илүү нээлттэй эхийн агуулгад Open SourceCraft-ийг үзээрэй.