นำศีรษะของคุณไปรอบ ๆ ปฏิกิริยากับปัจจัยทั้งห้านี้

Sep 14, 2025

วิธีการ

การเรียนรู้ตอบสนองไลบรารี JavaScript สำหรับการสร้างอินเทอร์เฟซผู้ใช้จาก Facebook และ Instagram ดูเหมือนว่าถั่วจนกว่าคุณจะให้โอกาส สิ่งต่าง ๆ ได้ง่ายขึ้นมากขึ้นเมื่อคุณเข้าใจแนวคิดหลักห้าประการ ฉันเรียกสิ่งเหล่านี้ทั้งห้าใจกะ พวกเขาคือ: ส่วนประกอบ, JSX, รัฐ, วิธีการวงจรชีวิตและการไหลของข้อมูลทางเดียว

01. ส่วนประกอบ

ส่วนประกอบเป็นชิ้นของรหัสที่สามารถรวมกันเพื่อให้การทำงานที่ซับซ้อนมากขึ้น เมื่อคุณหารแอปพลิเคชันของคุณลงในส่วนประกอบจะทำให้การอัปเดตและบำรุงรักษาง่ายขึ้น ในการตอบสนองส่วนประกอบมีความสำคัญยิ่งขึ้น: คุณไม่เพียง แต่เขียนโปรแกรมไว้คุณออกแบบแอปของคุณโดยคิดว่าส่วนประกอบเหล่านี้เข้ากันได้อย่างไร

ลองใช้อินเตอร์เฟสด้านล่างเป็นตัวอย่าง คุณสามารถดูว่าสามารถแบ่งออกเป็นสามชิ้นได้อย่างไร: กล่องสำหรับจองการนัดหมายใหม่มุมมองรายการที่ให้คุณดูการนัดหมายที่มีอยู่และกล่องค้นหาสำหรับการมองผ่านพวกเขา

An image showing how easy it is the structure an app into reusable components. — คุณสามารถดูวิธีการจัดโครงสร้างแอปนี้ลงในส่วนประกอบที่ใช้ซ้ำได้

ใน HTML คุณอาจนึกถึงแอปพลิเคชั่นนี้เป็นชุดขององค์ประกอบเช่นนี้:

 & lt; div id = "petappoints" & gt;
  & lt; div class = "addappointments" & gt; & lt; / div & gt;
  & lt; div class = "searchappointments" & gt; & lt; / div & gt;
  & lt; div class = "elepappointments" & gt; & lt; / div & gt;
& lt; / div & gt;

และนั่นคือสิ่งที่คุณทำในการตอบสนอง คุณสร้างแท็กเดียว (& lt; div id = "petappintments" & gt;) ที่เรียกองค์ประกอบ petappointments ซึ่งจากนั้นเรียกส่วนประกอบย่อยอื่น ๆ ตามต้องการ หากต้องการส่งต่อวัตถุการกำหนดค่าเช่นนี้คุณใช้วิธี createClass ของวัตถุตอบโต้

 var maininterface = react.createClass ({
  แสดงผล: ฟังก์ชั่น () {
    กลับมา (
      & lt; div classname = "อินเตอร์เฟส" & gt;
        & lt; addappointment / & gt;
        & lt; searchappointments / & gt;
        & lt; elepappointments / & gt;
      & lt; / div & gt;
    )
  } // แสดงผล
}); // maininterface

reactdom.render (
  & lt; maininterface / & gt;
  document.getElementbyid ('petappintments')
); // แสดงผล

มีสองวิธีการแสดงผล ในชั้นเรียน maininterface เราประกาศรายการที่จะถูกส่งไปยังเบราว์เซอร์และวิธีการ reactdom.render แทนที่ & lt; div id = "petappoints" & gt; & lt; / div & gt; องค์ประกอบใน HTML ของคุณด้วยรหัสของ React จากนั้นเราจะเขียนรหัสที่จัดการแต่ละองค์ประกอบย่อยของเราแต่ละชิ้น

