Computer >> Máy Tính >  >> Lập trình >> Javascript

Các thành phần React - Chức năng so với Lớp

React-js là một khung JavaScript cho phép chúng tôi với tư cách là nhà phát triển đóng gói mã để làm cho nó có thể tái sử dụng nhiều hơn. Các đoạn mã được đóng gói này được gọi là thành phần . Họ có thể giữ logic và trạng thái của riêng mình mà không can thiệp vào những gì đang diễn ra trong Mô hình đối tượng tài liệu (DOM) .

Việc trừu tượng hóa các phần trang web của bạn thành các thành phần có kích thước nhỏ hơn này để truyền dữ liệu xung quanh cho phép mã của bạn có thể tái sử dụng và KHÔ hơn ( Đ không R epeat Y của chúng ta). Có hai loại thành phần chính mà bạn sẽ gặp trong React:Thành phần chức năng và Thành phần lớp.

Ở cấp độ rất cao, các thành phần React về cơ bản là các hàm JavaScript chấp nhận đạo cụ dưới dạng một tham số và trả về một số phần tử React mô tả về cơ bản những gì sẽ có trên màn hình:

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')
)

Phần tử React trong trường hợp này ở đây là <div> với một số văn bản trong đó. Văn bản đó sử dụng một đối tượng đạo cụ đã được chuyển vào thành phần. Đối tượng props đó sẽ truyền dữ liệu xuống các thành phần con từ cha mẹ của chúng.

Trong trường hợp này, chỗ dựa đã được truyền lại là name. Phần tử đại diện cho cha mẹ.

Bất kỳ thuộc tính nào bạn chuyển vào <Greeting /> thành phần sẽ chuyển nó thành đối tượng đạo cụ và có sẵn để sử dụng bên trong Lời chào. Điều này làm cho Lời chào siêu có thể tái sử dụng vì chúng ta có thể chuyển bất kỳ tên nào chúng ta muốn vào thành phần.

Các thành phần chức năng

Các thành phần chức năng, như chúng tôi đã đề cập trước đó, về cơ bản là các hàm JavaScript. Bạn có thể sử dụng cú pháp EcmaScript 5 (ES5) hoặc EcmaScript a6 (ES6) khi tạo các thành phần React. Theo nguyên tắc chung, các thành phần React phải được viết hoa để cho biết chúng thực sự là các thành phần. 

<!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>

Đây là một ví dụ làm việc, chế nhạo về thành phần chức năng ES5 trông như thế nào khi chúng ta không sử dụng JSX mà sử dụng JavaScript đơn giản. Đừng lo lắng quá nhiều về những gì đang diễn ra trong HTML. Tập trung vào logic JavaScript:chúng ta có một phần tử đang được tạo, một hàm đang trả về một thứ gì đó và sau đó hàm đó đang được hiển thị cho một số loại ReactDOM.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Những gì JSX - viết tắt của JavaScript XML Extension - về cơ bản cho phép chúng ta viết HTML trong JavaScript của chúng ta để làm cho nó giống với những gì chúng ta thường thấy trong HTML. Trong ví dụ mã ở trên, chúng tôi hoàn toàn sử dụng JavaScript để tạo phần tử HTML của mình và sau đó sử dụng phương thức React’s createElement để chèn một <h4> vào DOM tại <div id=”root />. 

Nếu chúng tôi mở rộng quy mô ứng dụng của mình - làm cho ứng dụng của chúng tôi lớn hơn nhiều so với hiện tại - thì kiểu viết này sẽ trở nên cồng kềnh khá nhanh. JSX được tạo ra về cơ bản dưới dạng đường cú pháp cho phương thức React.createElement và cho phép chúng tôi mở rộng ứng dụng của mình nhanh hơn nhiều.

Các thành phần chức năng có thể được viết ES5 hoặc ES6. Đây là một ví dụ về cả thành phần chức năng ES5 và ES6 trông như thế nào khi sử dụng JSX:

Thành phần chức năng 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);

Thành phần chức năng 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);

Trước React v.16, các thành phần chức năng được gọi là không trạng thái các thành phần. Điều này có nghĩa là mục đích chính của thành phần là để trình bày - trông đẹp mắt trên trang. Thông thường, dữ liệu được chuyển đến các thành phần chức năng này để chúng có thể hiển thị thứ gì đó trên giao diện người dùng.

