home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

React Components – ฟังก์ชั่นเทียบกับ Class

React-js คือเฟรมเวิร์ก JavaScript ที่ช่วยให้เราในฐานะนักพัฒนาสามารถสรุปโค้ดเพื่อให้นำมาใช้ใหม่ได้มากขึ้น ข้อมูลโค้ดที่ห่อหุ้มเหล่านี้เรียกว่า ส่วนประกอบ . พวกเขาสามารถถือตรรกะและสถานะของตนเองได้โดยไม่รบกวนสิ่งที่เกิดขึ้นใน Document Object Model (DOM) .

การย่อส่วนต่างๆ ของเว็บไซต์ของคุณเป็นส่วนประกอบขนาดเล็กลงเพื่อส่งข้อมูลไปรอบๆ ช่วยให้โค้ดของคุณใช้ซ้ำได้และแห้งมากขึ้น ( ด ไม่ ร พีท ใช่ เราเอง). มีส่วนประกอบหลักสองประเภทที่คุณจะพบใน React:ส่วนประกอบที่ทำงานและคลาส

ในระดับที่สูงมาก ส่วนประกอบ React นั้นเป็นฟังก์ชัน JavaScript ที่ยอมรับ props เป็นพารามิเตอร์และส่งกลับ องค์ประกอบตอบสนอง ที่อธิบายสิ่งที่ควรอยู่บนหน้าจอโดยทั่วไป:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Greeting = (props) => {
   return (
       <div>
           Hello, {props.name}
       </div>
   );
};
 
const element = <Greeting name="Yolanda" />;
 
ReactDOM.render(
   element, document.getElementById('root')
)

องค์ประกอบ React ในกรณีนี้คือ <div> พร้อมข้อความบางส่วนในนั้น ข้อความนั้นใช้อ็อบเจกต์ props ที่ส่งผ่านไปยังส่วนประกอบ วัตถุอุปกรณ์ประกอบฉากนั้นจะส่งข้อมูลไปยังส่วนประกอบลูกจากผู้ปกครอง

ในกรณีนี้ พร็อพที่ส่งต่อมาคือ name. องค์ประกอบ เป็นตัวแทนของผู้ปกครอง

คุณสมบัติใด ๆ ที่คุณส่งผ่านไปยัง <Greeting /> ส่วนประกอบจะทำให้เป็นวัตถุอุปกรณ์ประกอบฉากและพร้อมใช้งานภายในคำทักทาย สิ่งนี้ทำให้การทักทายใช้ซ้ำได้ดีเยี่ยม เนื่องจากเราสามารถส่งต่อชื่อใดๆ ที่เราต้องการลงในองค์ประกอบได้

ส่วนประกอบการทำงาน

องค์ประกอบการทำงานดังที่เราได้กล่าวไว้ก่อนหน้านี้นั้นเป็นฟังก์ชัน JavaScript โดยทั่วไป คุณสามารถใช้รูปแบบ EcmaScript 5 (ES5) หรือ EcmaScript a6 (ES6) เมื่อสร้างส่วนประกอบ React ตามหลักการทั่วไป ส่วนประกอบ React จะต้องเป็นตัวพิมพ์ใหญ่เพื่อระบุว่าเป็นส่วนประกอบจริงๆ 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic React Component</title>
  
</head>
<body>
   <!-- App is inserted at thr root node -->
   <div id="root"></div>
  
   <!-- React CDN -->
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <!-- React-DOM CDN -->
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
   <!-- React Components can be rendered here -->
   <script async>
       'use strict';
 
       const element = React.createElement;
 
       function Greeting() {
           return element('h4', null , `Hello, World!`);
       };
 
function App() {
           return element(Greeting);
       };
 
 
       const domContainer = document.querySelector('#root');
           ReactDOM.render(element(App), domContainer);
   </script>
</body>
</html>