ส่วนประกอบทำให้รหัสง่ายต่อการเขียนและบำรุงรักษา เมื่อคุณเรียนรู้ที่จะคิดและจัดระเบียบแอปของคุณเป็นชุดของส่วนประกอบที่รวบรวมได้การสร้างแอปพลิเคชันที่ซับซ้อนจะง่ายขึ้น

02. JSX

jsx อาจเป็นหนึ่งในการเปลี่ยนแปลงจิตใจที่ใหญ่ที่สุดและหนึ่งในเหตุผลที่ว่าทำไมห้องสมุดดูแปลก ๆ JSX เป็นส่วนเสริมของ JavaScript ที่ให้คุณรวมรหัส XML กับ JavaScript

นี่คือสิ่งที่เกิดขึ้นกับภาษาเทมเพลตเช่นหนวดซึ่งให้คุณรวม JavaScript ภายใน HTML แต่ JSX ได้รับการแปล (Transpiled) ลงใน JavaScript ดังนั้นคุณไม่เพียงแค่สร้างเทมเพลต แต่เป็นโครงสร้างที่แปลงเป็นชุดของคำสั่ง JavaScript ซึ่งแตกต่างจากภาษาเทมเพลตไม่จำเป็นต้องตีความที่รันไทม์ ลองดูตัวอย่าง

 & lt; li classname = "สื่อสัตว์เลี้ยงสื่อ" คีย์ = {index} & gt;
  & lt; div classname = "pet-info media-body" & gt;
    & lt; div classname = "pet-head" & gt;
      & lt; span classname = "pet-name" & gt; {this.state.data [ดัชนี] .petname} & lt; / span & gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.data [ดัชนี] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "เจ้าของชื่อ" & gt; & lt; span classname = "leam-item" & gt; เจ้าของ: & lt; / span & gt;
    {this.state.data [ดัชนี] ชื่อ} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [ดัชนี] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt;

เราสามารถใช้รหัสนี้เพื่อส่งออกการนัดหมายของเรา สิ่งนี้รู้สึกเหมือนใช้ภาษาเทมเพลตปกติดังนั้นนอกเหนือจากการเรียนรู้แปลก ๆ เล็กน้อยเกี่ยวกับ JSX คุณสามารถรับมันได้อย่างรวดเร็ว

ส่วนที่แปลกเกี่ยวกับการใช้ JSX ไม่ได้เรียนรู้ภาษาตัวเอง มันได้รับมากกว่าความจริงที่ว่าการใส่ HTML ภายในรหัส JavaScript ของคุณดูเหมือน ... ดีผิด แต่มันดีจริงๆที่มีรหัสทั้งหมดสำหรับแต่ละองค์ประกอบที่อาศัยอยู่ในที่เดียว

03. รัฐ

An image displaying the user clicking on a red X – which is captured at the component level. — การคลิกที่หนึ่งใน XS สีแดงจะถูกจับในระดับคอมโพเนนต์ แต่อ้างอิงวิธีการในส่วนประกอบหลักผ่านอุปกรณ์ประกอบฉาก

การเปลี่ยนจิตใจที่สามคือการเรียนรู้ที่จะทำงานกับรัฐในการตอบสนอง สถานะจะถูกเก็บไว้ในองค์ประกอบสูงสุดของแอปพลิเคชันของคุณและจัดการสิ่งที่เกิดขึ้นในแอปของคุณ มีวิธีพิเศษที่เรียกว่า GetInitialState ที่คุณสามารถกำหนดค่าสิ่งที่เกิดขึ้นเมื่อแอปพลิเคชันของคุณเริ่มทำงาน