Với sự ra đời của React v.16, tất cả đã thay đổi. Chúng ta sẽ đi sâu vào vấn đề đó sau một chút nữa. Hiện tại, chỉ cần biết rằng các thành phần chức năng tồn tại để nhận một số loại dữ liệu từ nguồn gốc hoặc từ một đối tượng toàn cục nào đó để trình bày thứ gì đó cho máy khách.

Các thành phần lớp

Các thành phần lớp phức tạp hơn một chút so với “chỉ” một hàm JavaScript. Các thành phần lớp trong React mượn khái niệm của lớp JavaScript ES6. Cấu trúc của một lớp trong JavaScript là một đối tượng có các thuộc tính và phương thức được liên kết với nó. Chúng tôi sử dụng this từ khóa để truy cập một thể hiện của đối tượng đó và tương tác với nó.

Trong React, đối với hầu hết các phần, cấu trúc đều giống nhau. Các thành phần lớp React là một thể hiện của một đối tượng và đối tượng này có cái mà chúng ta gọi là trạng thái. Ở cấp độ cao, trạng thái chỉ là dữ liệu mà thành phần nắm giữ - hãy nghĩ về nó giống như một cách khác để thiết lập các thuộc tính và liên kết nó với lớp. Là một nhà phát triển, sau đó bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu đó:trình bày trên màn hình, chuyển nó cho các thành phần khác, sử dụng nó để thực hiện các logic khác, v.v.

Một thành phần lớp ES6 luôn được viết hoa, giống như với các thành phần chức năng - đó là quy tắc React để trình vận chuyển biết đó là một thành phần. Bởi vì chúng tôi đang kế thừa cấu trúc thành phần từ chính React, chúng tôi phải mở rộng Thành phần Component lớp. Bên trong khối mã đó là nơi chúng ta sẽ đặt trạng thái của mình:

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'));

State là một đối tượng có đầy đủ các thuộc tính và giá trị. Bang của chúng tôi ở đây có tài sản của các loài và giá trị của nó là một mảng đầy đủ các loài động vật. Để tham chiếu hoặc tương tác với mảng này, chúng tôi sử dụng this.state.species.

Mục đích của thành phần lớp ở trên là chuyển tên của động vật xuống <Name /> thành phần. <Name /> công việc của thành phần là làm điều gì đó với dữ liệu đó khi nó nhận được. Trạng thái của Động vật sẽ trở thành một phần của đối tượng đạo cụ khi nó được chuyển cho một thành phần chức năng hoặc lớp khác. Nó sẽ có thể được truy cập trong các thành phần con miễn là nó tiếp tục được truyền lại.

Chỉ cần nhớ rằng trong React, dữ liệu chảy xuống từ thành phần mẹ đến thành phần con chỉ một cấp. Bạn phải chuyển nó xuống một cấp khác nếu bạn cần dữ liệu trong thành phần cháu của cha mẹ.

Một tính năng khác của các thành phần lớp trong React là chúng ta có quyền truy cập và sử dụng các phương thức vòng đời để theo dõi trạng thái của chúng ta. Vòng đời của React thường có ba giai đoạn:Chúng được tạo ra (Gắn kết), chúng sống (Cập nhật) và chúng chết (Unmounting). Có các phương pháp để truy cập và / hoặc thay đổi trạng thái ở mỗi giai đoạn của phương pháp vòng đời:

  1. ComponentDidMount () - đây là phương thức vòng đời mà chúng ta sẽ thực hiện các yêu cầu AJAX / yêu cầu mạng để khởi tạo trạng thái. Sử dụng this.setState () để tải dữ liệu đã truy xuất của bạn về trạng thái.
  2. ComponentDidUpdate () - mọi cập nhật trạng thái xảy ra ở đây sau khi người dùng đã tương tác với ứng dụng.
  3. ComponentDidUnmount () - đây là một hàm dọn dẹp xảy ra khi thành phần ngắt kết nối. Nó sẽ quan tâm đến bộ hẹn giờ, yêu cầu AJAX, v.v.

Có nhiều phương pháp vòng đời hơn những phương pháp này - những phương pháp được liệt kê chỉ là những phương pháp chính. Vui lòng xem tài liệu React để biết thêm thông tin về các phương pháp này.

Cuối cùng, trái ngược với câu lệnh trả về của thành phần chức năng, các thành phần lớp sử dụng render() phương pháp. Phương thức này được gọi sau khi ReactDOM.render () chuyển thành phần Animal và React gọi phương thức khởi tạo của nó. Trạng thái sau đó được khởi tạo và sau đó phương thức kết xuất được gọi để thực sự đưa nội dung lên màn hình.

