Mental model trong React

Bạn đang quan tâm đến Mental model trong React phải không? Nào hãy cùng PHE BINH VAN HOC theo dõi bài viết này ngay sau đây nhé!

Video đầy đủ Mental model trong React

Nếu bạn đã lập trình đủ lâu, ít nhiều bạn đã nghe đến khái niệm mô hình tinh thần và nếu bạn đang viết phản ứng, bạn sẽ thấy thuật ngữ này xuất hiện rất nhiều. Đây là một khái niệm không chỉ hữu ích trong phản ứng mà còn là chìa khóa để đạt được sự tự tin khi sử dụng các thư viện như phản ứng.

Mô hình tinh thần là gì

Thật khó tìm một từ tiếng Việt cô đọng để diễn tả nó. Tóm lại, đó là cách chúng ta hình dung vấn đề trong tâm trí mình , một bước ánh xạ hệ thống bên ngoài vào tâm trí chúng ta và hình dung cách thức hoạt động của nó.

Một ví dụ điển hình về mô hình tinh thần là Internet: một hệ thống phức tạp gồm nhiều bộ phận được kết nối với nhau, nhưng hãy nghĩ về cách bạn hình dung nó. Tôi sẽ nghĩ về nó như một hệ thống máy tính được kết nối với nhau bởi một số lượng lớn các máy chủ, với một số bộ điều hướng giúp điều hướng các đường dẫn thông tin.

Đó không phải là một hệ thống mô tả đầy đủ về internet, nhưng ít nhất với hình dung này, tôi có thể giải quyết nhiều thứ liên quan, chẳng hạn nếu tôi cần mạng, tôi cần một máy tính. thiết bị đầu cuối máy tính và được kết nối với đường truyền của nhà mạng.

Tìm một công việc đáp ứng được mức độ thu hút của bạn

Tại sao nó lại quan trọng?

Nếu chúng tôi có thể tìm ra cách mọi thứ sẽ diễn ra, nếu chúng tôi gặp sự cố, chúng tôi có thể giải quyết nó một cách suôn sẻ hơn.

Hình dung cách hoạt động của phản ứng

react giúp chúng tôi xây dựng các hệ thống ui phức tạp trong đó nhiều thứ tương tác dễ dàng hơn nhiều so với trước đây. Nó cũng hướng dẫn chúng ta viết mã một cách rất cụ thể, giống như một bài thơ “sáu quãng tám”, và khi bạn viết nó, bạn phải tuân theo những quy tắc nhất định.

Ý tưởng chính của react: Đóng gói Logic của ứng dụng cũng giống như một khối và react đảm bảo rằng gói luôn được cập nhật. p>

Tất cả đều là chức năng

1. thành phần phản ứng: là một hàm
2. một thành phần có chứa một thành phần khác: một hàm gọi một hàm khác
3. prop: một tham số cho một hàm

Khi viết bằng jsx, bạn có thể nhầm các thành phần, đạo cụ với một thứ gì đó cao siêu. Nếu bạn bỏ qua tất cả nội dung jsx, thì react là một hàm gọi lại.

component: hàm trả về jsx

react sử dụng jsx – javascript xml – một cách để viết html bằng javascript.

Hãy bỏ qua các thành phần lớp và chỉ tập trung vào các thành phần chức năng, những thành phần này ngày càng trở nên phổ biến hơn. Các thành phần hàm hoạt động giống như các hàm javascript bình thường. Các thành phần React luôn trả về jsx -> sau đó sẽ được thực thi và trả về kết quả cuối cùng trong html

prop: tham số hàm

prop (thuộc tính) chỉ là một cách khác để gọi các tham số được truyền cho hàm, nhưng mọi thứ khác hoàn toàn giống nhau, react đã điền sẵn một số tham số của chính nó, như phần tử con.

Chức năng trực quan hóa

Bạn có thể coi các chức năng / thành phần như các hộp, cái này bao bọc cái kia

Các hộp tương tác với nhau như thế nào?

Bạn có thể tưởng tượng ngoài đời ông bà ta có câu Tài sản của cha mẹ thuộc về con, tài sản của cha thuộc về con , người ta đặt tên cho kiểu kế thừa, và phần bổ sung được gọi là close strong>.

Đây là cách các hàm cha và con tương tác, bạn sử dụng các hàm, bạn sử dụng các bao đóng.

Có nghĩa là trong phản ứng, với tư cách là cha mẹ, chúng ta có thể chuyển quyền sở hữu cho con nhưng chúng ta không thể chạm vào tài sản của con

Hình dung cách React hiển thị

kết xuất có lẽ là phần dễ dàng nhất để phản hồi lại hình ảnh. Một số thứ nhìn vào mã và chúng tôi không thấy cơ chế kết xuất xảy ra và không xảy ra.

Hãy coi nó như một chiếc hộp có thể tái chế, lần hiển thị đầu tiên là quá trình sản xuất hộp, các lần hiển thị tiếp theo hoặc tái chế, hầu hết mọi thứ sẽ bị đập đi đập lại nhiều lần, nhưng các bộ phận như trạng thái sẽ được sử dụng lại

Công việc trạng thái của React là đảm bảo nó luôn nhất quán giữa các lần hiển thị.

Khi một hộp được tái chế, tất cả các hộp con bên trong của nó cũng được tái chế – được hiển thị lại với trạng thái và đạo cụ đã thay đổi.

Hy vọng rằng bài viết này đã cung cấp cho bạn một cách nhẹ nhàng và không quá khích để sử dụng các thành phần phản ứng.

topdev qua vuilaptrinh

Như vậy trên đây chúng tôi đã giới thiệu đến bạn đọc Mental model trong React. Hy vọng bài viết này giúp ích cho bạn trong cuộc sống cũng như trong học tập thường ngày. Chúng tôi xin tạm dừng bài viết này tại đây.

Website: https://phebinhvanhoc.com.vn/