นี่เป็นตัวอย่างจำลองการทำงานขององค์ประกอบการทำงานของ ES5 เมื่อเราไม่ได้ใช้ JSX แต่เป็น JavaScript วานิลลาธรรมดา อย่ากังวลมากเกินไปเกี่ยวกับสิ่งที่เกิดขึ้นใน HTML เน้นที่ตรรกะของ JavaScript:เรามีองค์ประกอบที่กำลังสร้างขึ้น ฟังก์ชันที่ส่งคืนบางสิ่ง จากนั้นฟังก์ชันนั้นจะถูกแสดงผลไปยัง ReactDOM บางประเภท

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สิ่งที่ JSX – ย่อมาจาก JavaScript XML Extension – โดยพื้นฐานแล้วทำให้เราทำได้คือเขียน HTML ใน JavaScript เพื่อให้คล้ายกับสิ่งที่เราเคยเห็นใน HTML มากขึ้น ในตัวอย่างโค้ดด้านบน เราใช้ JavaScript เพื่อสร้างองค์ประกอบ HTML ของเราเท่านั้น จากนั้นใช้วิธี createElement ของ React เพื่อแทรก <h4> ลงใน DOM ที่ <div id=”root />. 

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

ส่วนประกอบการทำงานสามารถเขียนได้ ES5 หรือ ES6 นี่คือตัวอย่างขององค์ประกอบการทำงานทั้ง ES5 และ ES6 เมื่อใช้ JSX:

ส่วนประกอบการทำงาน ES5

import React from 'react';
import ReactDOM from 'react-dom';
 
function Animal(props) {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       function App() {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

ส่วนประกอบการทำงาน ES6

const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

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

ด้วยการถือกำเนิดของ React v.16 ที่เปลี่ยนไปทั้งหมด เราจะพูดถึงเรื่องนั้นในอีกสักครู่ สำหรับตอนนี้ แค่รู้ว่ามีองค์ประกอบการทำงานเพื่อรับข้อมูลบางประเภทจากพาเรนต์หรือจากออบเจกต์ส่วนกลางเพื่อนำเสนอบางสิ่งให้กับลูกค้า

ส่วนประกอบของคลาส

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

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

ส่วนประกอบคลาส ES6 จะใช้ตัวพิมพ์ใหญ่เสมอ เช่นเดียวกับส่วนประกอบที่ใช้งานได้ นั่นคือกฎ React เพื่อให้ทรานสปิลเลอร์รู้ว่ามันเป็นส่วนประกอบ เนื่องจากเรารับช่วงโครงสร้างส่วนประกอบจาก React เอง เราจึงต้อง ขยาย Componentของ React ระดับ. ภายในบล็อกของรหัสนั้นคือที่ที่เราจะใส่สถานะของเรา:

import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';
 
   // the 'this' keyword needs to be used when we are talking about an instance of a class. So it will go in front of your methods and state when referring to it in your render method.
class Animal extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
       }
   }
  
 
   render() {
       return (
           <div>
               {this.state.species.map(animal => {
                   return <Name animal={animal}/>
               })}
           </div>
       )
   }
}
ReactDOM.render(<Animal />, document.getElementById('root'));

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

วัตถุประสงค์ขององค์ประกอบคลาสข้างต้นคือการส่งต่อชื่อสัตว์ลงไปที่ <Name /> ส่วนประกอบ. <Name /> งานของส่วนประกอบคือการทำบางสิ่งกับข้อมูลนั้นเมื่อได้รับมา สถานะของ Animal จะกลายเป็นส่วนหนึ่งของวัตถุ props เมื่อถูกส่งไปยังองค์ประกอบการทำงานหรือคลาสอื่น ๆ จะสามารถเข้าถึงได้ในคอมโพเนนต์ย่อยตราบเท่าที่มีการส่งต่อ

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

คุณสมบัติอื่นของส่วนประกอบคลาสใน React คือเราสามารถเข้าถึงและใช้วิธีวงจรชีวิตเพื่อติดตามสถานะของเรา วงจรชีวิตปฏิกิริยามักมีสามขั้นตอน:สร้าง (การติดตั้ง) ใช้งาน (อัปเดต) และตาย (ยกเลิกการต่อเชื่อม) มีวิธีการในการเข้าถึงและ/หรือเปลี่ยนสถานะในแต่ละขั้นตอนของวิธีวงจรชีวิต:

  1. ComponentDidMount() – นี่คือวิธีวงจรชีวิตที่เราจะส่งคำขอ AJAX/คำขอเครือข่ายเพื่อเริ่มต้นสถานะ ใช้ this.setState() เพื่อโหลดข้อมูลที่ดึงมาเข้าสู่สถานะ
  2. ComponentDidUpdate() – การอัปเดตสถานะใด ๆ เกิดขึ้นที่นี่หลังจากที่ผู้ใช้โต้ตอบกับแอปพลิเคชัน
  3. ComponentDidUnmount() – นี่คือฟังก์ชันการล้างข้อมูลที่เกิดขึ้นเมื่อถอดส่วนประกอบออก จะดูแลตัวจับเวลา คำขอ AJAX ฯลฯ

