ReactJS: Giới thiệu về Parts và Props trong React

Dùng elements hiệu quả sẽ giúp lập trình viên xây dụng 1 utility phải chăng hơn! Trong bài viết này, Tino Group sẽ chia sẻ có bạn những tri thức quan yếu về elements và props trong React nhé!

Giới thiệu chung về Componets

Parts là gì?

Parts là những thành phần giao diện (UI) được định nghĩa độc lập, có thể tái sử sụng và hoàn toàn tách biệt nhau.

Chúng ta có thể hiểu part là 1 hàm trong javascript. Chúng nhận bất kỳ đầu vào nào (hay còn gọi là “props“) và trả về những React parts mô tả những gì được hiển thị trên trình thông qua. Vì vậy, việc dùng và chia bé part hiệu quả sẽ giúp những lập trình viên trở nên chuyên nghiệp và giúp xây dựng 1 utility phải chăng hơn.

Phân loại Parts

Element gồm 2 loại: “Operate part” và “Class Element”.

Operate part (Stateless part)

Thực chất, part này chỉ là 1 hàm Javascript có nhiệm vụ duy nhất là trả về những React factor để hiển thị trên trình thông qua. Element này có thể nhận đầu vào là 1 đối tượng “props” (properties) bất kỳ.

Quan yếu hơn là chúng ta ko thể xử lý những công việc phức tạp như quản lý state hoặc dùng những life cycle trong part này. Vì thế, part này còn có 1 tên khác là stateless part (part ko có state).

Nhưng từ phiên bản React 16.8 React tung ra React hooks cho phép chúng ta dùng state và những tính năng phức tạp khác trong operate elements.

Xem Thêm  IGO là gì? Xu hướng gọi vốn sizzling nhất của những Gaming Blockchain

Chúng ta có thể định nghĩa 1 operate part như 1 operate của Javascript như sau:

Hoặc có thể dùng cú pháp arrow operate của ES6:

Class part (Stateful part)

React hài hòa dùng class của ES6 để định nghĩa 1 part, part này cũng giống như operate part, cũng có thể nhận 1 props đầu vào, nhưng khác ở chỗ class part có thể xử lý những tác vụ phức tạp như phương thức khởi tạo, quản lý state, life cycle…

Xét thí dụ sau:

Chúng ta có thể thấy ở thí dụ trên, class App được kế thừa từ React.Element, vì vậy React sẽ hiểu class này là 1 part của React.

2 loại part phía trên đều tương đương nhau dưới góc độ của React và đều có những tính năng bổ sung khác nhau.

Lúc bạn định nghĩa 1 part dưới dạng operate hoặc class, nó ko được phép thay đổi props của chính nó. Props chỉ dùng để đọc.

Mọi React Parts đều buộc phải như 1 pure operate đối có props của chúng.

1 số thao tác có Parts

Chỉ dẫn bí quyết tạo Parts

Thông thường React parts biểu diễn những DOM tags, thế nhưng parts cũng có thể biểu diễn những part do khách hàng tự định nghĩa.

1 React factor là 1 part do chúng ta tự định nghĩa, ta sẽ tùy biến được những thuộc tính JSX và những phần tử con của nó, được gọi là props.

Xét thí dụ sau:

operate Article(props) { return ( <div> <h1>Bài viết: {props.title}</h1> <h2>Chủ đề: {props.subject} </h2> </div> ); } ReactDOM.render( <Article title=”Parts và Props trong React” subject=”React” />, doc.getElementById(“root”) );

Luồng chạy như sau:

  • Chúng ta gọi hàm React.Render() có factor là part Article.
  • Article là 1 operate part có thuộc tính title và subject, có nghĩa là part này có props là 1 object { title: “Parts và Props trong React”, subject: “React”}.
  • Article part trả về kết quả hiển thị có thẻ <h1> và <h2> có nội dung tương ứng được lấy từ object props.
  • Cuối cùng React DOM sẽ cập nhật DOM để hiển thị kết quả như sau:
Xem Thêm  Sàn DEX là gì? Tổng quan về đặc điểm của những sàn thanh toán phi tập trung

Những part có thể tham chiếu tới những part khác tại output của nó. Điều này cho phép chúng ta tái dùng lại part có những props khác nhau.

Thí dụ chúng ta có thể gọi 1 part nhiều lần như sau:

operate Article(props) { return ( <div> <h1>Bài viết: {props.title}</h1> <h2>Chủ đề: {props.subject} </h2> </div> ); } operate App() { return ( <div> <Article title=”Giới thiệu React và bí quyết thức hoạt động” subject=”React” /> <Article title=”Parts và Props trong React” subject=”React” /> </div> ); } ReactDOM.render( <App />, doc.getElementById(“root”) );

Chỉ dẫn chia bé part

Để cho việc dễ quản lý, bảo trì và kiểm thử, chúng ta cần chia những part càng bé càng phải chăng.

Hãy cùng nhau làm cho 1 thí dụ chia bé part nhé, sau đây là 1 operate part:

operate Article(props) { return ( <div className=”jeg_block”> <div className=”thumb”> <a href={props.article.hyperlink} goal=”_blank” rel=”noopener noreferrer”> <img src={props.article.src} alt=”” /> </a> </div> <div className=”content material”> <h3>{props.article.title}</h3> <p>{props.article.date}</p> </div> </div> ); }

Element Article nhận 1 props có object article có thuộc tính hyperlink, src, title, date. Như ta thấy, nó có cấu trúc lồng nhau nên khó thay đổi, đồng thời khó tái dùng lại những thành phần con bên trong. vì thế, ta sẽ chia bé cấu trúc trên thành 1 vài part riêng lẻ.

Trước tiên, ta sẽ tách phần thumb thành 1 part Thumb, có props là object chứa dữ liệu hyperlink và src như sau:

operate Thumb(props) { return ( <div className=”thumb”> <a href={props.hyperlink} goal=”_blank” rel=”noopener noreferrer”> <img src={props.src} alt=”” /> </a> </div> ); }

Sau ấy, ta sẽ tách tiếp phần content material thành 1 part Content material, có props là object chứa dữ liệu title và date như sau:

Xem Thêm  IOTA (MIOTA) là gì? Toàn tập về tiền điện tử MIOTA

operate Content material(props) { return ( <div className=”content material”> <h3>{props.title}</h3> <p>{props.date}</p> </div> ); }

Cuối cùng, ta đưa 2 part vừa mới tách vào part Article để dùng:

operate Article(props) { return ( <div className=”jeg_block”> <Thumb hyperlink={props.article.hyperlink} src={props.article.src} /> <Content material title={props.article.title} date={props.article.date} /> </div> ); }

Chia bé những part ta sẽ được 1 part Article ngắn gọn hơn trước nhiều, trong lúc ấy chúng ta có thể tái dùng được part Thumb và Content material ở bất cứ đâu.

Tổng kết

Việc chia bé những part ngay từ đầu thì ko hề đơn giản, nhưng bù lại chúng ta sẽ có được 1 tập hợp những part có thể tái dùng trong ứng dụng lớn, ko mất thời kì copy lại toàn bộ cấu trúc như ban đầu. Còn việc chia những part bé tới mức nào thì tùy vào kinh nghiệm của những lập trình viên, nhưng hãy theo nguyên tắc ấy là giả dụ 1 phần UI được dùng lại nhiều lần như Button, Avatar, Enter, Dropdown… hoặc những part đủ phức tạp như Article, Put up, Remark, Feed… thì lúc ấy nên chia bé chúng thành những part riêng.

Chúc bạn dùng part hiệu quả nhé!

Bài viết có tham khảo thông tin tại hyperlink: https://reactjs.org/docs/components-and-props.html

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Heart, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn phí tổn: 1800 6734
  • Electronic mail: gross [email protected]
  • Web site: www.tino.org