Chà! Đó là rất nhiều thông tin.

Chỉ cần nhớ rằng các thành phần chức năng trước React v. 16 chủ yếu là trình bày - họ không xử lý trạng thái - họ chỉ hiển thị nó. Các thành phần lớp nêu chi tiết tất cả logic trạng thái cho chúng tôi và chuyển thông tin xuống các thành phần khác dưới dạng đạo cụ.

Các thành phần chức năng và useState ()

Vào năm 2018, React đã giới thiệu ý tưởng về React Hooks . Hooks là một cách ngắn gọn và rõ ràng để sử dụng các phương thức vòng đời và trạng thái bên trong một Thành phần chức năng.

Hầu hết mọi thứ đều rất giống với mọi thứ chúng tôi đã đề cập cho đến nay. Chúng ta có một số trạng thái, chúng ta cần làm những thứ với nó, và chúng ta cần chuyển nó ở một nơi khác. Các mục tiêu chính đều giống nhau. Cú pháp gọn gàng hơn nhiều - nó chỉ yêu cầu một chút làm quen.

Những gì tôi sẽ làm là đánh dấu trang web này, thực hành và nhận một số lặp lại cho các thành phần lớp, thực sự hiểu rõ cách luồng dữ liệu hoạt động trong React và sau đó quay lại đây để hoàn tất việc tìm hiểu về các thành phần chức năng trạng thái .

Hãy bắt đầu với mã mà chúng ta đã có trước đây:

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);

Chúng tôi có hai thành phần, một Động vật và một Ứng dụng. Có vẻ như Ứng dụng đang trả lại Động vật và chuyển vào một tên hỗ trợ có giá trị là “Marshmallow”.

Tin hay không thì tùy, chúng ta không phải làm gì nhiều để chuyển điều này thành một số logic trạng thái. Chúng ta hãy xem xét thành phần . Chúng tôi sẽ làm theo các bước sau:

import React, {useState} from 'react';

- dòng này sẽ nhập hook của chúng ta, useState. 

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

- dòng này khởi tạo trạng thái của chúng ta. State và setState ở đây là các từ tùy ý. Bạn có thể đặt tên cho chúng bất cứ thứ gì bạn muốn. Thông thường người ta đặt tên chúng theo giá trị.

- trạng thái là trạng thái thực tế của chúng tôi. Trạng thái ban đầu nằm bên trong dấu ngoặc đơn trong useState ().

- setState tương tự như this.setState (). Đây là phương pháp sẽ thay đổi trạng thái của chúng ta khi chúng ta duyệt qua ứng dụng của mình. 

               return <Animal name={state}/>

- thay thế “Marshmallow” bằng {state}. Khi chúng ta cần viết JavaScript trong JSX, chúng ta sử dụng dấu ngoặc nhọn. Dấu ngoặc nhọn ở đây cho phép chúng ta chuyển vào biến của chúng ta.

Một trong những tính năng xác định các thành phần lớp, Vòng đời phản ứng, với các phương thức khác nhau của nó, được đọc lướt xuống một hook cơ bản đóng gói tất cả các phương thức! Hook useEffect () có thể gắn kết, cập nhật và ngắt kết nối thành phần React mà nó có trong đó.

Kết luận

Trước React v. 16, các thành phần chức năng hoàn toàn được sử dụng như một lớp dạng xem trình bày mà không sử dụng trạng thái ngoại trừ như các đạo cụ được truyền từ các thành phần lớp. Các thành phần lớp nắm giữ tất cả trạng thái của ứng dụng và truyền dữ liệu xung quanh. Các thành phần lớp sử dụng các phương thức vòng đời đã gắn kết, cập nhật và hủy gắn kết thành phần React của chúng tôi. Chúng tôi cũng nhận thấy rằng React Hooks, một mẫu mới được React phát hành trong phiên bản 16, cho phép các thành phần chức năng ở trạng thái hoạt động và có phiên bản phương thức vòng đời của riêng nó.

Điều quan trọng là phải làm quen với tất cả các loại thành phần khác nhau mặc dù React Hooks đang trở nên phổ biến hơn - mã kế thừa có thể sẽ sử dụng các thành phần lớp trong một thời gian và vẫn cần phải hiểu để bạn có thể làm việc với nó!