มีวิธีวงจรชีวิตมากกว่าวิธีเหล่านี้ – วิธีเหล่านี้เป็นเพียงวิธีหลัก โปรดดูเอกสาร React สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเหล่านี้

สุดท้าย ตรงกันข้ามกับคำสั่ง return ของส่วนประกอบที่ทำงาน ส่วนประกอบคลาสใช้ render() กระบวนการ. เมธอดนี้ถูกเรียกใช้หลังจาก ReactDOM.render() ส่งผ่านองค์ประกอบ Animal และ React เรียกคอนสตรัคเตอร์ สถานะจะเริ่มต้นจากนั้นจึงเรียกวิธีการเรนเดอร์เพื่อวางเนื้อหาบนหน้าจอจริง

ว้าว! นั่นเป็นข้อมูลจำนวนมาก

เพียงจำไว้ว่าส่วนประกอบการทำงาน ก่อน React v. 16 ส่วนใหญ่เป็นการนำเสนอ - พวกเขาไม่ได้จัดการกับสถานะ - พวกเขาแค่แสดงมัน ส่วนประกอบของคลาสให้รายละเอียดเกี่ยวกับตรรกะของรัฐทั้งหมดสำหรับเราและส่งต่อข้อมูลไปยังส่วนประกอบอื่นๆ เป็นอุปกรณ์ประกอบฉาก

ส่วนประกอบการทำงานและ useState()

ในปี 2018 React ได้นำเสนอแนวคิดของ React Hooks . Hooks เป็นวิธีที่สะอาดและรัดกุมในการใช้วิธีวงจรชีวิตและระบุใน Functional Component

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

สิ่งที่ฉันจะทำคือบุ๊กมาร์กไซต์นี้ ฝึกฝน และทำซ้ำสำหรับองค์ประกอบของชั้นเรียน เข้าใจ จริงๆ การไหลของข้อมูลทำงานอย่างไรใน React แล้วกลับมาที่นี่เพื่อเรียนรู้เกี่ยวกับ ส่วนประกอบการทำงานแบบเก็บสถานะ ให้เสร็จ .

เริ่มต้นด้วยรหัสที่เรามีมาก่อน:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
		const [ state, setState ] = useState('Marshmallow');
               return <Animal name={state}/>
 
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

เรามีสององค์ประกอบ หนึ่งสัตว์และหนึ่งแอพ ดูเหมือนว่า App กำลังส่งคืน Animal และส่งผ่านอุปกรณ์ที่เรียกว่าชื่อที่มีค่า "Marshmallow"

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

import React, {useState} from 'react';

— บรรทัดนี้จะนำเข้า hook ของเรา useState

const [ state, setState ] = useState('Marshmallow');

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

– รัฐคือสถานะที่แท้จริงของเรา สถานะเริ่มต้นอยู่ในวงเล็บใน useState()

– setState คล้ายกับ this.setState() นี่เป็นวิธีการที่จะเปลี่ยนสถานะของเราเมื่อเราเดินทางผ่านแอปพลิเคชันของเรา 

               return <Animal name={state}/>

– แทนที่ “Marshmallow” ด้วย {state} เมื่อเราต้องการเขียน JavaScript ใน JSX เราใช้วงเล็บปีกกา วงเล็บปีกกาช่วยให้เราผ่านตัวแปรของเราได้

หนึ่งในคุณสมบัติที่กำหนดองค์ประกอบของคลาส React Lifecycle ด้วยวิธีการที่หลากหลาย ถูกลดเหลือเพียง hook พื้นฐานตัวเดียวที่สรุปวิธีการทั้งหมด! ตะขอ useEffect() สามารถติดตั้ง อัปเดต และยกเลิกการต่อเชื่อมส่วนประกอบ React ที่มีอยู่ได้

บทสรุป

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

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