Phân tích cấu trúc và thiết kế component trong nền tảng Reactjs

React JS một thư viện quá nổi tiếng và rất quen thuộc với mọi lập trình viên font-end ở hiện tại và được rất nhiều website sử dụng để tạo nên trang web của mình và như các bạn đã biết thì React JS có một tư tưởng chủ đạo trong cách hoạt động của mình là nó coi các thành phần trên một trang web là các component khác nhau và các component này sẽ cấu thành trang web của bạn và React JS sẽ không bao giờ thao tác trực tiếp với DOM html của bạn mà nó sẽ tương tác với DOM ảo giúp cho ReactJS có tính mở rộng và dễ tuỳ biền hơn và trong React JS thì các component có thể được cấu tạo từ nhiều component khác nhau tạo thành.

Vậy với những người mới học về ReactJS thì làm thế nào để có thể xây dựng được một component hoàn chỉnh làm thế nào để có thể phân tích thiết kế được một component có khả năng làm việc hiệu quả và dễ bảo trì. Sau đây mình sẽ chia sẻ với các bạn một vài kinh nghiệm trong việc thiết kế các component trong ReactJS của mình nếu có gì sai sót hoặc chỗ nào không đúng thì các bạn có thể comment để góp ý giúp mình nhé.

Để chia sẻ kinh nghiệm của mình về việc phân tích thiết kế một component trong ReactJS thì mình sẽ cùng với các bạn đi phân tích một ví dụ đơn giản đó là làm thanh tìm kiếm trong ứng dụng web.

Oh nghe có vẻ đơn giản nhỉ nếu xây dựng bằng HTML và CSS, JS cũng dễ và nhanh mà. ok đúng là dễ và nhanh thật nhưng hôm nay chúng ta sẽ nâng cấp nó lên dùng React đẻ tăng trải nghiệm người dùng website của chúng ta và mang lại hiệu suất tốt nhất cho trang web của mình.

OK giờ thì chúng ta cùng phân tích cái thanh tìm kiếm của chúng ta thành một component trong ReactJS nhé.

Thanh tìm kiếm

OK như bạn thấy trên hình thanh tìm kiếm của chúng ta chẳng có gì gọi là phức tạp cả nó chỉ gồm 1 ô nhập liệu và một nút để tìm kiếm thôi rất đơn giản phải không nào. Nhưng hãy suy nghĩ một chút về cách hoạt động của thanh tìm kiếm để chúng ta có thể thiết kế nhá đầu tiên khi bạn nhập vào thanh tìm kiếm thì nó sẽ nhận từ khoá mà bạn đã gõ vào và hiển thị những kết quả gợi ý từ từ khoá đó ở dưới ô nhập liệu bạn có thể chọn các từ khoá được liệt kê ra hoặc nhấn enter hoặc nhấn vào biểu tượng kính lúp để tiến hành tìm kiếm kết quả. Như vây về bố cục ta có thể chia làm 3 hần đó là một phần bao ngoài toàn bộ thanh tìm kiếm, một phần chứa ô nhập từ khoá và nút tìm kiếm và một phần chứa các từ khoá gợi ý liên quan đến thông tin mà bạn đã nhập vào. Như vậy để tạo được một component tìm kiếm thì ra cần phải tạo 4 component con là component ô tìm kiếm có chức năng nhập liệu và tìm kiếm các từ khoá có liên quan. Component nút tìm kiếm có chức năng tìm kiếm kết quả rừ khoá mà người dùng đã nhập vào và component tiếp theo là component giúp hiển thị các từ khoá giợi ý khi người dùng nhập vào ô tìm kiếm cũng như các kết quả trả về và component cuối cùng là component các item của chức năng gợi ý của ô tìm kiếm những item này có thể thay đổi các thumball theo kết quả được tìm thấy. Như vậy chúng ta sẽ có một cấu trúc component như sau.

Bó cục component

Đó như vậy sau khi ta đã có bảng phác thảo giao diện cũng như sơ đồ hoạt động động rồi chúng ta cần suy nghĩ một chút về các tham số giá trị sẽ được sử dụng trong React nhất là hai giá trị được dùng nhiều nhất là props và state đầu tiên là state, theo logic của React thì các tham số cũng như hàm sẽ chỉ được phép chuyền một chiều từ cha xuống con từ component cao xuống component thấp chứ không có chuyện truyền ngược lại vậy thì chúng ta cần truyền những thứ gì từ component cha xuống cho các component con như từ khoá tìm kiếm kết quả tìm kiếm. Vậy chúng ta sẽ truyền như thế nào đây. Với ý tưởng của mình thì đường đi của cái thanh tìm kiếm này sẽ như sau.

Luồng dữ liệu

Như bạn thấy chúng ta sẽ truyền các props và state theo luồng sau đầu tiên ta sẽ truyền các biến như kết quả, từ khoá tìm kiếm xuống các component con theo thứ tự từ ô tìm kiếm xuống nút tìm kiếm, nút tìm kiếm sẽ thực hiện hành động tìm kiếm các kết quả gợi ý và thêm vào mảng kết quả rồi gửi có compoment kết quả component kết quả sẽ render các item kết quả hiển thị lên màn hình. Đó chỉ như vậy là ta đã thiết kế xong một cái ô tìm kiếm đơn giản bằng React rồi và với việc thiết kế và sử dụng React như vậy thì công việc của bạn sẽ được rút ngắn lại rất nhiều và code của bạn trong cũng sáng sủa hơn.

Như vậy tôi đã chia sẻ với các bạn cách để phân tích thiết kế một component trong ReactJS đầu tiên bạn phải phác thảo bộ khung giao diện của component đó đã, component đó có những chức năng gì, phân chia bố cục cũng như chia các thành phần nhỏ trong component đó thành các componen nhỏ hơn nhằm đáp ứng yêu cầu chức năng của phần mềm. Sau đó suy nghĩa thiết kế luồng data và các biến cũng như tham số sẽ được truyền như thế nào.

Sau khi hoàn thành xong tất cả các bước trên thì bạn đã có một bản thiết kế hoàn chỉnh rồi công việc của bạn còn lại chỉ là code nên component đó thôi.