ในแอปพลิเคชันตัวอย่างของฉันสถานะเริ่มต้นจะถูกตั้งค่าเช่นนี้:

 var maininterface = react.createClass ({
  getinitialstate: ฟังก์ชั่น () {
    กลับ {
      aptbodyvisible: false,
      สั่งซื้อ: 'PETNAME'
      OrderDir: 'ASC'
      querytext: ''
    } // กลับมา
  }, // getinitialstate

ดูเหมือนว่าฉันกำลังตั้งค่าตัวแปรทั่วโลกสำหรับแอปพลิเคชันของฉัน แต่การแก้ไขตัวแปรเหล่านี้ควบคุมได้อย่างไรว่าส่วนประกอบแสดงผลอย่างไร หากมีบางอย่างในแอปของฉันเปลี่ยนค่าของตัวแปรส่วนประกอบของฉันจะแสดงซ้ำอีกครั้ง หากค่าการเปลี่ยนแปลง Orderby เช่นรายการการนัดหมายจะเรียงลำดับใหม่

เมื่อคุณเขียนส่วนประกอบมันเป็นเรื่องง่ายที่จะแก้ไขสถานะของแอปพลิเคชัน การเขียนส่วนประกอบนั้นง่ายกว่าเนื่องจากคุณมุ่งเน้นไปที่สิ่งที่องค์ประกอบทำ นี่คือองค์ประกอบรายการสุดท้ายของแอปของฉัน:

 var ตอบสนอง = ต้องการ ('ตอบสนอง');
var aptlist = react.createclass ({

  handleteete: ฟังก์ชั่น () {
    นี้ .Props.ondelete (props.whichitem)
  },

  แสดงผล: ฟังก์ชั่น () {
    กลับ(
      & lt; li classname = "สื่อรายการ PET" & GT;
        & lt; div classname = "สื่อซ้าย" & gt;
          & lt; ปุ่ม classname = "pet-delete btn btn-xs btn-อันตราย" onclick = {นี้แฮนด์กล่อม} & gt;
          & lt; span classname = "glyphicon glyphicon-remove" & gt; & lt; / span & gt; & lt; / ปุ่ม & gt;
        & lt; / div & gt;
        & lt; div classname = "pet-info media-body" & gt;
          & lt; div classname = "pet-head" & gt;
            & lt; span classname = "pet-name" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-date pull-light" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "เจ้าของชื่อ" & gt; & lt; span classname = "leam-item" & gt; เจ้าของ: & lt; / span & gt;
          {this.props.singleitem.Otherame} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // กลับมา
  } // แสดงผล
}); // aptlist

module.exports = aptlist;

ส่วนประกอบเกี่ยวข้องกับสองสิ่งเท่านั้น ก่อนอื่นแสดงรายการการนัดหมายตามสถานะปัจจุบันของแอปพลิเคชัน ประการที่สองการจัดการการคลิกที่หนึ่งในสีแดง 'X's

การคลิกที่ 'x' จะผลักดันการเปลี่ยนแปลงไปยังสถานะแอปพลิเคชันทำให้เกิดองค์ประกอบนี้เพื่อให้การแสดงซ้ำอีกครั้ง ฉันไม่กังวลเกี่ยวกับสิ่งที่เกิดขึ้นกับข้อมูลเพียงแค่แสดงว่าข้อมูลปัจจุบันจะปรากฏขึ้นอย่างไร

คอมโพเนนต์รายการเกี่ยวข้องกับรายการเท่านั้น ไม่ต้องกังวลกับสิ่งที่เกิดขึ้นที่อื่น มันเป็นวิธีที่ยอดเยี่ยมในการสร้างแอปพลิเคชันและเมื่อคุณได้รับการแขวนคุณจะเห็นว่าทำไมมันถึงเป็นวิธีที่เหนือกว่ารหัส

04. การไหลของข้อมูลทางเดียว

An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go. — ที่นี่องค์ประกอบการค้นหาเกี่ยวข้องกับการเปลี่ยนสถานะของข้อมูลเท่านั้น รายการจะแสดงซ้ำอีกครั้งด้วยข้อมูลใหม่ในการบิน

การเปลี่ยนใจครั้งต่อไปคือการเรียนรู้ที่จะรักการไหลของข้อมูลทางเดียว ในการตอบสนองสถานะของแอปพลิเคชันของคุณอยู่ในองค์ประกอบสูงสุด เมื่อคุณต้องการเปลี่ยนเป็นส่วนประกอบย่อยคุณสร้างการอ้างอิงไปยังส่วนประกอบสูงสุดและจัดการที่นั่น นี่เป็นเรื่องยากที่จะคุ้นเคย นี่คือตัวอย่าง:

 var ตอบสนอง = ต้องการ ('ตอบสนอง');
var aptlist = react.createclass ({
  handleteete: ฟังก์ชั่น () {
    นี้ .Props.ondelete (props.whichitem)
  },
  แสดงผล: ฟังก์ชั่น () {
    กลับ(
      & lt; li classname = "สื่อรายการ PET" & GT;
        & lt; div classname = "สื่อซ้าย" & gt;
          & lt; ปุ่ม classname = "pet-delete btn btn-xs btn-อันตราย" onclick = {นี้แฮนด์กล่อม} & gt;
          & lt; span classname = "glyphicon glyphicon-remove" & gt; & lt; / span & gt; & lt; / ปุ่ม & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // กลับมา
  } // แสดงผล
}); // aptlist

module.exports = aptlist;

นี่เป็นรุ่นที่ง่ายขึ้นของโมดูลที่สร้างรายการการนัดหมาย รายการของเรามีปุ่มลบซึ่งเราจัดการผ่านตัวจัดการเหตุการณ์ นี่เป็นรุ่นตอบสนองพิเศษของ onclick ตัวจัดการเหตุการณ์ของเราเรียกใช้ฟังก์ชัน handletleete ซึ่งเป็นเครื่องที่มีอยู่ในโมดูลย่อย ฟังก์ชั่นท้องถิ่นของเราเพียงสร้างการอ้างอิงถึงฟังก์ชั่นอื่นในวัตถุที่เรียกว่าอุปกรณ์ประกอบฉาก อุปกรณ์ประกอบฉากเป็นวิธีการสื่อสารโมดูลหลักกับโมดูลย่อย

ในโมดูลหลักที่คุณต้องการสร้างแอตทริบิวต์ในแท็กที่คุณใช้เพื่อเป็นตัวแทนของโมดูล ดูเหมือนว่าจะผ่านแอตทริบิวต์ไปยังแท็ก HTML:

 & lt; aptlist ondelete = {this.deletemessage} / & gt;

จากนั้นคุณสร้างวิธีการของคุณเองในส่วนประกอบหลักเพื่อจัดการการเปลี่ยนแปลงไปยังสถานะของแอปพลิเคชัน การรักษาสถานะในโมดูลหลักช่วยให้โมดูลย่อยของคุณมีประสิทธิภาพมากขึ้น นอกจากนี้ยังง่ายต่อการบำรุงรักษารหัสเนื่องจากการกระทำส่วนใหญ่เกิดขึ้นในที่เดียว

05. วิธีการวงจรชีวิต

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับการตอบสนองคือวิธีที่มันจัดการการแสดงผลของโมดูลของคุณ โมดูลของคุณไม่ต้องกังวลกับการอัปเดต DOM เกี่ยวกับการตอบสนองต่อสถานะของแอปพลิเคชันของคุณเท่านั้น เมื่อการเปลี่ยนแปลงของรัฐตอบสนองต่อส่วนประกอบของแอปพลิเคชันของคุณอีกครั้ง มันทำเช่นนี้โดยการสร้างรุ่นของตัวเองของ DOM ที่เรียกว่า DOM เสมือนจริง

แต่บางครั้งคุณต้องสามารถทำสิ่งต่าง ๆ เพื่อตอบสนองต่อวงจรชีวิตการเรนเดอร์ ป้อนวิธีการวงจรชีวิต เหล่านี้เป็นวิธีที่จะถามตอบสนองเพื่อจัดการงานที่จุดที่แตกต่างกันในการดำเนินการของแอปพลิเคชัน

ตัวอย่างเช่นวิธีการ Lifecyle ที่ช่วยให้คุณสามารถโหลดข้อมูลภายนอกผ่านคำขอ AJAX:

 componentdidmount: ฟังก์ชั่น () {
  this.serverrequest = $ .get ('./ js / data.json' ฟังก์ชั่น (ผลลัพธ์) {
    var tempapts = ผล;
    นี้เซ็ตสเตต ({
      myappointments: tempapts
    }); // setstate
  }. ติดต่อ (สิ่งนี้));
}, // componentdidmount

ที่นี่ ComponentDidmount ช่วยให้คุณสามารถดำเนินการบางอย่างหลังจากการแสดงผลเริ่มต้นเสร็จสมบูรณ์ นี่เป็นสถานที่ที่เหมาะสำหรับการโหลดเนื้อหา AJAX ตั้งค่าตัวจับเวลาและอื่น ๆ มีวิธีการวงจรชีวิตอื่น ๆ อีกมากมายที่ให้คุณดักจับการใช้งานของแอปพลิเคชันที่จุดที่แตกต่างกัน พวกเขาจำเป็นเนื่องจาก React's Virtual Dom ซึ่งเป็นช่วงเวลาที่ยอดเยี่ยมเมื่อสร้างแอพ

การคิดใหม่ตอบสนอง

ตอบสนองต้องมีการคิดใหม่เกี่ยวกับวิธีที่คุณทำงานกับเว็บแอปพลิเคชัน แต่ถ้าคุณมุ่งเน้นไปที่การควบคุมผลประโยชน์ของการเปลี่ยนแปลงจิตใจห้าครั้งนี้คุณจะได้เรียนรู้ว่าทำไมห้องสมุดจึงได้รับความนิยมอย่างไม่น่าเชื่อและเป็นวิธีที่ยอดเยี่ยมในการสร้างอินเทอร์เฟซ

บทความนี้ - ภาพประกอบโดย Ray Villalobos - ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 286 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา สมัครสมาชิกสุทธิ .

ต้องการปรับแต่งทักษะการตอบสนองของคุณเพิ่มเติมหรือไม่

Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018. — Kristijan Ristovski กำลังให้การประชุมเชิงปฏิบัติการของเขาเรียนรู้วิธีคิดในการทำปฏิกิริยาในการสร้างลอนดอนตั้งแต่วันที่ 19-21 กันยายน 2561

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการตอบสนองตรวจสอบให้แน่ใจว่าคุณได้รับตั๋วของคุณเพื่อ สร้างลอนดอนตั้งแต่วันที่ 19-21 กันยายน 2561 . หลังจากก่อตั้ง Academy React เพื่อสอนตอบโต้ทั่วโลกและเปิดตัว sizzy.co และ ok-google.io Kristijan Ristovski จะส่งมอบการประชุมเชิงปฏิบัติการของเขา - เรียนรู้วิธีคิดในการตอบสนองซึ่งเขาจะสำรวจการตอบสนองที่ดีที่สุดและสอนวิธีแก้ปัญหาที่แท้จริงที่คุณอาจพบในกระบวนการสร้างแอป

สร้างลอนดอนเกิดขึ้นตั้งแต่วันที่ 19-21 กันยายน 2561 รับตั๋วของคุณตอนนี้ .

บทความที่เกี่ยวข้อง:

10 ผู้เชี่ยวชาญ Reactjs เคล็ดลับที่คุณต้องรู้วันนี้
สร้างแอปแดชบอร์ดที่มีปฏิกิริยา
สร้างเครื่องเล่นเพลงที่เรียบง่ายด้วยการตอบสนอง

นำศีรษะของคุณไปรอบ ๆ ปฏิกิริยากับปัจจัยทั้งห้านี้

01. ส่วนประกอบ

02. JSX

03. รัฐ

04. การไหลของข้อมูลทางเดียว

05. วิธีการวงจรชีวิต

การคิดใหม่ตอบสนอง

ต้องการปรับแต่งทักษะการตอบสนองของคุณเพิ่มเติมหรือไม่

วิธีการ - บทความยอดนิยม

ใช้ Framer X เพื่อสร้างต้นแบบแบบโต้ตอบ

Krita Tutorials: เรียนรู้พื้นฐานของซอฟต์แวร์ศิลปะดิจิทัล

เริ่มต้นด้วย Bulma

เริ่มต้นกับแพลตฟอร์มภาพเคลื่อนไหว Greensock

ทาสีชีวิตที่แสดงออกในอะคริลิก

สร้างแอพที่ทำงานแบบออฟไลน์

วิธีการละลายวัตถุ 3 มิติด้วย Three.js

สร้างเอฟเฟกต์ทาสีใน Photoshop CC

หมวดหมู่